🎨 Figma Integration

Connect your Figma designs and let the wizard turn them into code.

Overview

SaaSClaw integrates with Figma via OAuth, letting you import design files directly into your projects. The wizard can extract design tokens (colors, typography, spacing, shadows) and frame screenshots to match your designs pixel-for-pixel.

💡 What it does. Paste a Figma URL into the wizard chat. The wizard fetches the frame screenshot and structured design tokens, then generates code that matches your design.

How It Works

1. Connect your Figma account (one-time OAuth) 2. SaaSClaw stores your Figma credentials securely 3. In the wizard, paste a Figma URL (file, frame, or component) 4. The wizard calls figma_get_frame / figma_get_design_tokens 5. Design tokens are injected into the system prompt 6. Generated code matches your Figma colors, fonts, spacing, and layout

Connecting Your Figma Account

Step 1: Authorize

Go to Account → Integrations.
Find the Figma section and click Connect.
You'll be redirected to Figma's OAuth consent screen.
Review the requested scopes and click Allow.

Scopes requested: file_content:read, file_metadata:read, current_user:read, file_versions:read. SaaSClaw can only read your files — it cannot modify them.

Step 2: Use in the Wizard

Once connected, just paste a Figma URL into the wizard chat:

Full file: https://www.figma.com/design/abc123/MyApp
Specific frame: https://www.figma.com/design/abc123/MyApp?node-id=1:2

The wizard will automatically detect the Figma URL and fetch the design data.

What the Wizard Sees

When you provide a Figma URL, the wizard gets:

Screenshot — a PNG render of the frame for visual reference
Design tokens — colors, fonts, spacing, border radii, shadows as CSS-ready values
Layout structure — component hierarchy, auto-layout properties, text content

FAQ

Does SaaSClaw modify my Figma files?

No. The integration is read-only. SaaSClaw can view your designs and extract tokens, but never edits or deletes anything in Figma.

Can I use Figma with any framework?

Yes. Design tokens are framework-agnostic CSS values. They work with React, Vue, Svelte, plain HTML/CSS, and more. The wizard adapts the output to your project's framework.

Can I disconnect Figma?

Yes. Go to Account → Integrations and click Disconnect. Your Figma OAuth tokens are immediately revoked and deleted.

What if my Figma file is private?

As long as your Figma account has access to the file, SaaSClaw can read it. The OAuth token represents your account and its permissions.