Figma API Data Uncovered: How Codigma Builds Development-Ready Code from Your Designs
This post has been written only by me, without generating any text, or comments with AI. I promise till the end I will be using my explanation and my words, but the content is all about generating UI Code with the help of AI.
I will be explaining, in the simplest way I can, how Codigma can generate code from Figma design and how it should be in your tool list if you are developing User Interfaces. (Angular, react js, react native, flutter or HTML-CSS for now)
Let's start!
This is the Figma design we have(you can duplicate the Figma project to be able to test by yourself):
This is how we structured/grouped/named the design
This is how it seems on the Figma API level (JSON data given by Figma already)
The first screenshot is from our Plugin (Codigma Figma), others I pasted over JSON Viewer to be able to show them in a more human-readable to understand.
Now, the design has been structured by the Design lint rules. Also auto-layout applied on it.
Because we are going to use our own LLM Server to generate production-ready code we also named the items/frames/layouts inside the design. It is where the trick works well.
Now, this is the generated HTML and CSS;
And this is the output;
Yes, I'm aware that it is not the best, also the images and icons have not been generated yet, but it can all be developed to make it better.
As I said, it is development-ready code. Not production ready. And, seriously it is ready to continue developing from there.
Also, there is Angular/Reactjs/React Native and Flutter support. Go and try by yourself at codigma.io, download the Figma plugin here.
Note: We are using deep seek 7b on our environment to be able to generate quality, development-ready code after we filtrate JSON data of Figma.
Wonders of how AI can help to generate UI code can follow on Twitter or the subreddit of codigma to keep updated.
