Frontender

Hi PH! I'm Jeroen, the creator of Frontender. Thanks for checking it out! 👋 As an indie developer, I'm spending quite a bit of time manually coding components I created in Figma. Even though there are multiple "Figma to code" plugins available, I didn't find their output very helpful. They seem to break often, produce overly complex code, don't support popular libraries like Tailwind, often depend on layer constraints and autolayout (i.e. don't work in unstructured/messy files), and don't feel very native to Figma (often requiring you to register and subscribe upfront). Room for improvement, I thought, so I started building something new. With Frontender, I'm hoping to simplify the process of converting Figma designs to clean front-end code, so you can work on things that are more fun. ☀️ 🪄 What is Frontender? Frontender is like a junior developer, disguised as a Figma plugin. Just search for the plugin in the Figma community – when opened, simply select any layer(s) in any design file, and Frontender will write clean front-end code for you. You can use classic HTML and CSS, but Frontender also has deep Tailwind support. 🐳 Tailwind support, you say? Yes! Frontender intelligently matches your layers to the available classes in Tailwind. For example, when selecting a random pink color, it will use the "bg-rose-400" class – if that is the closest match. In settings, you can also turn on arbitrary values so it produces a class with the exact color, like "bg-[#fb7283]". This works with colors, but also with any other Tailwind values. 🔎 How clean is the code? Frontender is still in beta, and works best (often perfectly) if you select a few layers at a time. That's not always the case for more complex layouts, but the response has been very positive so far! You can leave positive or negative feedback after every conversion, so we know what to improve. 💰 Can I use it for free? Yes! Frontender is free forever – 15 conversions per month are on me (the counter is reset on the 1st of every new month). You can optionally upgrade to a paid plan for additional features and unlimited conversions, starting at $10/month (and temporarily with a 30% discount during launch week!). 🗺️ What's next? I'm currently making Frontender more intelligent – later this month, it will be able to detect component types (so that when you design something that looks like an input field, it returns an input component instead of a div). You will also be able to personalize the output more, with a custom Tailwind config, CSS variables, and more. ❤️ Thank you for checking this out and giving Frontender a try. If you have any feedback or questions, please let me know – I'm available for AMA all day. Excited to hear what you think!

Very good Jeroen! After fiddling with it, are you planning to support seperate HTML and CSS or seperate HTML and SCSS? That would greatly enhance a lot of workflows I think!

@jeroenrs Congratulations to Frontender for creating a Figma plugin that writes clean front-end code for designers, making the design-to-development handoff process much smoother. A game-changing tool for designers looking to streamline their workflow. Well done! Q: How does Frontender ensure the accuracy and quality of the code generated by the plugin? What if I need secondary development? This is a common problem for most white-box code generation tools