Live data from Hacker News

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

utopia.app

71–80 of 175 posts

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

#71

This is really nice! Although I’d find it impractical to use, especially for existing projects, unless it also supported different CSS-in-JS libraries (e.g., Emotion, Styled Components), rather than inline styles with the `style` prop. These other libraries offer a great deal of more support, such as targeting children and pseudo-elements (e.g., :hover). Any plans/timeline on adding support for other React-in-CSS lib…

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 the game updates the source code. If anyone knows what I’m talking about please reply here.

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

#72

This is really nice! Although I’d find it impractical to use, especially for existing projects, unless it also supported different CSS-in-JS libraries (e.g., Emotion, Styled Components), rather than inline styles with the `style` prop. These other libraries offer a great deal of more support, such as targeting children and pseudo-elements (e.g., :hover). Any plans/timeline on adding support for other React-in-CSS lib…

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

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

#76

Like many others, I think this is super cool, and something that I think has been missing in the ecosystem for a long time. I feel like the thing that would really make this over-the-top powerful is deep integration with a component library, either a company's in-house one or an open-source library. It would allow for super fast UI prototyping that would also serve as scaffolding for the full-featured product.

This is ultimately one of our goals, to allow maintainers of those kinds of libraries to publish that kind of integration, or for us or even other users to provide it (thinking along similar lines to TypeScript type definition files)

Love what you're doing! Happy to hear you have component libraries in your plans. I'd love to see this integrated with storybook

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

#77

Earlier quoted context omitted.

Thank you! This is pretty much exactly the ethos behind Utopia - that there is ultimately some underlying thing that you want to make changes to, but you often want to be able to make those changes from different viewpoints (or in different contexts) depending on the types of changes you want to make. The React paradigm, especially with functional components, is absolutely right for this kind of a tool.

is this how Framer[1] works? They have a react UI interactions. How do you see it? [1]framer.com

Framer, at least when I last tried it, was more of a prototyping tool. You could generally only one-way import React components into Framer, and then you could use Framer to assemble new components, but not in a way that allowed round-tripping. It's very possible to import production components into design tools, it's rare when a design tool can output production components again.

Largely because production-ready visual layout tools themselves end up being canvases that are shortcuts only to those who know what controls they want to use and how other layout controls work - they speed up developers, or those technically-minded enough to learn and compose new layouts with the existing controls and markup, but they won't make it easier for someone to design a new production-ready component from scratch when they don't know existing programming patterns, layout controls such as CSS flexbox, etc.

In that regard, Figma, Framer, and even Facebook's Origami are less about creating production code and more about assisting designers and product folks with rapid prototyping. It's not meant to be production-ready. It's not a developer-friendly toolset because the programming is secondary. And that's fine. Less to learn that way, but not instantly ready-for-production either.

There is some overlap though, for tools like Dev Tools, like Utopia, that need to be learned first (or customized into something like a CMS) but can be very visual ways of programming. As pointed out earlier, Xcode Storyboards and SwiftUI are both visual tools which output production code. It's unclear if this will follow the same standards and patterns that production code demands (such as styles, state management/mapping, shared components, and re-use across projects) but this programmer-friendly model is much more the future of visual programming than previous designer-first tools would allow.

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

#80
post #79

So they invented react-aware FrontPage ? =)

Macromedia Dreamweaver :-) I have extremely fond memories of setting up an FTP access from cPanel (you all remember cPanel, right?), then syncing the website through Dreamweaver over FTP. It was awesome. Those days were the best I don't care what anyone says.
Post reply on HN