Handleiding voor de Figma MCP-server

The Figma MCP server helps developers explore and implement designs quickly and accurately:

• Get design context and code from your Figma designs, FigJam, and Make files
• Capture your live UI as design layers, bringing the interfaces rendered by your code to Figma Design files
• Enhance the way you work with design components and Code Connect

The tools within Figma’s MCP server bring additional context from Figma into your workflow, so your code doesn't just match your existing systems, but your design, too.

MCP-servers maken deel uit van een gestandaardiseerde interface waarmee AI-tools kunnen communiceren met gegevensbronnen via het Model Context Protocol.

Bekijk onze Figma MCP-collectie om meer te leren over de MCP-server en hoe je Figma in je workflow kunt integreren →

Als de server is ingeschakeld, kun je het volgende doen:

• 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.

  Note: This feature requires the remote Figma MCP server and is currently supported only for Claude Code, Codex by OpenAI, and VS Code.

  This feature is continuously being improved. If you encounter issues, you can report the issues using Fig, our support chatbot, or by emailing support (paid plans).

  Learn more about generating designs from your interfaces

• Code genereren van geselecteerde frames

  Selecteer een Figma-frame en zet het om in code. Handig voor productteams die nieuwe flows ontwikkelen of appfuncties itereren.

• Ontwerpcontext ophalen

  Haal variabelen, componenten en indelingsgegevens rechtstreeks op in je IDE. Dit is vooral nuttig voor ontwerpsystemen en workflows op basis van componenten.

• FigJam-hulpbronnen ophalen

  Krijg toegang tot de inhoud van FigJam-diagrammen en gebruik deze in je codegeneratieproces. Integreer ideeën, workflows of architectuurkaarten vroegtijdig rechtstreeks in het ontwikkelproces.

• Make-hulpbronnen ophalen

  Verzamel codebronnen uit Make-bestanden en bied deze aan de LLM als context. Dit kan helpen bij het omzetten van een prototype naar een productieklare applicatie.

• Houd je ontwerpsysteemcomponenten consistent met Code Connect

  Verbeter de uitvoerkwaliteit door je daadwerkelijke componenten te hergebruiken. Code Connect zorgt ervoor dat je gegenereerde code consistent blijft met je codebase.

  Learn more about Code Connect

Stel de MCP-server in

Je kunt de Figma MCP-server op twee manieren verbinden:

• Remote MCP server: Connects directly to Figma’s hosted endpoint at https://mcp.figma.com/mcp. Learn how to install the remote MCP server.
• Desktop MCP server: Runs locally through the Figma desktop app. Learn how to install the desktop MCP server.

Verbind de MCP-server met je editor

Follow instructions for your specific editor to connect to the Figma MCP server, either locally or remotely. Some clients also support Skills, which add agent-level instructions that help AI tools work more effectively with Figma designs:

About Skills

Skills provide guidance for how an agent should complete specific tasks, using a combination of MCP tool calls and detailed instructions.

While the Figma MCP server exposes individual tools, Skills help agents understand which tools to use, how to sequence them, and how to apply the results when working with Figma designs.

Skills can guide agents through workflows like:

• Connect Figma design components to code components using Code Connect
• Generate design system rules aligned to your codebase 
• Translate designs into production-ready code 

Skills don’t replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.

Prompts invoeren voor je MCP-client

De Figma MCP-server introduceert een reeks tools waarmee LLM's ontwerpen in Figma kunnen vertalen. Zodra de koppeling tot stand is gebracht, kun je je MCP-client vragen om toegang te krijgen tot een specifiek ontwerpknooppunt.

For a complete list of tools and examples, see Tools and Prompts.

First, follow the instructions to install the Figma MCP server for your preferred MCP client. We provide instructions for:

• Claude Code
• Codex door OpenAI
• Cursor
• VS-code

For other MCP clients, follow the instructions in your client's documentation for adding MCP servers. See the table under Connect the MCP server to your editor for links.

Example: Get design context

Getting design context and code from files is link-based. To get design context:

1. In Figma Design, select the layer you want to get design context for.
2. In the address bar of your browser, copy the link to a frame or layer in Figma.

3. In your MCP client, paste the URL and prompt your client to help you implement the design.

   

Example: Send UI to Figma

Sending the live UI of your web app or site to Figma is done through conversation with your MCP client:

1. Prompt your MCP client: "Start a local server for my app and capture the UI in a new Figma file."
2. Follow the steps your client provides. Your client will open a browser window for you, or give you a link to follow.
3. Use the capture toolbar to capture pages, elements, and states of your web app or site.
4. Let your client know when you're finished. Your client will give you a link to open the Figma file that was created.

Improving the MCP server output

For the best output, we recommend setting up rules to guide the agent. To get you started, we have some helpful example rules.