ion design

ion design

Instantly turn Figma into React code

161 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.
ion design gallery image
ion design gallery image
ion design gallery image
ion design gallery image
Payment Required
Launch Team
AppSignal
AppSignal
Built for dev teams, not Fortune 500s.
Promoted

What do you think? …

Samraaj Bath
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.
Vlad Gidea
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
Samraaj Bath
@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
Vlad Gidea
@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.
Samraaj Bath
@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
AndrΓ© J
This is unreal! When will it come for SwiftUI πŸ™
Samraaj Bath
@sentry_co We'll make our way to SwiftUI in the future :). Right now super focused on a web stack with Nextjs and Tailwindcss ⚑️
Girdharee Saran
Congratulations on the launch of ion design! @samraaj_bath1 This tool seems like a game-changer for developers, instantly converting Figma designs into clean React code, saving valuable development time. The integration with existing design systems and the ability to understand the codebase for generating high-quality code are impressive. How does ion handle complex design elements or interactions in Figma? Can it accurately translate these into React components without sacrificing functionality or design integrity? Excited to see how ion design transforms the development workflow and empowers teams to bring designs to life seamlessly!
Samraaj Bath
@10xmarketer Thank you very much! We generate complex design components (component sets, design systems, nested components, exposed props, etcc) out of the box. For things like tables and charts we use our design system components which can be overloaded I'm excited to see where this goes.
Jeffrey Wong
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!
Samraaj Bath
@jeffrey_wong Thank you Jeff!
Harrison Telyan
We recommend ION for any team that wants to move x10 faster when implementing their design. We run a guild of 50+ designers, and they love it as much as the eng team. Words can't describe how much gets shipped in such a short time. Samraaj, the founder, is incredibly responsive and energetic. He loves what he does and wants to help other founders get unblocked. 10/10 will continue to give this company our money.
Samraaj Bath
@harrison_telyan Thank you so much Harrison! I really appreciate the help and guidance you've given us <3
Harsh Jha
Awesome product @samraaj_bath1 ! Can't imagine the effort this would have taken. Best of luck to you guys!
Samraaj Bath
@harshjha0599 It was a LOT of work!
Harsh Jha
@samraaj_bath1 Definitely! Can see that :)
123
Next
Last