Recently, I got the opportunity to explore Figma MCP to design. Here is beautiful post from Amish which explains how to connect. I will discuss common pitfalls and how to prompt for better design to code
1. Make sure that you are selecting the "Frame"
If you haven't selected the frame, your model finds it hard to know which one you are talking about
2. Granularize your prompt
Don't give it "Built me a whole UI from the selected frame" prompt. Better talk to it like talking to a colleague. Let's build a button first. check the colors. is it matching ? now, lets build animation for it. This works better in my opinion
3. Always make sure the screenshot from model matches the design.
Most of the time it misses out the details in the design. It can create decent outlook but don't be perfectionist in beginning itself
Note: It's not a magic bullet but an accelarator to ease off your design creation journey. *Try to adapt it not force it. *
Remember, its not a slave but a companion.
Happy exploring.
Top comments (0)