Prototypes

One of the latest added features to be supported by Figma MCP is Figma Make files. You can reuse your prototypes and use them as context to build your actual product. This is even more powerful as you've skipped from static designs directly to something interactive, bringing better context to your AI agent.

Design to prototype

To bring designs to life, you can either prototype it directly in a code editor or by using Figma Make. For this guide, we will focus on Figma Make. Here are some tips to make your prototypes great:

Clean and well structured design

To improve the results of Figma Make you can apply all tips from the “Prepare your design” section. The more well structured your design files are, the better the results will be.

Link a library

When you go to your library publish options, you will see a banner letting you extract the styles for Figma Make. This might take a few minutes, but you only have to do it once. After it’s done, you can select that library in Figma Make, and it will create a Styles file that will contain all your variables and styles for consistency in the results.

Attach a frame

You can start from a blank canvas with just a prompt, but you can also copy and paste a frame from your design file to give context.

Update the Guidelines

Each Make prototype comes with a Guidelines.md document. Here you can describe different rules like how to use your design system or specific guidelines that might make it easier for you to understand the AI better, for example “Before making changes, always explain it to me with as little technical jargon as possible”. What’s great, you could create a shared document with the actual code base to already have similar results both in Make and Code.

Be descriptive

If you expect something to happen, put it in your prompt. Don’t just assume that the AI will know what to do based on just a design.

Use the visual edit tools or code files

Instead of prompting everything (which might cost quite some tokens), try to first fix it with the visual edit tools where you can change spacing, typography, colors, … And if you know how to write some code, you can also dig into the code to make small changes.

Prototype to code

Now that you’ve created a Figma Make prototype, you can inspect the code and recreate it in your own code base. But with Figma MCP, you can also use Make prototypes as context in your prompt.

This is even better than using a design, because now Figma MCP has access to actual code that you’ve already refined in a prototype instead of just using layer info and screenshots.

To use a Make prototype, copy the Share link (not the published link) and paste it in your prompt with what you want to achieve. This can be:

Implement this component with the same behaviours as this prototype.
Use the same animation timing for opening the modal