Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Utopia, a visual design tool for React, with code as the source of truth

utopia.app

Post reply on HN
Print view View original

151–160 of 175 posts

Re: Utopia, a visual design tool for React, with code as the source of truth

#151

Post by maltenuhn »

runeks wrote: post #99
tmp_anon_22 wrote: post #22

Wouldn't this be better as a VS code plugin versus a web-based tool?

> Wouldn't this be better as a VS code plugin […] I think it is: https://github.com/concrete-utopia/utopia#build-editor-vscod...

(founder here) we do have a vscode plugin (that handles the "follow me" side of "I click on something in the design" as well as triggering updates on the canvas, but it's not a VScode plugin _of_ Utopia. The monetisation isn't the big issue, it's more around performance management (and candidly also the internal dev cycle). We don't believe single-player use should be monetised anyway, that just creates the wrong incentives for us.

Re: Utopia, a visual design tool for React, with code as the source of truth

#152

Post by maltenuhn »

leemcd56 wrote: post #75

So, say I were to attempt to swap out React for Vue 3, how difficult would it be? How tightly coupled is React?

At the moment, it's coupled but not tightly so: we rely on the TS compiler to do the heavy lifting re: mapping design to code. The code that does that is of course React-specific, and we make somewhat implicit assumptions in other places. We do want to make sure we support React well before we expand out to other systems, but if you're technically minded and want to help explore this, would love to talk more!

Re: Utopia, a visual design tool for React, with code as the source of truth

#153

Post by maltenuhn »

ablekh wrote: post #62

Pretty cool, congratulations. Any plans to support Vue in the future?

We've had a lot of requests for Vue. It's not going to be a walk in the park, and we want to make sure we support React well before we add more surface area. But we're not super tightly coupled to React, so (hello, Dunning-Kruger) it shouldn't be impossible! If you're technically minded & want to have a chat about helping us explore that, would love to chat more!

Re: Utopia, a visual design tool for React, with code as the source of truth

#154

Post by maltenuhn »

enahs-sf wrote: post #36

I love that it feels somewhere between figma and xcode. Very approachable UI. super cool tool.

Thank you. All too often we found ourselves having to pick "Do I design this in a design tool or do I just prototype in a JS playground" - all the while looking somewhat jealously at Xcode, Unity etc.

Re: Utopia, a visual design tool for React, with code as the source of truth

#155

Post by maltenuhn »

vittore wrote: post #79

So they invented react-aware FrontPage ? =)

Hey, we didn't invent it, we just discovered it ;) Nah, so it's a "kind of". Philosophically, we're much more code-based in our thinking, and have allergic reactions to unnecessary code changes. The design tool doesn't prescribe your styles, but follows what's there and lets you choose. And it's built from the ground up for multi-file projects with different components.

Sometimes just the "I click on something, it opens in the code editor" is a huge time saver compared to "hunt for the element in devtools, search in VSCode for what file that component / instance lives in"

Re: Utopia, a visual design tool for React, with code as the source of truth

#156

Post by maltenuhn »

phreack wrote: post #90

Damn, I'd been meaning to build exactly this for ages but never got around to it. It's always felt like a key missing piece, particularly after working with tools like Android's preview tab. Major kudos to the team!

Thanks, so had we! It definitely wasn't a "just a few months" thing :) Editors have demanding UX, performance is hard etc. Inspiration definitely came from things like Unity, and native devtools (esp SwiftUI that gave us conviction two-way editing "could be done"). If you're interested in what we're doing and have ideas (or even code) to contribute - it's an open source MIT-licensed project. Would love to chat and learn!

Re: Utopia, a visual design tool for React, with code as the source of truth

#157

Post by maltenuhn »

kaladin_1 wrote: post #112

Nice! I especially like that one can easily view and edit the code generated. How long did it take you to arrive at this version?

Thank you for the kind words! From the germ of the "code is source of truth, code editor and design tool are just lenses to edit it" to where we are today, about 2 years with a small team. A lot of it went into "table stakes" (VSCode-in-the-browser, multifile, npm imports, console, performance, real-time updates). The design tool side has had a lot of experiments and prototypes, and is finally getting the love it deserves :)

Re: Utopia, a visual design tool for React, with code as the source of truth

#159

Post by jastuk »

zpj5005 wrote: post #70

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 mock…

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/

Re: Utopia, a visual design tool for React, with code as the source of truth

#160

Post by tppiotrowski »

throwaway-42808 wrote: post #72
tppiotrowski wrote: post #71

Earlier quoted context omitted.

This. From the video it’s hard to see if you can declare and reuse styles or if all styles are inline and need to be repeatedly applied to identical components. Either way, this is really awesome. Huge congrats on the release. It reminds me of one of my fav talks which I can’t find right now but it’s a guy that codes up a Mario clone while toggling back and forth between the game and the code and making changes in th…

Probably Bret Victor - "Inventing on Principle" (2012) - https://www.youtube.com/watch?v=PUv66718DII

This is it!!! Thank you.
Post reply on HN