Cursor Pro + Composer FTW! In your file, highlight the code-block where you want the element. "Ctrl + I" to open Composer. Paste your image screenshot, give it your details: make pill, rounded borders, shadow, use these placeholder images, use this color, etc. Much faster in Cursor. Easier to iterate & reiterate. No more copy-pasta.
Hey Everyone 🤠 Find the parts that interest you: 0:10 - Introduction to Figma to code strategy 2:26 - Creating product.js and product.css files 4:03 - Discussing Figma design specifications 6:11 - Importance of unstructured prompts 7:20 - New approaches in frontend development Chat with videos via Bumpups 🌲
Great as always Corbin. just thinking - Wouldn’t it be faster to do this in Cursor. No copy and pasting, hands free iteration. Just drop the image in and chat and it will iterate on the code. Match this with Cline and it’s computer use mode to take screenshots and you would not even need to feed it updates on the design it would self improve.
It’s such a dirty way to go about doing something. Maybe a one off if one can’t possibly get the actual figma file. Doing a screenshot? I don’t get why people don’t get it.
Or.. they are.. and just don't have the time lol I'm building a site for a University with the help of ai and dev team support, while I learn code on the side. I have time for this comment but not to make a video on the hours of time I spent last week choosing the stack of how you get from figma to production code on a complex system with a lot of technical constraints.
The problem with this method, which is the only method I’ve seen out there, is that designers use Figma because designers are designers, i.e. designers love everything to be pixel perfect. They see methods like this as a huge waste of time because if they’ve spent the time and passion making something look beautiful and pixel perfect, the last thing they want is for AI, or even a human developer, to come along and recreate its best guess of it. Having tried this method you spend longer arguing with AI trying to get it correct than what it would take to just code it normally, or more slowly using AI as guidance only. That’s just my opinion on my experience and this is nothing against your video, it’s the only real method that exists. If i was creating something right now it would be a tool that actually connects cursor ai to Figma to reproduce the designs exactly, and if using Figma is not possible then recreate an alternative to Figma that will work, it’s the only real thing that stops me making progress with my full tech stack and it’s so typical that, that happens at the start 😂
Cursor Pro + Composer FTW!
In your file, highlight the code-block where you want the element.
"Ctrl + I" to open Composer. Paste your image screenshot, give it your details: make pill, rounded borders, shadow, use these placeholder images, use this color, etc.
Much faster in Cursor. Easier to iterate & reiterate. No more copy-pasta.
Hey Everyone 🤠
Find the parts that interest you:
0:10 - Introduction to Figma to code strategy
2:26 - Creating product.js and product.css files
4:03 - Discussing Figma design specifications
6:11 - Importance of unstructured prompts
7:20 - New approaches in frontend development
Chat with videos via Bumpups 🌲
Wonder if Claude Sonnet will be better at rendering the exact design
Would you say this gives better results than the figma integration on v0?
Black box is also pretty good from what I have tested. But my abstract designs are a little too short or small when generated.
Just wondering giving a code snippets to o1 from dev mode in Figma wouldn’t give it even better results?
way better of course
Wouldn't something like Meng To's Figma plugin work better because it's analyzing the designs directly instead of interpreting from a flat screenshot?
AI for Figma-to-code is a game changer. Reusing components saves so much time. Corbin’s insights are spot on!
Why don't you just use v0? It's designed specifically for this use case.
Great as always Corbin. just thinking - Wouldn’t it be faster to do this in Cursor. No copy and pasting, hands free iteration. Just drop the image in and chat and it will iterate on the code. Match this with Cline and it’s computer use mode to take screenshots and you would not even need to feed it updates on the design it would self improve.
Let us know how that goes
看这个视频真的能让我放松心情，太好看了！
you never fail to bring us great value, thank you bro!
Hey brain roit use a Figma plugin called Figma to code
It’s such a dirty way to go about doing something. Maybe a one off if one can’t possibly get the actual figma file. Doing a screenshot? I don’t get why people don’t get it.
1. I wish you shared the entire process to get it perfect.
2. Why are you saving manually when you can turn on autosave? ❤❤❤❤
It's funny how everyone in the comments know a better method but no one is making a video about it 😂
Or.. they are.. and just don't have the time lol I'm building a site for a University with the help of ai and dev team support, while I learn code on the side. I have time for this comment but not to make a video on the hours of time I spent last week choosing the stack of how you get from figma to production code on a complex system with a lot of technical constraints.
top top top 👋👋👋👋👋👋👋👋👋
The problem with this method, which is the only method I’ve seen out there, is that designers use Figma because designers are designers, i.e. designers love everything to be pixel perfect.
They see methods like this as a huge waste of time because if they’ve spent the time and passion making something look beautiful and pixel perfect, the last thing they want is for AI, or even a human developer, to come along and recreate its best guess of it.
Having tried this method you spend longer arguing with AI trying to get it correct than what it would take to just code it normally, or more slowly using AI as guidance only.
That’s just my opinion on my experience and this is nothing against your video, it’s the only real method that exists.
If i was creating something right now it would be a tool that actually connects cursor ai to Figma to reproduce the designs exactly, and if using Figma is not possible then recreate an alternative to Figma that will work, it’s the only real thing that stops me making progress with my full tech stack and it’s so typical that, that happens at the start 😂