It will be called Frontender.
Front-end developers, myself included, spend too much time on simple translation work from designs to code. When automated, we can focus on more fun and meaningful work.
It figures out hierarchy and semantics.
Most "Figma to code" plugins simply parse static layer data. Frontender is smart, and looks at what a layer is most likely to represent. It understands that a white rectangle with light gray text should be coded as an <input/> element with a placeholder, if that is what is most likely in its context.
This means that Frontender works with any unstructured, messy Figma file. You do not need to use any layer nesting, constraints or autolayout to receive production-ready code.
It supports Tailwind and finds the closest values.
You can set different options for rendering HTML or JSX, and for using vanilla CSS or Tailwind. When you use Tailwind, you can either use exact values (e.g. text-[#52AC28]) or use the closest value (e.g. text-green-500) from the default color palette. You can also supply your own Tailwind config, so it generates something like text-success.
I keep a little todo board here, so you can see what the plugin can and cannot do yet:
Output vanilla CSS for non-Tailwind users
Changes some attributes (e.g. when using HTML, use class instead of className)
Recognize input and textarea
Solid color fills
Convert as background or text color depending on node type
Recognize when to use flexbox/grid instead of margin
Default Tailwind config
Find closest value in Tailwind config or use arbitrary value
Write <div /> instead of <div></div> for empty tags
Determine the correct order of components, even if layers are ordered wrong
Determine nesting without Figma layers being nested
Relative & absolute sizes
Figure out when to use absolute sizes and when to use full, auto etc.
Convert to <img /> with src set to "todo" and alt set to the layer name
Recognize more node types
Headings, selects, radio items, checkboxes, labels etc.
Nested layouts and more complex flexbox alignments
Use span if required
To output valid HTML, e.g. when converting children inside a <button />
Lines and arrows
Custom Tailwind config
Supply your own Tailwind config to find matching values
Text styling and lists
Bold/italic, underline/strike, bullet and numbered lists, etc.
Blurs and background blurs
Stars, polygons etc.
More than one fill, gradients
Get a reminder when Frontender launches.
I'll send you one email on launch day — nothing more.
Excited? Become a sponsor and get beta access.
Your support helps me build Frontender faster. You will get access to all beta versions (0.1 is scheduled for Feb 2023) and another 3 months of the final product. Thank you! 💛