HN Explorer

Ask HN: Do you want what I'm making?

9 points by simpli ↗ HN
At my last job I was often tasked with converting Figma designs to React code. This was tedious and inevitably I would miss some detail like a corner radius. The experience inspired me to work on my own design tool made for handing designs over to developers. Any part of the design can be exported/imported as a component, with props for dynamic content.

I can get carried away with the joy of programming, so I'm forcing myself to take a pause, record a WIP demo video, and ask, does anyone actually want this?

Demo: https://www.youtube.com/watch?v=s2a8r4FIX28

7 comments

[ 0.22 ms ] story [ 31.8 ms ] thread
codewithcheese
Hi, nice idea. I recently learnt about framer, haven't tried it yet. They have a publishing features. Have you used framer? How would you compare your work with theirs?

https://www.framer.com/

simpli
I've experimented with it! Framer is a site builder, users build and host complete web pages that exist in their system. This is great for landing pages, but in the words of their own website: 'If you are looking to build a "real app" that creates, updates and lists dynamic data, a simple React application might be a better option for you'[0].

My tool is for designing for "real apps". Designs are exported as components. They can be used in your own codebase as you see fit. For example, a designer for a flight booking website creates a new ticket design. The component is imported and the booking state data is passed to it: <DesignedTicket name={bookingName} departure={departureCode} arrival="LAX" />

[0] https://www.framer.com/learn/how-to-work-with-real-dynamic-d...

tikkun
I think if it works with complex figma designs, people will definitely want it. There's a separate question of how many people will pay for it, but I think some will. I've looked for similar products for converting figma to html/css even.

I've paid designers considerable amounts of money to get them to convert figma designs to webflow sites. I think the need to converting to react is similar. I'll note that the designer that I ended up going back to was the one who converted it in a way that was pixel perfect, and who made sure that some of the things missing from the figma (e.g. the hover state of certain buttons) looked good. What I'm trying to say is that if it can do it 80% well that's nice, and then it's a tool for designers to save time, if it can do it 100% well, then it's a tool for the end buyer and they wouldn't need to hire the person to convert it to react.

See also: https://www.figma.com/community/plugin/862039267149408972/Fi..., https://www.figma.com/blog/introducing-figma-to-react/, https://www.animaapp.com/blog/design-to-code/how-to-export-f... - and note that competition is a good sign, if there was no other approaches to it it probably would mean that it's not something users care about.

MH15
This seems really useful but I'm curious if you've given any thought to bidirectional workflows. A tool like this where the "killer feature" is exporting will be made by the export flow. Imagine if a user could import existing components into this tool, and if your app was integrated into the tooling already used for version control, etc.