Back to Plugins
LiveDesign
Figma to Tailwind
code exporttailwindcssexport codehtmltailwindcode generatorvuecodegenreactcodefigma to codecode-generators
Plugin Preview
About this plugin
LiveDesign is your new favorite Figma-to-Code assistant.
It has the following features:
- 🎨 Generate code in HTML and your favorite frameworks, such as React and Vue.
- 💅 Support for TailwindCSS or Inline CSS, eliminating messy CSS classes and providing only production-ready code.
- 👀 Preview the generated code, ensuring it is perfect before handoff.
- 😮 Add state effects (hover, disable, focus…) and responsivity, doing all frontend work right in Figma: just add tailwind classes on the frame name.
- 🏞 Assets download: One-click to download all your design assets.
- 🔃 Github Sync: send your designs & assets to Github in a click. Any changes in Figma are live in your product!
LiveDesign is 100% free to use. Try LiveDesign today and speed up your frontend workflow!
⛔️ Important: to get the most out of the plugin, please use 'auto-layout' as much as possible!
If you love the plugin, please consider leaving a like on the Figma store, and don't hesitate to send me any feedback at [email protected].
Plugin Details
| Version | 52 |
|---|---|
| Created | April 27, 2023 |
| Last Updated | October 26, 2024 |
| Category | Software development |
| Creator | Anis |
| Stats | 221 installs, 42 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:./src/ui/ui.html
- main:src/plugin/plugin.js
- Editor Types:figma
- Allowed Domains:
- http://svgur.com
- https://6kbxs6snzg.execute-api.us-east-1.amazonaws.com
- https://api.github.com
- https://api.openai.com
- https://avatars.githubusercontent.com
- https://com5lhmpof3c54rqi22bkoffyy0imguj.lambda-url.us-east-1.on.aws
More Like This
Discover other plugins in the Software development category.