Skip to main content
Fabiola González
Fabiola González
New Member
May 23, 2025 9:17 AM UTC
Question

Figma make - prompt to code error while rendering my frames

Hello, 

 

I’ve been playing with the new feature figma make, and when I upload a whole screen (frame) with a specific design, the redering comes out totally different and messes up the whole design. I’ve tried uploading a png instead of an image, and nothing, I’ve tried to “clean up” the frame and erase all the invisible elements of the frame, and nothing. Am I missing something? Is theres any way to make it work better? Any tips?

This topic has been closed for replies.

4 replies

Gayani_S
Figmate
Gayani_S
Community Support
May 23, 2025 3:48 PM UTC

Hey ​@Fabiola González, thanks for reaching out - It’s great to hear you’re exploring Figma Make!

To help get to the bottom of this, could you let me know what error message your seeing on your end? A screen recording would also be super helpful so I can better understand what’s happening and share it with the team to investigate further.

 

Thank you for your help! 

Fabiola González
Fabiola GonzálezAuthor
New Member
May 26, 2025 12:38 PM UTC

Hello, 

Thank you for your renpose… the thing is there is no error message, the thing that is happening is that when I upload a design, the rendering comes out totally different .. not just a few styles or colors .. if there’s any tips or advices of how the design must be or the frame must be built so the IA reads it better? 

Gayani_S
Figmate
Gayani_S
Community Support
Jun 4, 2025 2:41 PM UTC

Hey ​@Fabiola González, I’ve reached out to the teams internally. They need a confirmation if the design you’re talking about is a figma frame? If that’s your case and it looks different, a few things could be happening:

  1. Name your layers semantically, i.e, "CTA button" instead of "Layer 234"
  2. Use autolayout — this is usually the verdict
  3. If the dimensions of your generation look weird, tell the model. "Keep this to be mobile-sized", etc.
  4. If you’re using a custom font (i.e, not a Google font,) you won't see it in the preview — we can't use custom fonts yet. 

The team also asked if you’d be comfortable sharing a screenshot/link to the original design and the Make file so they can debug further. 

Arnold_Lopez1
Arnold_Lopez1
New Member
Jul 15, 2025 4:31 PM UTC

​@Fabiola González ​@Gayani_S 
I would like to add that you can use custom fonts in Figma Make, (not in Sites). I’ve identified in code that it is naming my font as ‘fontname:fontweight’.

Using the exact web font name installed on your local machine might work. Note, I also have the font installed on our web server. Not sure if it’s pulling it from there to make it work. Back to my fix:

Example, AI is adding a colon, so I prompt AI with the following:
Aeonik:Regular to be Aeonik-Regular


In addition to ​@Gayani_S comment, you could try prompting AI with:
* Match styles, layout, and design as close as possible as my import

Terms & ConditionsAccessibility statement