Codify - Figma to Code - Vue, React, Angular, Html, Tailwind, Json, Css
Map your front-end components and generate development-ready code
Plugin Preview
About this plugin
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:
- [NEW] We have fully mapped the Ant Design component library to the Codify plugin. By using our optimized new version of the Ant Design UIKit, you can generate code more effortlessly, without needing to spend time on configuration.
- [NEW] The Layer Tags panel has been added, allowing you to intuitively add custom styles and styles to be ignored by the plugin through the UI interface. After setting theLayer tags, you can click "Generate" to view the changes in the generated code.
🚀 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:
🙈 Privacy Notice:
Codify is a fast code generation plugin that can instantly convert the nodes you have selected into development-ready code. The reason it can do this is that we have placed both the Figma layer parsing and the renderer on the plugin side, so it all runs on your local device. Access to the network is only for the purpose of obtaining the user's subscription permissions and configuration files.It does not read or store any of your Figma information.
💬 For any issues encountered during use, please comment here, or join our community on Discord. I would love to help you.
Plugin Details
Version | 24 |
---|---|
Created | April 5, 2024 |
Last Updated | February 21, 2025 |
Category | Software development |
Creator | Leo |
Stats | 888 installs, 154 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:index.html
- main:code.js
- Document Access:dynamic-page
- Network Access:
The codify plugin needs to access the network and CDN to obtain the corresponding code generation service.
- Editor Types:figma
- Allowed Domains:
- *
- http://localhost/apiDev
- https://codify.fun/apiDev
More Like This
Discover other plugins in the Software development category.