Figma To Code

Figma to Code

Get Claude Code to read your Figma designs directly and translate them into native SwiftUI. No screenshots. No PNGs. No "look at the bottom right corner of this image."

When to Use

• You designed a screen in Figma and want Claude Code to build it
• You're polishing an existing screen to match a refined Figma comp
• You're adding new screens that were designed before being built
• You want to batch-import multiple screens from a Figma project

Prerequisites

• Figma MCP connected to Claude Code
• Your Figma file organized with named frames (not random artboards)
• Each screen in Figma should be a single, clearly named frame

How to Reference Figma Frames

Option 1: Frame URL

Copy the URL of a specific frame in Figma (right-click frame > Copy link). Paste it directly into your Claude Code prompt.

Option 2: Node ID

In the Figma URL, the node ID appears after node-id=. You can reference this directly.

Option 3: File + Frame Name

Reference the Figma file URL and frame name: "In my Figma file [URL], find the frame called 'Settings Main'."

The Prompt Template

For a New Screen

Build [Screen Name] based on this Figma frame: [URL or node ID].

Read the frame's layout, text content, spacing, and hierarchy.
Use native SwiftUI components for everything. Refer to CLAUDE.md
for component rules. The Figma design shows visual intent -- match
the layout and hierarchy, but use system-standard spacing and
native component behavior rather than pixel-exact replication of
every dimension.

For Polishing an Existing Screen

Refine [Screen Name] to match this Figma frame: [URL or node ID].

The screen already exists and works. Adjust layout, spacing,
typography weight, and visual hierarchy to match the Figma design.
Do not change functionality or navigation. Do not replace native
components with custom ones.

For Multiple Screens (Batch)

Here are the Figma frames for the Settings flow:
- Settings Main: [URL]
- Settings Notifications: [URL]
- Settings Appearance: [URL]
- Settings About: [URL]

Build all four screens. Each is a standard grouped List with
sections and rows. Refer to CLAUDE.md for navigation patterns.
The gear icon on the home screen is the entry point.

What to Expect from the MCP

The Figma MCP provides Claude Code with:

• Frame dimensions and layout structure
• Text content and approximate typography
• Color values
• Component hierarchy (which elements are grouped)
• Layer names (if you named your layers well)

It does NOT provide:

• Interaction behavior (you must describe this)
• Navigation destinations (you must describe this)
• State changes (you must describe this)
• Animation details (you must describe this)

This is why behavior descriptions still matter. Figma gives the "what it looks like." You give the "what it does."

The 80/20 Rule

Match the Figma design at the layout and hierarchy level. Don't fight SwiftUI to match every pixel. Specifically:

Match:

• Content hierarchy (what's bigger, what's smaller)
• Layout direction (horizontal vs vertical groupings)
• Text content and approximate weight
• Color values for branded elements
• Overall spacing feel (tight vs airy)

Let SwiftUI handle:

• Exact padding values (system defaults are usually right)
• List row heights (system standard looks better than forced values)
• Safe area insets
• Navigation bar and tab bar styling
• Keyboard avoidance

Anti-Patterns

Verification

After Claude Code builds from a Figma frame:

1. Run in simulator
2. Compare side by side with Figma (split screen)
3. Check: Does the hierarchy feel right? (Not pixel-perfect, but right)
4. Check: Are all text elements present?
5. Check: Is the tint/accent color correct?
6. Check: Does it use native components? (no custom views where SwiftUI has a built-in)

Iterate with specific feedback: "The section headers need more top padding" or "The progress ring should be smaller, about 24pt diameter." Small, targeted adjustments converge faster than re-prompting from scratch.