Frontender

A smart Figma plugin that writes front-end code 🪄

146 followers

A smart Figma plugin that writes front-end code 🪄

146 followers

Frontender adds a junior developer to your team, instantly. Select anything in Figma and let Frontender write clean, front-end code for you. Try it today with 15 free conversions a month.

Free Options

Launch tags:Design Tools•Development•Web Design

Launch Team

Universal-3 Pro by AssemblyAI — Speech-to-text that finally understands context

Speech-to-text that finally understands context

Promoted

Webbie UI

Maker

📌

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!

Report

3yr ago

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!

Report

3yr ago

Webbie UI

Maker

@nielsvr Interesting, writing this down on my ideas list! 😁

Report

3yr ago

ViewCoder

@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

Report

3yr ago

Webbie UI

Maker

@oe_zheng Thanks! What do you mean by secondary development? The idea for the plugin is to provide code as good as it can – sometimes it will be perfect and you can use it right away, other times (with bigger/more complex components) you might still need to do some final tweaks. You can copy the code from the plugin as a starting point and just change anything you'd like afterwards in your code editor if you want to 🙂

Report

3yr ago

ViewCoder

@jeroenrs OK, I understand it now Secondary development just like your words "you might still need to do some final tweaks." .

Report

3yr ago

SocialBu

Being a front-end developer, I must say that Jeroen's plugin is the greatest I've ever seen. It will help developers save a ton of time when creating online applications. I appreciate you creating such a fantastic plugin.

Report

3yr ago

Webbie UI

Maker

@mian_azan Thanks Mian! 😊

Report

3yr ago

This is awesome! Really excited to see more people exploring this space and allowing others to be as creative as possible. We have a similar tool on the go, https://www.producthunt.com/post..., so if you ever want to collaborate and share tooling, let's connect. Incredible work and the site is beautiful ❤️

Report

3yr ago

Material Tailwind PRO

Congratulations Jeroen it’s the best plugin that I’ve ever seen as a frontend developer that will save a lot of time when building web apps. Thanks for building such a great plugin ❤️🚀🙌🏻

Report

3yr ago

Liffery

Looking forwards to trying this in our stack! We've not found a design-to-code tool that works reliably yet!

Report

3yr ago

1 2