Cursor + Figma Workflow: Design System In, Components Out

It is a two-way loop between Figma and Cursor. Inbound, you paste a Figma file link into a prompt. The Figma MCPModel Context Protocol. A standard that lets an AI agent pull in context from outside the repo, like Jira tickets or internal docs. Press Enter for the full definition. reads the design system (tokens, typography, colors and variable definitions) and applies it to the code you are building. Outbound, you select a component you built in Cursor and publish it back to Figma as proper, layered design. Figma stays the source of truth, and Cursor is the fast place to prototype against it.

It is Figma's own pluginA Cursor marketplace package that bundles MCP servers and skills (sometimes sub-agents and hooks); one click installs all of it into your Cursor instance. Press Enter for the full definition. for Cursor. Its Cursor Marketplace listing says it was created by Figma and verified by Cursor, and describes it as a way to turn designs into code and push UI back to Figma. Install it from the marketplace, or search for Figma in the marketplace panel inside Cursor. A Cursor field engineer said in the workshop that the Figma team approached Cursor and built the skills for people who use Figma inside Cursor.

Three of the pluginA Cursor marketplace package that bundles MCP servers and skills (sometimes sub-agents and hooks); one click installs all of it into your Cursor instance. Press Enter for the full definition.'s skills map onto the round trip. figma-design-to-code turns a Figma design into code. figma-generate-design builds or updates a page or view in Figma from your code. figma-generate-library builds or updates a design system in Figma from a codebase, including variables, component libraries, theming and documented foundations.

Paste the Figma file link into your prompt and tell Cursor what to do with it.

In the workshop the prompt was roughly: "use the design system at this link to inform the design of my dashboard, make any relevant color and typography changes." The Figma MCPModel Context Protocol. A standard that lets an AI agent pull in context from outside the repo, like Jira tickets or internal docs. Press Enter for the full definition. then reads the tokens, typography, colors and variable definitions, takes screenshots of the file and applies all of that to your live code.

1. 1Open your design system in Figma and copy the file URL.
2. 2Paste it into the prompt, and ask Cursor to use the design system at that link and make the color and typography changes it implies.
3. 3Let the Figma MCPModel Context Protocol. A standard that lets an AI agent pull in context from outside the repo, like Jira tickets or internal docs. Press Enter for the full definition. read the tokens, type, colors and variables. It also takes screenshots of the file for visual context.
4. 4Open the running app with @browserA prompt invocation that runs your built app in a browser pane inside Cursor; the agent can then take control of it to click, scroll and test the UI itself. Press Enter for the full definition. and compare the rendered result with the source design.

Use a stronger model and give the agent persistent context. When output in the workshop drifted from the Figma file, with wrong spacing or invented icons, the field engineer's first fix was a more capable model. In that engineer's experience, stronger models stick closer to an exact spec. The suggested split was ComposerCursor's own fast coding model, tuned for the editor and priced well below frontier models; the recommended day-to-day model for executing a plan. Press Enter for the full definition. for fast iteration and a model such as GPT-5.x when fidelity to the file matters most. GPT-5.x needs a plan that includes third-party models.

The durable fix is a skill. A skill is a SKILL.md Markdown file, in a folder of its own, that tells the agent how to do a task. It can reference other files. The workshop noted that Cursor supports a design.md file, but advised wrapping that file in a skill so the agent sees and uses it.

A design skill can say: on every change, check the Figma design system referenced here and adhere to it. After any design change, open the browser and test the result.

Build in the Agents WindowCursor's surface listing your agent runs; open a run to read its diff and search transcripts from the command palette. Press Enter for the full definition., with your app running in its built-in browser. Mention @browserA prompt invocation that runs your built app in a browser pane inside Cursor; the agent can then take control of it to click, scroll and test the UI itself. Press Enter for the full definition. in a prompt and ask the agent to open the app, and it runs in a pane inside the window.

Design ModeA way to point at an element in Cursor's built-in browser and change it directly, instead of describing it in words. Press Enter for the full definition. lives in that browser. Click Annotate in the browser toolbar to turn it on. Older versions show a pen icon labeled Design Mode instead.

Click any element to select it and open a note. Describe the change in plain language, such as "make this font three times bigger" or "use muted chart colors." The note sends the agent your text, the element's details (tag, classes, selector, size and key computed styles) and a cropped screenshot. Click Send note, and if your dev server hot reloads, the change appears in the running app when the agent finishes.

To change several elements together, hold Shift and click them into the same note. To collect a round of notes first, turn on Batch edits, and one Send delivers them all as a single message. Cursor finds the code behind each element, so you don't hunt for the div and edit the CSS by hand.

Yes, the agent can drive the same browser pane it renders into. Ask it to take control and test an interaction, such as "make sure the category slider works." Cursor then scrolls, clicks and moves the slider to verify the behavior. By default, each browser action waits for your approval. The field engineer said this in-browser agent QA is how a lot of people at Cursor check their own work.

Get the rendered component into the chat, then ask Cursor to publish it to Figma. In Design ModeA way to point at an element in Cursor's built-in browser and change it directly, instead of describing it in words. Press Enter for the full definition., click the component to open its note, and press ⌘+L to put the note in the chat input.

Paste the target Figma file link with your request so Cursor knows where to put it. If you leave the link out, it will usually ask.

The workshop's component came back in Figma with the same colors, fonts, width and size, split into proper layers. Components published back from Cursor showed up in purple, and even fairly complex pieces came across with their layers intact.

Push it back because a Figma file is easy to share and work on together. You can prototype freely in Cursor, then hand colleagues a real Figma artifact for feedback. They see exactly which colors and fonts you used, and they can build on it.

Treat the Figma file as the spec. According to the workshop, designers at Cursor keep brand colors and typography in Figma and prototype freely in Cursor with those design systems as guidelines. Anything that needs collaboration goes back to Figma, where engineers pick it up and build from the file. Designers and PMs align earlier, in a shared plan or PRDProduct Requirements Document. The spec describing what to build, for whom and why, before implementation starts. Increasingly the artifact you hand an AI agent as the source of truth for a feature. Press Enter for the full definition., and a plan written in Cursor can serve as that paper trail.

Ask in plain English. The workshop recommended Git for versioning prototypes, and you don't need to learn any commands, because the agent runs them for you. For example, say "save this version of my codebase," or "push what I have to a branch so I can get back to it later." If you are used to Figma's built-in version history, Git does the same job for the part of your work that now lives in code.