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

Painting with Code: Introducing our new open source library React Sketch.app

airbnb.design

Post reply on HN
Print view View original

61–70 of 100 posts

Re: Painting with Code: Introducing our new open source library React Sketch.app

#61

Post by bostonvaulter2 »

jongold wrote: post #23
jordanlev wrote: post #21

Earlier quoted context omitted.

Ah, this makes sense (assuming this is what they're saying). So there would be one sketch file for the basic components that is generated from the React code, but the designers who design specific pages of the site (for example) would still design in sketch, but pull from the components of the one "read-only" (react-generated) sketch files. Very cool!

Exactly (and thanks to Andreas for explaining it better than me). We have a design systems team that creates & maintains the system (in collaboration with our product designers), resulting in read-only Sketch templates. when _designing with_ canonical components our product designers are using that template, so it's kind of the same workflow - we're just creating the read-only templates from code rather than by hand.

Would be fantastic to add a section to the blog post and project README with a quote like this

> the designers who design specific pages of the site (for example) would still design in sketch, but pull from the components of the one "read-only" (react-generated) sketch file

Maybe under a "why use this?" heading?

Re: Painting with Code: Introducing our new open source library React Sketch.app

#62

Post by mshenfield »

Basically, people:

• Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product

• The JavaScript widgets are are modified, extended, and changed. Maybe a line here, a color here. Designers now sometimes have component designs don’t quite match what they look like in the wild

• This tool now lets them re-create the Sketch file from the components as the look in the wild. That means when designers work on whole pages, made up of widgets, they’ll look exactly like they would in the wild.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#63

Post by theptip »

akdetrick wrote: post #34
jongold wrote: post #2

Hi HN! Super excited to open source this — I'm trying my best to bring design & engineering closer together at Airbnb (and in the world), this has been a super useful project. I'll be hanging out in this thread all day if you have any questions / want to flame me :)

To help clarify why this is a big deal, I'd like to share why I've been so excited about this project... [tl;dr] - This is the first tool I'm aware of that actually allows you to generate both API docs and design tools from the same source. Static documentation is a lie waiting to happen. Once docs are even slightly out of date, people lose trust and eventually abandon them. On the engineering side of the dev/design…

> This is the first tool I'm aware of that actually allows you to generate both API docs and design tools from the same source.

Where are your API docs coming from? When you say "the same source", is this because your frontend/backend code is sitting together in a mono-repo?

Not familiar with the AirBnB architecture so I'm interested to know how API docs are adjacent to this topic.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#64

Post by nimchimpsky »

dikaiosune wrote: post #22
thebouv wrote: post #11

So, to be clear, a month ago there was an announcement about an app called Sketch (renamed to Snack now apparently) that was a playground for React code, but people said it was a bad name choice because Sketch is already a ui/ux dev/design tool in this space. But this tool is related to that ui/ux version of Sketch (but with/for React), and not the mis-named Sketch (that was for React)? Naming is fun.

For anyone missing context, naming is hard. https://blog.expo.io/expo-sketch-expo-snack-a444f8dec72b

its not hard, just don't name a new design app after an already existing one.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#65

Post by hoodoof »

mshenfield wrote: post #62

Basically, people: • Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product • The JavaScript widgets are are modified, extended, and changed. Maybe a line here, a color here. Designers now sometimes have component designs don’t quite match what they look like in the wild • This tool now lets them re-create the Sketch file from the components as the look in the wil…

Often it takes a third party to succinctly describe a software technology.

The website doesn't explain it like this.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#66

Post by [deleted] »

mshenfield wrote: post #62

Basically, people: • Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product • The JavaScript widgets are are modified, extended, and changed. Maybe a line here, a color here. Designers now sometimes have component designs don’t quite match what they look like in the wild • This tool now lets them re-create the Sketch file from the components as the look in the wil…

[deleted]

Re: Painting with Code: Introducing our new open source library React Sketch.app

#68

Post by vladgur »

Jon was gracious enough to visit us at CollectiveHealth to describe their DLS processes as well as give us a glimpse of what was coming.

Design Systems and related tooling makes total sense at certain scale and I can definitely see both designer and developer efficiency gains from consistent building blocks that Design Systems provide. Jon I'm curious if this would still make sense if AirBnB weren't so invested in React and React Native.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#69

Post by bdickason »

jongold wrote: post #2

Hi HN! Super excited to open source this — I'm trying my best to bring design & engineering closer together at Airbnb (and in the world), this has been a super useful project. I'll be hanging out in this thread all day if you have any questions / want to flame me :)

This is super cool - I see designers struggle with this at every company and am a huge fan of tooling that make design/eng collaboration better.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#70

Post by zem »

mshenfield wrote: post #62

Basically, people: • Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product • The JavaScript widgets are are modified, extended, and changed. Maybe a line here, a color here. Designers now sometimes have component designs don’t quite match what they look like in the wild • This tool now lets them re-create the Sketch file from the components as the look in the wil…

to complete the explanation, sketch is a vector-based design tool that has an api for scriptable generation of components. this library lets you generate sketch widgets from react code; i presume that those widgets are then higher-level shapes stored as single entitles in sketch, so that when you update the react code, sketch files that use those components now use the updated versions.

also, from their faq, there is no two-way binding; they do not attempt to extract react code from sketch files. the idea is that the react code is the source of truth.

from a programmer's perspective, sketch is sort of like an exploratory repl where you can play with bits of code (widgets here), composing them into larger functions (sketches), and when you're satisfied with the design you edit your source file and reload the state of the repl so you can continue exploring.

Post reply on HN