Skip to main content

​
When should you use this server

Use the Figma MCP server when you want an agent to:
  • Generate production-ready UI code (React, Vue, HTML/CSS, iOS) from Figma designs.
  • Extract variables and style tokens from selected nodes (colors, spacing, typography).
  • Map Figma components to real code components in your repo (Code Connect).
  • Capture high-fidelity images of selections for reference or docs.
  • Provide your agents with design system rules so generated code matches your stack.

​
Tools provided

​
get_code

Generates code for your Figma selection. Default output is React + Tailwind, but the output framework and libraries can be customized through prompts.
  • Examples:
    • “Generate my Figma selection in Vue.”
    • “Generate my Figma selection in plain HTML + CSS.”
    • “Generate my Figma selection in iOS.”
    • “Generate my Figma selection using components from src/ui.”

​
get_variable_defs

Returns variables and styles (design tokens) used in your selection — including colors, spacing, typography.
  • Examples:
    • “Get the variables used in my Figma selection.”
    • “List the color and spacing variables in this frame.”

​
get_code_connect_map

Retrieves a mapping between Figma node IDs and their corresponding code components in your codebase.
  • Output includes:
    • codeConnectSrc: file path or URL of the component in your repo.
    • codeConnectName: the component’s name in your codebase.
  • Enables direct mapping between Figma elements and real code components, so agents use the right building blocks.

​
get_image

Captures a screenshot of your selection to preserve layout fidelity.
  • Notes: Enable via Preferences → Dev Mode MCP Server Settings → Enable tool get_image.
  • Recommended to keep this on unless managing token limits.

​
create_design_system_rules

Generates a rule file to guide agents in producing high-quality code aligned with your design system and tech stack.
  • After creating the file, save it in your repo’s rules/ or instructions/ directory so the MCP client can reference it for future generations.

​
Notes

  • The Dev Mode MCP Server is in open beta.
  • Available on a Dev or Full seat on the Professional, Organization, or Enterprise plans.
  • You must use a code editor or application that supports MCP Servers (i.e. VS Code, Cursor, Windsurf, Claude Code).
  • You can only use the Dev Mode MCP server from the Figma desktop app.