Hacker News new | ask | show | jobs
by zpj5005 1834 days ago
Product designer here. I just spent the past few hours fine-tuning some visual details in our Figma component library. Now I need to file tickets for each change and work with our frontend developers to make sure the updated Figma details get properly mapped over to React.

I've grown numb to the friction, but I think this Utopia demo just reset my pain tolerance. Going back to manually mapping designs from Figma mocks to React components feels so dated. Almost like those PSD2HTML websites of the early 2000s.

The market absolutely needs a product like this.

2 comments

Utopia Founder here, also a designer. I agree, and for me this cuts both ways - seeing the changes I make in a real UI makes it so much faster to understand edge cases. Not to mention that I used to inevitably re-create production components in my designs. And sure, there are tools for that, but often they just add overhead.
Not sure if you're familiar with the movement, but standardized design tokens[1] seem like the future to me, depending on how well they are done. There's a list of major vendor like Adobe, Figma, etc. that are already onboard and the standardization process is progressing slowly but surely.

As I'm designing an app I don't want just click & drag visually to get some eye-balled spacing or size value. I want a design system with consistent spacing rules. Design tools enable this somewhat but the token standardization is pushing this much further. For example: there's already a hub/API for distributing design tokens to other services. I've seen a live demo of Specify[2] pushing token changes from Figma to a GitHub PR or creating JIRA task during a design token talk from a token w3c group member.

And it's not just about design -> code. If these tokens are standardized, design tools themselves (among others) could have a standardized way of transferring designs.

Heck, even Utopia could embrace this at some point to provide you an alternative view/workflow for your already standardized design tokens.

[1] https://www.designtokens.org/

[2] https://specifyapp.com/