LiveDesign

by Anis

Figma to Tailwind

FreeFigmaDev Mode

Installs

253

Likes

Users

3,761

Views

2,278

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 hello@livedesign.app.

by Steve Sewell

Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.

by Anima

Anima - AI Design to code, Vibe code, Vibe design

by Unfold

Skew any layer or group with all layers preserved to edit.

by Zeplin Crew

Design tools are for designing. Zeplin is for clear, structured design delivery.