Figma to Claude Workflow

Your Figma designs contain valuable information. This guide covers how to effectively communicate visual design to Claude and establish a smooth design-to-code workflow.

Providing Visual Context

Screenshots are powerful

• Capture the specific component or screen
• Annotate with what's important
• Show multiple states (default, hover, active)
• Include mobile and desktop if responsive

Describe what you're showing

• "Here's my Figma design for the settings panel"
• "This shows the three states of the button"
• "The spacing and colors are finalized"

Reference your design system

• "Use the same card style as my profile card design"
• "Match the typography from my Figma file"
• "The color palette is in my design"

Design Tokens → Code Variables

Extract key values

• Colors with names (primary, surface, text-muted)
• Spacing scale (4, 8, 12, 16, 24, 32, 48)
• Typography sizes and weights
• Border radius values
• Shadow definitions

Share as structured data

Colors:
- Primary: #2563EB
- Background: #FFFFFF
- Surface: #F8FAFC
- Text: #1E293B
- Text Muted: #64748B

Spacing:
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px

Border Radius:
- Small: 4px
- Medium: 8px
- Large: 16px

Ask Claude to set up a theme

Set up a theme file with these design tokens
from my Figma design system. Use CSS custom
properties for web or a Theme struct for SwiftUI.

Component Naming Conventions

Use consistent naming

• Figma: Button/Primary/Default
• Code: PrimaryButton or Button with variant="primary"
• Match names between design and code when possible

Communicate variants

• "This button has three variants: primary, secondary, and ghost"
• "The card can be compact or expanded"
• "There's a loading state variant"

Map Figma layers to components

• "The Figma component ProfileCard should be a React component"
• "Each auto-layout frame is roughly a component"

Exporting Assets Effectively

Icons

• Export as SVG for web
• Use SF Symbols references for Apple platforms
• Specify size: "24x24 icons for the toolbar"

Images

• Provide actual image files or placeholder URLs
• Specify aspect ratios and sizing behavior
• Note any special treatments (rounded corners, overlays)

What to communicate

• "Icons should be 24px with 1.5px stroke"
• "Product images are 16:9 aspect ratio"
• "Avatars are 40px circles"

Iterating Between Figma and Code

Design → Code → Design loop

1. Design in Figma
2. Implement with Claude
3. Discover issues in code
4. Update Figma (or accept code reality)
5. Repeat

When code diverges from design

• Some things that work in Figma don't translate directly
• Platform conventions may override your design
• Performance might require simplification
• Document intentional differences

Keep Figma updated

• After code changes, update Figma if the change is intentional
• Your Figma file becomes documentation
• Note platform-specific variations

Common Workflow Prompts

Starting from a design

I'm attaching a screenshot of my Figma design.
Build this exactly as shown. Use [React/SwiftUI].
The spacing and colors should match precisely.

Matching design tokens

Here are my design tokens from Figma.
Set up a theme system using these values.

Component from Figma

Build this component from my Figma design.
It has three states: default, hover, and disabled.
I'm including screenshots of each state.

Responsive implementation

Here's my Figma design showing mobile and desktop layouts.
Implement both with a breakpoint at 768px.

Iterating on implementation

The implementation is close but doesn't match my design.
The spacing between items should be 16px, not 12px.
And the border radius is too sharp — use 12px.

Tips for Better Results

Be specific about what matters

• If exact pixel values matter, say so
• If flexibility is OK, mention that too
• "Match the Figma exactly" vs "Use this as inspiration"

Provide context gradually

• Start with the overall layout
• Then drill into component details
• Share design tokens after structure is in place

Account for dynamic content

• Figma shows static content
• Real apps have varying text lengths
• Show Claude edge cases: long names, empty states, many items

What You'll Learn

• How to provide visual context effectively
• Extracting and communicating design tokens
• Naming conventions that bridge design and code
• Iterating between Figma and implementation
• Handling design-to-code translation challenges

Exercises

1. Pick one finished Figma component, take screenshots of each of its states, and use the "Component from Figma" prompt to have Claude build it — then compare the output to your design pixel by pixel.
2. Extract your design tokens (colors, spacing, radius) into the structured-data format shown above and run the "Ask Claude to set up a theme" prompt to generate a theme file.
3. Build a card from a static Figma frame, then deliberately stress-test it: prompt Claude with edge cases (a very long name, an empty state, 50 items) and confirm the layout holds.