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.

Portkey is now PRISMA AIRS AI Gateway. See it in action.

Contact Us
Last modified on August 3, 2026