Connect Figma once, then paste a frame link into Cursor. The agent reads the frame itself (layers, colours, sizes and spacing) instead of guessing from a picture, and builds it into your project.
Why a link beats a screenshot
A screenshot is pixels. The agent has to estimate that a gap is 24px or that a grey is #EEEEEE. A Figma link gives it the actual values from your file, so the first build is much closer to the design and you spend less time correcting it.
Connect Figma (once)
Open MCPs
In the Agents Window sidebar, click Customize, then the MCPs tab. Figma is listed as a plugin. If it is not there, click Browse Marketplace, find Figma and install it.
Authenticate
Next to figma, click Authenticate. Your browser opens a Figma page.
Allow access
Check it is the Figma account you want, then click Agree & Allow Access. When the page says Authorization complete, click Open Cursor.
Check it is connected
Back in Cursor, figma moves under Connected with its tools enabled.
Allowing access gives Cursor read and write access to your Figma account through this connection. You can disconnect any time: click figma in MCPs and choose Logout.
Build a frame
Copy the frame link
In Figma, right-click the frame and choose Copy link to selection. Keep frames small to start: one card, one section, one screen.
Paste it with a request
In the Agents Window, with your project selected, paste the link and say where it goes: "Build this Figma frame as a new section under the cards."
Let it work
The agent pulls the design from Figma, finds where it fits in your code, builds it and checks it in the browser. It may ask before running a browser action; click Run.
Review the result
Compare the browser with Figma. The chat lists the files it changed and what it matched.
Refine it
- Small visual fixes: use Design Mode (lesson 7). Select the element and describe the change.
- Mismatch with Figma: say what differs: "The buttons should be 48px, not 56px, as in the frame."
- Use your components: "Rebuild this with our Button component instead of new markup." A design-system rule (lesson 10) makes this the default.
No Figma? Use a screenshot
Paste or drag a screenshot into the prompt box and describe it: "Build this as a responsive section. Match the spacing and colours as closely as you can." It works, but expect a few more rounds of refining, because the agent is reading pixels instead of real values.
Name your Figma layers and use variables for colours and spacing. The agent reads those names, so "Card/Title" and a colour variable turn into clearer code than "Frame 412" and a loose hex value.
From frame to code
- You can connect Figma to Cursor
- You can build a frame from a Figma link
- You know how to refine the result
- You can fall back to a screenshot when there is no Figma file
Next, building interfaces with React and Tailwind.