ion design

Instantly turn Figma into React code

159 followers

Instantly turn Figma into React code

159 followers

ion converts Figma designs into clean react code to free up your development cycles. ion is built on top of a design system (available today) and can understand your codebase to generate high quality code.

Payment Required

Launch tags:Design Tools•Developer Tools•Artificial Intelligence

Launch Team

AWS Activate CreditsCredits that fuel your startup’s next milestone

Promoted

ion design

Maker

📌

Hey Product Hunt 👋🏽. We’re so excited to launch ion design (YC W24) ⚡ We instantly turn Figma designs into clean React code. We're already speeding up businesses by ~40% ion saves thousands of hours by: - Learning structure from your codebase - Reusing your existing components - Automatic dark mode We accomplish this quality of codegen through our design system - 5,000+ Figma components built with love. It comes with everything you need to build beautiful products quickly, neatly, and consistently - and is available today for JUST $10 for the first 100 customers! Codegen is currently in private beta - sign up on our landing page for early access. Why? Well, we were simply tired of building products from scratch and seeing such a huge disconnect between what was designed and what hit production. Our team dedicated ourselves to filling the gap between frontend and design - starting with our design system. Excited? Head over to [ion.design](http://ion.design) to try out the design system! Please let me know what you think.

Report

2yr ago

As a designer & occasional front end developer this is just what I need! Hear me out, this is my current janky workflow: I use the figma file for the tailwindui components to rapidly prototype some screens, but then I made too many customisations so the React component provided by tailwindui isn't really the same anymore, so I need to re-write the component. I'm going from written code to figma design to custom design to needing to write improved components. :))) I knew it's not ideal, but I needed something I knew how to work with fast :)) don't @ me bro

Report

2yr ago

ion design

Maker

@gidea This actually sounds like an awesome workflow. It was super surprising for me to learn how common it is to use pre-built components like tailwindui and copy/paste them into repos. That's one of the things we're trying to solve with our design system. We map 1:1 with our react components and intend to just constantly push out new example screens

Report

2yr ago

@samraaj_bath1 Yes! But design is still an important layer, maybe not as much for detailed work in the case of rapid prototyping but for composability and just putting things together. The component based libraries without a way to tweak slightly the design are missing out on a huge chunk of the market, designers with devs skills that they rarely use. I'm glad to still see new products which bridge the divide between devs and designers.

Report

2yr ago

ion design

Maker

@gidea Ah yes - the ever sought-after design engineers. Those are unicorns - and for a good reason. Hopefully with modern tooling we'll be able to bridge many more designers into becoming design engineers

Report

2yr ago

Huge fan of the product, the fact that this is even possible at the fidelity and speed Ion does it is wild!

Report

2yr ago

ion design

Maker

@rachkat Appreciate you, Rachit!!!

Report

2yr ago

This is insane — have seen this in action myself and it saves so much time. Really gamechanging for UI dev! 🚀

Report

2yr ago

ion design

Maker

@will_wang77 Just trying to be the best tool on the market and change how front-end is done ✅

Report

2yr ago

ION is great and being able to convert these standard design files into Code will be a massive productivity driver.

Report

2yr ago

ion design

Maker

@usshabb That's what we hope to do! Design and frontend shouldn't be different roles.

Report

2yr ago

SnapPost

Love this design system. It's saving our team so much time from a design/product/eng work flow. I didn't have to build out dark mode—it comes baked in!

Report

2yr ago

ion design

Maker

@jeffrey_wong Thank you Jeff!

Report

2yr ago

Terra

Super cool and it works flawlessly! I thought it was another "Figma" -> "janky HTML / CSS" tool. But the code generated leverages tailwind and uses components 😍

Report

2yr ago

ion design

Maker

@jaafarrammal Thanks for being an early tester, Jaafar!

Report

2yr ago

1 2 3

Reviews