This skill should be used when the user says "convert this Figma design", "implement this Figma file", "build this from Figma", "Figma to code", "code this design", "translate the design to React", "implement the mockup", "build from this Figma link", "match this design exactly", or any request to generate front-end code from a Figma design file or screenshot. Requires the Figma MCP integration to be connected.
How this skill is triggered — by the user, by Claude, or both
Slash command
/saas-frontend-designer:figma-to-codeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert Figma designs into production-ready Next.js + React + Tailwind + shadcn/ui code. This skill bridges the gap between design intent and working implementation.
Convert Figma designs into production-ready Next.js + React + Tailwind + shadcn/ui code. This skill bridges the gap between design intent and working implementation.
This skill requires the Figma MCP integration. If not connected, inform the user they need to enable the Figma connector in their Claude settings.
Available Figma MCP tools:
get_design_context — Primary tool. Returns reference code, screenshot, and metadata for a Figma nodeget_screenshot — Visual preview of a specific nodeget_metadata — XML structure overview of node hierarchyget_variable_defs — Design token values (colors, spacing, etc.)get_code_connect_map — Existing code-to-Figma mappingsWhen the user provides a Figma URL, extract the file key and node ID, then fetch design context.
URL format: https://figma.com/design/:fileKey/:fileName?node-id=:nodeId
Example: https://figma.com/design/abc123/MyApp?node-id=1-2
→ fileKey: abc123
→ nodeId: 1:2
Use get_design_context as the primary tool. It returns:
From the design context, extract:
16px → p-4)Translate design elements to the target stack:
| Figma Element | Implementation |
|---|---|
| Auto layout (horizontal) | flex + gap-{n} |
| Auto layout (vertical) | flex flex-col + gap-{n} |
| Grid layout | grid grid-cols-{n} + gap-{n} |
| Frame with padding | Container div + p-{n} |
| Text styles | Tailwind text utilities |
| Fill colors | Tailwind color classes or CSS variables |
| Stroke / border | border + border-{color} |
| Drop shadow | shadow-{sm/md/lg} |
| Corner radius | rounded-{sm/md/lg/xl/full} |
| Component instances | shadcn/ui components or custom components |
| Icon instances | lucide-react equivalents |
| Image fills | next/image with proper sizing |
If the Figma file uses variables/tokens, fetch them with get_variable_defs:
Figma variable → CSS variable → Tailwind config
--color-primary → --color-brand → brand color in tailwind.config.ts
--spacing-md → maps to Tailwind space scale
Use these to populate the design-system skill's token architecture.
Apply these rules when generating implementation code:
Pixel-perfect is not the goal. The goal is to capture design intent using the target stack's idioms. A Figma frame with 13px padding becomes p-3 (12px) — snapped to the grid.
Component decomposition: Break the design into components matching these boundaries:
Responsive adaptation: Figma designs are typically one breakpoint. Generate mobile-first code and adapt up:
After generating code, compare against the Figma screenshot:
| Figma pixels | Tailwind class | REM |
|---|---|---|
| 4px | 1 | 0.25rem |
| 8px | 2 | 0.5rem |
| 12px | 3 | 0.75rem |
| 16px | 4 | 1rem |
| 20px | 5 | 1.25rem |
| 24px | 6 | 1.5rem |
| 32px | 8 | 2rem |
| 40px | 10 | 2.5rem |
| 48px | 12 | 3rem |
| 64px | 16 | 4rem |
| Figma size | Tailwind class |
|---|---|
| 12px | text-xs |
| 14px | text-sm |
| 16px | text-base |
| 18px | text-lg |
| 20px | text-xl |
| 24px | text-2xl |
| 30px | text-3xl |
| 36px | text-4xl |
| 48px | text-5xl |
| Figma weight | Tailwind class |
|---|---|
| 300 / Light | font-light |
| 400 / Regular | font-normal |
| 500 / Medium | font-medium |
| 600 / SemiBold | font-semibold |
| 700 / Bold | font-bold |
| Figma radius | Tailwind class |
|---|---|
| 2px | rounded-sm |
| 4px | rounded |
| 6px | rounded-md |
| 8px | rounded-lg |
| 12px | rounded-xl |
| 16px | rounded-2xl |
| 9999px | rounded-full |
Figma auto layout with gap 12, horizontal, center aligned:
<div className="flex items-center gap-3">
Figma frame 1280px wide, centered, padding 24:
<div className="mx-auto max-w-7xl px-6">
Figma component with Property=Primary/Secondary/Ghost variants:
const variants = cva("base-classes", {
variants: {
variant: {
primary: "bg-brand text-white",
secondary: "bg-surface-tertiary",
ghost: "hover:bg-surface-secondary",
},
},
})
Consult references/figma-patterns.md for advanced Figma-to-code patterns including responsive variants, interactive prototyping translation, and design system sync workflows.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub moxywolfllc/moxywolf-plugins --plugin saas-frontend-designer