Hello Figma-Community!
I have recently ,switched’’ to Figma from elementor. I have built a full website (one in 1440px and a mobile versin ~400px).
When i export it ( I have tried about 10-15 different export tools) it looks nothing like the site i built. Everythings all over the place.
Please help me ASAP, as my company relies on this…
Hi @Kilian4
Whom are you trying to export for? If this is for developers you may want to take a look at Dev Mode, which doesn’t need any export
If it’s something else, Figma has a built-in export function, select the frame you want to export and then on the right panel, at the bottom there’s an export section, simply click on the plus icon
You may change the format by clicking on PNG (png, jpg, svg or pdf)
Let me know if it helped
Hi mate,
thanks for the response.
No, I want to host it through google firebase…
The exports only cover pictures, but not code… I need code (html+css)
Thanks!
Oh, then you’ve got the wrong tool as Figma do not aim (currently) to be a code generator app.
I’m assuming there are plugin for that but I’m not using any so I cannot help on this matter. Sorry
wait, what other purpose could it have?
Do i have to replicate everything ive done in elementor now?
Well it’s a tool for designing interfaces and prototyping them. Figma also provide a way to make the designer-developers collaboration easier, but it’s more of an helper tool so they get accurate information about the design than a “copy/past code generator”
If you want a solution that let you design a website and then generate code for it to live on its own without the touch of a developer, i’m afraid Figma isn’t the tool for you
Hi @Kilian4, Thanks for writing in! While it may not be necessary to add on to @Haroll 's beautiful explanation, I just wanted to share some plugins with you that might be handy for exporting code (HTML, CSS, etc.) from our community.
- Anima - Figma to Code: React, HTML, Vue, CSS, Tailwind
- Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Feel free to explore community on your own!
If you have any questions about a plugin from the community, you can directly contact the plugin’s owner. On the plugin page, you can provide feedback in the comment section or send them a message using the support email listed on the right side of that page.
I hope this information offers additional insight! If anyone in our community has suggestions or input on this topic, please feel free to join!
Thanks,
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.