Get started with the Figma MCP server

The Figma MCP server brings Figma directly into your development workflow, giving AI agents access to the structured design context needed to generate accurate, design-informed code.

Agents can read from Figma files to extract components, variables, layout data, and other design details, enabling code generation that reflects how your UI is actually built and not just how it looks.

With new write capabilities, agents can now also create and update Figma designs directly. Generate components, variables, and full screens using your existing design system. Instead of producing flat visual outputs, agents build with real Figma primitives and reuse what already exists in your libraries.

Together, this enables a continuous workflow between code and canvas, where agents can move in both directions while keeping your design system as the source of truth.

To get started:

  1. Set up the Figma MCP server
  2. Start using the Figma MCP server
  3. Check out the Figma Community
  4. Create your own skills
  5. What’s next?

Set up the Figma MCP server

To set up the remote Figma MCP server, follow the steps for your client. Figma provides instructions for several common clients:

The instructions vary depending on the client. For instructions about installing skills for other clients, ask your client how to add a server or check your client’s documentation: Supported MCP clients

Start using the Figma MCP server

Dive in! Here are some example prompts to get you started:

  • "/figma-use can you help me create a new Figma design using my design system components? Place it in a new Figma file."
  • "Capture the UI of my app homepage as frames in <Figma file URL>." 
  • "Create a flowchart for the user authentication flow using the Figma MCP generate_diagram tool."

When you’re working with the remote Figma MCP server, a couple things are important to understand: tools and skills.

  • Tools are what enable your MCP client to take actions with Figma files. You can see the tools available and example prompts here.
  • Skills tell your MCP client how to effectively use tools. Using a skill will get you higher quality, more reliable results from the Figma MCP server.

Once you’ve set up the remote Figma MCP server, skills are the best way to get started prompting: Use skills with the Figma MCP server.

You can also learn more about the skills that Figma provides: Figma skills for MCP

Check out the Figma Community

The Figma Community features a growing library of skills that can enhance how you’re using the Figma MCP server. Take a look at the available skills to find good fits for your use cases: Skills in the Figma Community

Create your own skills

You can also create your own skills to teach your agent how your team works in Figma. Custom skills help you package repeatable workflows and get more consistent results from the Figma MCP server: Create skills for the Figma MCP server

What’s next?

Was this article helpful?

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Thank you for helping us improve Figma’s Help Center!