Figma MCP

[[figma]] has a new [[20250811104331-ai-mcp]] server. While it initially was mostly helpful for extract design context out of Figma, it can now also better interact with Figma. This means it helps with Prompt to Design, Design to Code, and Code to Design.

The MCP servers extracts structured design context and passes that context to your [[agent]]. The agent itself is still responsible for generating the final code. This is a lot better than using a screenshot, where the agent would have to guess what component corresponds to what, visually. This helps use better [[semantics]], Figma already knows the difference between an 'error' red and a 'brand' red. A screenshot does not.

The MCP server does not understand your design system by default though. Code connect, variables, and prompts all provide that information. https://developers.figma.com/docs/figma-mcp-server/mcp-vs-agent/

Currently the Figma MCP server has different tools to help:

• Let your agent write directly to the canvas in Figma Design and FigJam
  • Create and modify native Figma content directly from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your Figma files using your design system as the source of truth.
• Generate designs from the live UI of your web apps and sites Turn live UI from your browser (production, staging, or localhost) into editable design layers in Figma. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement.
• Generate code from selected frames Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.
• Extract design context Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.
• Retrieve Make resources Gather code resources from Make files and provide them to the LLM as context. This can help as you move from prototype to production application.
• Retrieve FigJam resources Access content from your FigJam diagrams and use it in your code generation workflow. Incorporate early-stage ideas, flows, or architecture maps directly into development.

Overall there's a lot of value, but it does make me worried about [[vendor lock in]]. To achieve best results, all of your information needs to be piped into Figma so it can be piped out. Things like Variables, Code Connect, etc. help with this. However it (currently) doesn't help the other parts of your design system. It doesn't pull from any standards, documentation, etc.

In an ideal world, I'd rather position Figma's MCP server as a way of gathering information from Figma, not the source of truth of generating code (which should use your DS MCP Server), similar to what's described in https://www.designsystemscollective.com/figma-dev-mode-mcp-is-nice-but-we-need-design-system-mcps-bb599582da3d. i.e. use Figma's MCP to extract design context, but not much else.

https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/ https://www.figma.com/blog/design-systems-ai-mcp/ https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

[[ai]]