# How to use cursor ai and figma in the best way possible? **URL:** \ **Category:** Discussions\ **Created:** [August 31, 2024, 6:44am UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985 "2024-08-31T06:44:49Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![anon-10470271](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/anon-10470271/32/3821_2.png) [@anon-10470271](https://forum.cursor.com/u/anon-10470271)\ **Post date:** [August 31, 2024, 6:44am UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/1 "2024-08-31T06:44:49Z")
as the title suggests please share some tips or extensions that will be useful. example say I have screens designed in figma how to integrate it with cursor so that cursor has context to generate code in that manner. ---
**Author:** ![Haimonline](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/haimonline/32/6325_2.png) [@Haimonline](https://forum.cursor.com/u/Haimonline)\ **Post date:** [September 25, 2024, 8:57pm UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/2 "2024-09-25T20:57:18Z")
Have you tried the Frontier extension? It allows you to generate code from a Figma link that uses components from your design system. After that, you can refine and improve the code with cursor. ---
**Author:** ![deanrie](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/deanrie/32/1263_2.png) [@deanrie](https://forum.cursor.com/u/deanrie)\ **Post date:** [September 26, 2024, 4:38am UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/3 "2024-09-26T04:38:57Z")
Hi @anon-10470271 There’s an official plugin for Figma here: > **[Figma for VS Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)** > > Extension for Visual Studio Code - Bring Figma into the text editor. Inspect designs, receive notifications, and get code suggestions. also, check out this video if you’re interested: [![](https://us1.discourse-cdn.com/cursor1/original/2X/a/a78a55fd204fddc12b6f24cdf40242516eaf40be.jpeg "Bringing Figma to developers in VS Code") ](https://www.youtube.com/watch?v=xAipdCNtvR8) ---
**Author:** ![deanrie](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/deanrie/32/1263_2.png) [@deanrie](https://forum.cursor.com/u/deanrie)\ **Post date:** [October 16, 2024, 5:27pm UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/4 "2024-10-16T17:27:55Z")
This might be interesting. [![](https://us1.discourse-cdn.com/cursor1/original/2X/1/11ac00a434b52062465f3cf3894612f39835bb7b.jpeg "Figma to Code in Seconds with Cursor") ](https://www.youtube.com/watch?v=SJKkHbjniJw) ---
**Author:** ![aibek-yegemberdin](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/aibek-yegemberdin/32/11477_2.png) [@aibek-yegemberdin](https://forum.cursor.com/u/aibek-yegemberdin)\ **Post date:** [November 11, 2024, 4:10pm UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/5 "2024-11-11T16:10:14Z")
I would checkout Superflex.ai for that (for full transparency, I am one of the co-founders). But we made a VSCode plugin that focuses on getting all the metadata from Figma and getting it to Cursor or VSCode with our extension. Happy coding! ---
**Author:** ![anon-10470271](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/anon-10470271/32/3821_2.png) [@anon-10470271](https://forum.cursor.com/u/anon-10470271)\ **Post date:** [November 29, 2024, 5:48am UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/6 "2024-11-29T05:48:52Z")
This is stupidly easy! thanks for the share ---
**Author:** ![shuowu](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/shuowu/32/20868_2.png) [@shuowu](https://forum.cursor.com/u/shuowu)\ **Post date:** [January 20, 2025, 5:50am UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/7 "2025-01-20T05:50:26Z")
This question had also been bothered me for a while, finally this weekend I got time to sit down and developed a vscode extension (with cursor). With that basically you just need to copy the selection url from figma, then add it to cursor with command palette, the extension will pull the serialized design from figma API and dump it to a file under “.cursormate/”. Then the generated file can be referred in cursor in your preferred approach. Hopefully the extension is helpful! VSCode extension can be found here: [CursorMate - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ByteYiLabsInc.cursormate) ---
**Author:** ![militen](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@militen](https://forum.cursor.com/u/militen)\ **Post date:** [January 21, 2025, 11:13am UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/8 "2025-01-21T11:13:08Z")
That’s an excellent solution! Your extension sounds like a fantastic tool for streamlining the Figma-to-Cursor workflow. I completely agree that this integration can be a game-changer. Additionally, focusing on SEO-Friendly Development, by ensuring structured code and designs, can significantly boost search engine rankings for projects ---
**Author:** ![militen](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@militen](https://forum.cursor.com/u/militen)\ **Post date:** [January 23, 2025, 11:16am UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/9 "2025-01-23T11:16:05Z")
It’s crucial to align design exports with semantic, accessible HTML to achieve this. For more insights, you might find this guide on transitioning from [figma to web application](https://www.thefrontendcompany.com/posts/figma-to-web-app) very helpful. Great work on the extension—keep it up! ---
**Author:** ![kregenrek](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/kregenrek/32/8614_2.png) [@kregenrek](https://forum.cursor.com/u/kregenrek)\ **Post date:** [February 7, 2025, 6:57pm UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/10 "2025-02-07T18:57:22Z")
Hi, not a step by step tutorial but I’ve written some threads about this: How to build Landingpages with AI > Design to Code > Testin various Export Plugins: > ---
**Author:** ![system](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/system/32/99069_2.png) [@system](https://forum.cursor.com/u/system)\ **Post date:** [December 19, 2025, 3:10pm UTC](https://forum.cursor.com/t/how-to-use-cursor-ai-and-figma-in-the-best-way-possible/13985/11 "2025-12-19T15:10:30Z")
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.