It's 2022. The most popular coding tool that UX designers use to bring their design to life is the clipboard and IDE on a developer's computer (but not until the next sprint, when the hand-off ticket has been picked up). At Henosia, we believe that code should bend to a UX designer's will in real time. Here's an example of how we're bringing this vision to life in a React project that uses the Braid Design System from Seek: We've recently added support for Material Design (MUI), and will be fully supporting the use of a team's own coded design system as well. It's currently in closed Alpha, but you can sign up for early access if you'd like to get your hands on it 😒imple_smile:

this looks so cool—do you have any public work about how you're analyzing the design systems to do the live bidirectional code editing or is that all secret sauce?

Thanks Garth 🙂 Editing that's both live and bidirectional is indeed the at the very core of our secret sauce, haha 😂 Will likely do a blog post on the core tech at a later time once we've gotten our footing in the market (competition is beyond intense in this space!). Will also share it here in that case. What I can share is this: • We're intentionally editing and executing TypeScript since that allows us to tap into existing code bases and ecosystems, including open source. We want teams to just be able to have designers jump into existing code bases. • Relatedly, we didn't invent a new programming language, which means that the work done by the TypeScript team in their language service and compiler APIs is available for us to build on • We're able to use two-way Git since any code reads/edits we do eventually end up as the same text files that your IDE manipulates today.

Off-topic: can y'all see a comment by me 10 hours ago on this thread? I just noticed it looks grey..

@Kartik Agaram Nope, I'm seeing Garth's reply as the first comment.

Here it is again, some overlap with Garth's comment:

The 2-way sync is great 👍🏼 How much information do you need to provide Henosia with about a new design system for it to make minimal changes?

(I'm not a designer or Javascript developer, so I have no idea what form design systems are provided in. Is it just React components in jsx or something like that?)

@Kartik Agaram Not much info needed. Beyond a bit of initial config to make component previews work on the canvas, we use the TypeScript source code to drive the editing you saw in the video. Specifically, we use the type information that TypeScript React components define as their props, e.g. a button will have its props defined as something like:

interface ButtonProps {
  label: string;
  size: 'small' | 'medium' | 'large'
}

We turn that information into the properties panel on the right, e.g. a size drop down with the three possible size values. React components are found by scanning the code base that's open in the editor, and we also identify components that are available through your

package.json

dependencies. For example, you can have your product code base open, and insert a button from your design system library that's in a linked NPM package.