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.