ion design

Instantly turn Figma into React code

158 followers

Instantly turn Figma into React code

158 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

Samraaj Bath

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

1yr ago

Vlad Gidea

Conferize

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

1yr ago

Samraaj Bath

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

1yr ago

Vlad Gidea

Conferize

@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

1yr ago

Samraaj Bath

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

1yr ago