FigGen - HTML + Tailwind Converter
Pixel perfect HTML/Tailwind for Figma Auto layout designs.Features:Utility first approach to generate pixel perfect markup for Figma designs.Built for future, uses flex and respects item spacingNo clumsy/frugal code with absolutely positioned elementsUses tailwind 3.0Export assets to zip with a clickHandles auto layout and its constraints (better design scalability for both designers and developers)Option to mark exportable assets in your preferred format from Figma itselfHandles most common usecases like borders, shadows, background colors, text styles, etc.Usage:Figma to code conversion is no rocket science, but for pixel perfect UI, we have to do some pre-processing to unfold the magic. Let’s look at some ways to achieve accurate results:Ensure that the frames have auto layout. It helps us to parse your Design better and also good for scaling designs in long term.Mark the image/icon layers for export in the desirable format. We will import the asset in the selected format for you.Avoid the use of Fixed Height/Width constraints as much as possible. Nearly same results can be achieved using ‘Fill container’/’Hug contents’ constraint.
Plugin Preview
About this plugin
Pixel perfect HTML/Tailwind for Figma Auto layout designs.Features:Utility first approach to generate pixel perfect markup for Figma designs.Built for future, uses flex and respects item spacingNo clumsy/frugal code with absolutely positioned elementsUses tailwind 3.0Export assets to zip with a clickHandles auto layout and its constraints (better design scalability for both designers and developers)Option to mark exportable assets in your preferred format from Figma itselfHandles most common usecases like borders, shadows, background colors, text styles, etc.Usage:Figma to code conversion is no rocket science, but for pixel perfect UI, we have to do some pre-processing to unfold the magic. Let’s look at some ways to achieve accurate results:Ensure that the frames have auto layout. It helps us to parse your Design better and also good for scaling designs in long term.Mark the image/icon layers for export in the desirable format. We will import the asset in the selected format for you.Avoid the use of Fixed Height/Width constraints as much as possible. Nearly same results can be achieved using ‘Fill container’/’Hug contents’ constraint.
Plugin Details
| Version | 3 |
|---|---|
| Created | January 18, 2022 |
| Last Updated | February 18, 2022 |
| Category | Software development |
| Creator | Ayush Singh |
| Stats | 1770 installs, 92 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Editor Types:figma
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.