Claude Code + Figma: Designer's Workflow
Connect Claude Desktop to Figma via MCP to generate iterative designs, push prototypes, create docs/audits—boosted by custom skills and research, despite Figma Skills inconsistencies.
Setup Claude for Figma Integration Without Terminal
Start in Claude Desktop app (preferred for designers over terminal). Go to Customize > Connectors > Add Connector, search "Figma", select the interactive one. Authorize in browser with correct Figma account. Confirm connection shows "Figma MCP connected".
This enables pushing designs directly to Figma files via prompts—no Figma Skills needed initially. Paste empty Figma file link into Claude Code tab, prompt to push. Works for small elements first to avoid token waste and errors.
Key principle: MCP predates Figma Skills; use it for basic push/pull. Developers can install terminal version via docs (link in video desc), but desktop avoids CLI friction.
Common mistake: Pushing half-baked iterations. Iterate fully in Claude first, push only when ready to recreate manually in Figma—avoids messy round-trips burning tokens.
"They iterate in Claude, push to Figma when happy, then recreate in Figma. Pushing during iteration gets messy and token-heavy."
Generate Targeted Designs with Research-Backed Skills
Focus prompts on small scopes: e.g., "Build hero layout for SaaS task manager, responsive across devices" (switch to Opus model for better results). Drag Mobbin screenshots (heroes from similar products) into Claude, prompt: "Build reusable skill storing these in /examples folder; reference for future designs matching styling/layout."
Save skill. In design chat: "Review skill name, update design—run locally." Outputs improve: less generic, more on-brand.
Scale it: Spend half-day curating research (Mobbin full-pages/sites). Custom skills make Claude reference your style consistently, reducing AI-generated blandness.
Before/after: Basic prompt yields stock hero; skill + examples yield branded layout with better spacing/typography.
For docs: Link component page, prompt: "Build docs for button components: overview, variants, accessibility/usage guidelines—push to Figma." Result: Styled text blocks mimicking components (not true instances).
"Work in small stages. Building entire landing pages burns tokens fast and causes mistakes."
Figma Skills: Apply Design Systems, Accept Inconsistencies
Download required Figma Skills zip from GitHub (MCP server). In Claude: Create plugin > upload zip. For extras (e.g., rad-spacing, apply-design-system, audit-design-system): Download skill.md files individually, drag-upload (quit/reopen Claude if buggy).
Test: Link doc page, prompt: "Apply design system variables/styles/components." Skills activate (e.g., figma-use, apply-design-system), but results inconsistent—some vars apply, styles skipped if no 1:1 match (e.g., 12px font ignores nearest 14px style).
Trade-offs: Skills slow generation 6x, hit-or-miss even same prompt/file. Turn on/off per task—MCP for speed, skills for system adherence. Don't edit Figma file during Claude ops; degrades output.
Quality criteria: Good if vars/components auto-apply >50%; else manual fix. Not client-ready—prototype accelerator.
"Figma Skills are wildly inconsistent. Same prompt/file yields different results. Still early stage, but generally slower."
Audit and Refine Designs for Production
Accessibility audit: Link Figma page, prompt via Anthropic plugin or skills: audits contrast, ARIA, focus states. Pushes report to Figma.
Design system audit: Use audit-design-system skill on screens—flags drift from published components.
Full build example: Prompt hero with skill, push, audit responsiveness/accessibility. Recreate/polish in Figma using pushed base.
Workflow fit: Assumes Figma proficiency; new to AI. Use post-prototype: research > generate > push > manual refine/audit. Pairs with design systems (e.g., CollectiveKit).
Pitfalls: Skills reject uploads (reopen app); bulk zip now reliable (wasn't before); no real-time collab with Figma edits.
"It's not smart enough yet—if no exact match in styles/vars, it skips. Looks for 1:1, doesn't approximate."
Key Takeaways
- Connect Figma MCP first via Claude Desktop Connectors for instant push capability—no skills needed.
- Prompt small: Hero sections before pages; Opus > Sonnet for visuals.
- Build custom skills with Mobbin screenshots in /examples for consistent, research-driven styling.
- Install Figma Skills as plugins (zip bulk + manual .md); toggle for tasks needing vars/components.
- Iterate in Claude only, push ready designs to Figma for manual recreation—saves tokens.
- Audit via prompts/skills for accessibility/design drift post-generation.
- Expect inconsistencies: 6x slower, no 1:1 style matching—treat as accelerator, not replacer.
- Research scales: Half-day Mobbin curation yields reusable skills matching your brand.
Practice: Grab empty Figma file, connect MCP, generate/push hero with 3 Mobbin examples in a skill. Audit output.