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.
6 Likes
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.
There’s an official plugin for Figma here:
also, check out this video if you’re interested:
2 Likes
This might be interesting.
5 Likes
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!
3 Likes
This is stupidly easy! thanks for the share
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
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
1 Like
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 very helpful. Great work on the extension—keep it up!