Creating a UI with Figma to Cursor MCP Server
3 min read
Give Cursor, Windsurf, Cline, and other AI-powered coding tools access to your Figma files with this MCP Model Context Protocol server. When Cursor has access to Figma design data, it’s way better at one-shotting designs accurately than alternative approaches like pasting screenshots.
Try Figma MCP server
Video Timeline & Transcript
| Time | Content |
|---|---|
| 0:00 | Do a quick demo of this Figma MCP |
| 0:03 | Server and its connection into Cursor |
| 0:06 | We’re just going to implement this kind |
| 0:07 | Of simple design, it’s laid out |
| 0:11 | Nicely in Figma with a lot of Auto |
| 0:13 | Layouts and things like that which |
| 0:15 | The MCP server will pick up and |
| 0:20 | Hopefully be able to implement in mostly |
| 0:23 | One shot so I’m going to go ahead and in |
| 0:26 | Agent mode I’m just going to drop a link |
| 0:28 | To the Figma I copy a link directly to |
| 0:31 | The node by going into Figma and |
| 0:33 | Selecting the top level node that I want |
| 0:35 | To implement, copying as a link to the |
| 0:39 | Selection and then dropping it in here |
| 0:42 | So this looks pretty promising and so we |
| 0:44 | Started from truly a blank |
| 0:46 | Page and now we have this it’s not |
| 0:49 | Terrible |
| 0:52 | So I like it I’m going to go ahead and |
| 0:55 | Accept |
| 0:56 | Everything and I’m going to ask for a |
| 0:58 | Followup and so obviously this |
| 1:01 | Section is not what we want, it’s kind |
| 1:03 | Of neat it even pulled the right font |
| 1:05 | From Google but this section the process |
| 1:09 | Section itself is not super tight so |
| 1:11 | What we’re going to do is Click |
| 1:14 | Into the process section I’m going to go |
| 1:17 | Ahead and copy a link to that |
| 1:20 | Specifically and then I’m going to go |
| 1:22 | Ahead and start a new chat, it doesn’t |
| 1:24 | Seem to work super well if you try and |
| 1:27 | Give it a new Figma file inside the same |
| 1:31 | Chat so I’m just going to go ahead and |
| 1:32 | Say update the process |
| 1:40 | Section all right so we’ll save that and |
| 1:43 | Refresh okay so it’s not quite working I |
| 1:46 | Think the issue should be relatively |
| 1:49 | Straightforward to resolve but I |
| 1:53 | Think at this point I would probably |
| 1:54 | Step in and do things manually but |
| 1:57 | Anyway kind of helpful |
💡 Key Tips:
- Start a new chat session when working with a new Figma file
- Copy specific node links for more precise updates
- Manual adjustments might be needed in some cases for optimal results