Happy slice of mcp pizzaMCP.pizza

claude-talk-to-figma-mcp

MCP.Pizza Chef: arinspunk

Contrast audits, color swaps, and style sweeps across a whole document stop being manual once an assistant can reach into Figma. The connection runs through a plugin you import into Figma Desktop plus a small program on your machine, and it works with any Figma account, including free ones, with no Dev Mode license required. Documented clients include Claude Desktop, Claude Code, Cursor, Antigravity, Windsurf, VS Code with Copilot, Cline, and Roo Code. The authors estimate five minutes to set up.

Coding
Images/Design

Use This MCP server To

Find text that fails contrast rules and fix it Swap one brand color for another across a whole file Get feedback on a screen's visual hierarchy Generate a React component from a selected design Group and organize elements in a messy document Export assets from a selection without hunting through menus

README

Claude Talk to Figma collage

Claude AI Agents Talk to Figma MCP

Enable your AI agents to read, analyze, and modify Figma designs.

Works with your favorite agentic tools:

👩🏽‍💻 Who it's for

UX/UI Teams

Automate repetitive design tasks and maintain brand consistency without manual effort:

  • Automated accessibility audits - Detect and fix contrast issues in seconds
  • Bulk style updates - Change colors, typography, or spacing across the entire document with a single command
  • Visual hierarchy analysis - Get instant feedback on your design structure

Developers

Generate production-ready code directly from designs:

  • React/Vue/SwiftUI components - From design to code in one step
  • Code with design tokens - Keep design and development in sync
  • Reduce handoff friction - Fewer back-and-forth iterations with the design team

Key advantage: Unlike Figma's official MCP which requires a Dev Mode license, this MCP works with any Figma account (even free ones).

💡 Real-world use cases

Accessibility:

"Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA"

Rebranding:

"Change #FF6B6B to #E63946 in all primary buttons throughout the document"

Design analysis:

"Analyze the visual hierarchy of this screen and suggest improvements based on design principles"

Developer handoff:

"Generate the React component for 'CardProduct' including PropTypes and styles in CSS modules"

claude-talk-to-figma-mcp FAQ

Which apps does this work with?
Claude Desktop, Claude Code, Cursor, Antigravity, Windsurf, VS Code with Copilot, Cline, and Roo Code.
Do I need a paid Figma plan?
No. Unlike Figma's own server, this one works with any account, free plans included.
Do I need an API key?
No key is needed, but you do need Figma Desktop, Node installed, and the bundled plugin imported into Figma.
Can I use this to fix contrast problems across a design?
Yes — ask it to find text below the accessibility threshold and suggest colors that pass.
How hard is setup?
Roughly five minutes: run one command, import the plugin into Figma Desktop, paste a config block, then connect using the channel ID the plugin shows you.
Can it change my file?
Yes, it edits the document directly, so work on a copy or a branch until you trust what it does.
Can two agents work on the same file at once?
Yes. Requests are queued so the plugin does not lock up, though each agent must say exactly where it is placing new elements.