/figma

Pull designs from Figma, extract tokens, translate them to code, and sync component mappings. This skill requires Figma MCP to be configured.

When to use this

• You have designs in Figma and want to translate them to code
• You want to keep Figma and code in sync
• You want to pull Figma variables into your CSS design tokens

Four modes

Inspect

Analyze a Figma design without building anything:

/figma inspect

Claude captures the design, summarizes the layout, spacing, colors, and typography, then maps Figma tokens to your project's design system. It flags any tokens that don't exist yet.

Build

Translate a Figma design directly into code:

/figma build

Claude inspects the design, then creates the component or page in code using shadcn/ui primitives and your design tokens. It matches the Figma layout as closely as possible.

Sync

Push component mappings back to Figma:

/figma sync

Claude checks for code-connect suggestions, reviews them with you, and pushes the mappings to Figma so your design file knows which code implements each component.

Variables

Compare Figma variables with your CSS tokens:

/figma variables

Claude pulls your Figma variables and shows a diff: what's in Figma but not in code, and vice versa. It offers to update globals.css to match.

Setup

To use this skill, you need Figma MCP configured in your Claude Code environment. The MCP tools (mcp__figma__*) should be available — Claude will tell you if they're missing.

What to do next

After building from Figma, use /design refine to polish the output, or /ship to deploy.