Figma icon

I'm building a Figma plugin that writes production-ready code.

Jeroen Riemens

You can follow along on Twitter.

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.

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! 💛

Made with love by @jeroenmakes. Frontender is a product of Webbie, Wolvenplein 25, Utrecht, The Netherlands (registration 53931459).