What is it and why should I use it?

MCP Stands for "Model Context Protocol". It's essentially local server that allows AI models to talk directly to other applications. There are various MCPs out there for many different purposes, but today we'll be looking at an early MCP for Figma.

Instead of having to describe your designs, or share messy screenshots with AI, this tool will allow your editor to reach directly into Figma and pull out all of the associated data about your design.

This yields much better, one-to-one design conversions to code.

How-To Guide

This guide will walk you through using Figma Context MCP with Cursor and Figma.

Start With Figma

On your Figma home screen, click your name in the top left and enter the Settings menu.
Change to the "Security" tab, and scroll down to Personal Access Tokens
Generate a new token, setting the expiration to whatever you feel comfortable with. The default scopes should be fine.
Copy that token string down somewhere.

Making MCP easy

To run the MCP server, you'll need to hit a command that includes your Figma token every time. To make this less of a chore, we can set up a terminal alias shortcut.

In the cursor editor, open the command pallet (cmd+shift+p) and run:
```
Shell Command: Install 'cursor' command
```
Now, in the terminal, run:
```
cursor ~/.zshrc
```

In the file that opens, add the following, making sure to add your Figma token

alias figma-mcp="npx figma-developer-mcp --figma-api-key=YOUR-FIGMA-TOKEN-HERE"

Save & close the file, and then run
```
source ~/.zshrc
```
Congrats! You can now just type "figma-mcp" in your terminal to run this. Go ahead and do that now.

Cursor

We're almost there now! Go to the "MCP" section of your cursor settings and add a new server.
Enter a name, choose "sse" for the type, and place your server URL that terminal gives you. It should be something like "http://localhost:3333/sse"

Try it out

You should now be able to right click any frame in your public Figma documents, and click "Copy link to Selection". Then, you can paste the link into Cursor's chat window. Cursor can gather information about your design, or use it to start coding it out.

Final Thoughts & Caveats

Try adding a "cursor.rules.md" file to your project to give cursor specifics on how you want to handle Figma conversions.
The MCP we're using here is new and still working out some bugs. You may find some vector assets (SVGs) don't import correctly yet, (at least at the time of this writing).

Figma to Code with MCP