Does it make sense to build a Figma exporter to HTML?
We are developing a PoC that extracts a Figma design using the API, and generates a NextJS project.
The idea is to minimize the effort required to build the HTML/CSS/... Once you have the HTML, then you can integrate it with existing CMS / Backend platforms, ...
If you are interested in testing with your own design, we have published our early draft at https://airflows.com.
We will iterate to improve the tool.
Suggestions and constructive criticism welcome. :-)
Thank you very much!
It is the "tarpit idea": "It's an idea many people have tried and few if none have succeeded."
The Figma design is not directly translatable to HTML efficiently:
There have been many attempts to make a "visual designer" for HTML, but they are all dead projects. There is something that fundamentally prevents it from happening.
I'm not saying it is impossible, but it is not as simple as getting "get Figma component and translate it to div." Maybe with the help of AI like Git Copilot, it would be achievable.
But... ROI and profitability of it is an entirely different story
In fact, I agree with you that not all follow best practices in Figma, and just "plop" items..... In that case, it is impossible to get a "responsive" site.
Thank you very much for your comment. I really appreciate it. I find the concept of "tarpit idea" and "startup tarpits" very interesting. Thank you.
Instead of Figma -> HTML, did you consider going to the Figma -> Webflow route?
The front-end developers are VERY opinionated about what framework to use for HTML/CSS. You may not sell your system to them if you do not support: Vue, Svelte, Reacts, or whatever is hype this week.
No-Code users do not have this problem, and amount of "frameworks" to integrate with is significantly limited
I hadn't thought of that approach. Thank you for your feedback.
I guess Framer Sites already does that, they have a plugin for Figma developed which allows you to transform any design into a webpage.
Wow! https://www.framer.com/figma/
I didn't know this. Thank you very much for your feedback!
However, I have exported an example using Figma plugin, but "Framer HTML is optimized for machines (to render fast) and not really for humans (to build on), so we wouldn’t recommend Framer as a tool for exporting HTML." (https://www.framer.com/learn/how-to-export-your-site-to-html/). They don't recommend to use Framer as a tool for exporting HTML.
IMO your app doesn't go far enough yet since they still need technical knowledge to launch a site this way. If you included hosting and a simple CMS solution then it could be a full website solution for no-code users. That would potentially be a really good product. People do love Figma.
Thank you very much for your comment.
We are working in that part also (https://airflows.com/documentation/introduction). We are trying to close the gap existing between designers and developers. :-)
I would actually think about doing it the other way.
Can you sync a website to Figma?
Figma should be used to prototype quickly not be the source of the design system. It quickly becomes outdated as developers can't implement things perfectly.
I hadn't thought about that direction. I was thinking of going from design (Figma) to production (HTML), not in the opposite direction. As far as I know, Figma offers an API to export the model, but not to import. The only option that I have seen that can be used to import is through a file ".fig", whose format is not documented or through a sketch project. A sketch file could be generated and used to import in Figma. I don't know if there would be other alternatives. Anyway, the task of translating HTML to something else is even more complex because the HTML model is larger. IMHO. Thank you very much for your feedback. Your Versoly project is very interesting. Congratulations.
I have seen plugins that create shapes etc so I thought it might be possible to go further.
"sketch file " is pretty interesting.
Figma -> HTML seems much harder as making it responsive seems impossible.
Yes, but if you use auto-layout or other constraints, it is quite easy to obtain a reasonable "responsive" HTML. I this example (https://www.figma.com/file/2BIEmiDjAn4ObmG4nm1viu/airflows.com?node-id=194%3A5), we use auto-layout and the result is an resizable HTML page that you can see in https://airflows.com. This is a preliminary work, but it seems that it is "doable" at least. Thank again for your feedback. :-)