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 | 241 installs, 45 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.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.