4 min read
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: 16pxAsk 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:
PrimaryButtonorButtonwithvariant="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
ProfileCardshould 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
- Design in Figma
- Implement with Claude
- Discover issues in code
- Update Figma (or accept code reality)
- 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