Codify is a Figma plugin that can convert design files into various code formats, such as React, Vue, HTML, and CSS.
This is a Figma plugin that I put a lot of effort into developing.
I created it because it was needed for my work. The team I’m on uses Vue components library to build the business system. I had tried using many excellent Figma to HTML plugins from the community before, but they all generated Vue or React component code, which was thoughtful but unfortunately our team doesn’t use that code.
So I decided to develop my own Figma to Code plugin that can map component libraries. This process took nearly 200 days, and then it has been applied in the team’s production environment until now, and it has greatly improved our work efficiency.
For this, I spent another 5 months rewriting the controllable API and code generation for various front-end frameworks. This way, it can meet the needs and development standards of every enterprise and team.
Now I’m excited to publish it to the community, hoping it can be helpful for everyone.
Through simple configuration, Codify can generate the component library code and CSS styles used in your project. Even if you don’t want to do this, Codify can still generate more beautiful Tailwind CSS code for you.
🏵️ Update:
Now you can use
$class:{class name}to set your layer names, in order to get custom class names. like adding breakpoints for screen sizes. I’m still considering a more convenient interaction method.
We have provided a new icon export method. This allows the icons you export to respond to the size of their parent element. It also allows you to remove the original color of the icon, so that it can be controlled by the CSS.
🚀 Features:
- Mapping Component libraries. Instead of generating.
- Mapping Class name. You can define class names like:
"tw-". - Generate cleaner component code. You can open the Playground file to inspect the component examples I provide.
- One-click export of CSS utilities. We don’t presumptuously generate redundant CSS styles for every codegen. So, if your project doesn’t use Tailwind or similar CSS utility libraries, we recommend you create your own CSS utility classes. That’s why we’ve provided a one-click export.
- Shared with team members. Ensuring consistent code generation.
🔗 Related:
