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

21–30 of 100 posts

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

#21

Post by jordanlev »

andreasklinger wrote: post #6
jordanlev wrote: post #5

Earlier quoted context omitted.

Sounds intriguing, but I'm also a little confused about the flow of "code that generates sketch files"... what is the purpose of Sketch in all this? I would think programs like Sketch are useful in general because they give designers a nice way to design things without adding the extra layers of abstraction that code brings (i.e. they can just draw things with a mouse instead of writing instructions that tell the com…

i assume they want to have only one "place of truth" which should be code. The designers can generate the skethfile of components and then use them in their layouts (eg usecase core components) also it opens up things like "using real (suboptimal) data" or cross-project-wide refactoring of design, etc

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!

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

#22

Post by dikaiosune »

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

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

#23

Post by jongold »

jordanlev wrote: post #21
andreasklinger wrote: post #6

Earlier quoted context omitted.

i assume they want to have only one "place of truth" which should be code. The designers can generate the skethfile of components and then use them in their layouts (eg usecase core components) also it opens up things like "using real (suboptimal) data" or cross-project-wide refactoring of design, etc

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.

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

#24

Post by swanson »

jongold wrote: post #14
FanaHOVA wrote: post #10

This will come really handy, thank you. I'm trying to build a better infrastructure at work; do you have anything written up about how you work at Airbnb? Your "bring design & engineering closer together" mission sounds like what I'm trying to accomplish, would like to read/chat more about it.

We haven't written nearly as much as we'd like, but here are some you might like: Design Ops (the org that contains my team - Design Tools) - http://airbnb.design/designops-airbnb/ The Way We Build (head of design @alexoid talking about our process) - http://airbnb.design/the-way-we-build/ Building a Visual Language (on our design system) http://airbnb.design/building-a-visual-language/

This is great, thanks Jon. I've been struggling to find good workflows for integrating design and engineering (especially when there is a disparity in maturity of the processes for each party).

I think there is definitely a gap in the "literature" for this topic and will be eager to follow any other progress you can share.

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

#25

Post by salimmadjd »

pavlov wrote: post #18
jordanlev wrote: post #5

Earlier quoted context omitted.

Sounds intriguing, but I'm also a little confused about the flow of "code that generates sketch files"... what is the purpose of Sketch in all this? I would think programs like Sketch are useful in general because they give designers a nice way to design things without adding the extra layers of abstraction that code brings (i.e. they can just draw things with a mouse instead of writing instructions that tell the com…

To go the other way -- generating React code from Sketch -- you can use React Studio: https://reactstudio.com It has a Sketch plugin that does a rather competent job of converting Sketch layers/groups into components. (For example, you can prefix a Sketch group with "c:", and React Studio will interpret it as a component.) Here is a live video demonstrating the Sketch -> React Studio -> React code workflow: https://w…

Interesting. But, the monthly Adobe-esque subscription fee is a turn off.

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

#26

Post by lrichardson »

jordanlev wrote: post #5
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 :)

Sounds intriguing, but I'm also a little confused about the flow of "code that generates sketch files"... what is the purpose of Sketch in all this? I would think programs like Sketch are useful in general because they give designers a nice way to design things without adding the extra layers of abstraction that code brings (i.e. they can just draw things with a mouse instead of writing instructions that tell the com…

Hello, I work at Airbnb and helped Jon with this project a bit.

A lot of people when they first learn about this project have a hard time understanding how it would be useful - so you're not alone!

I tweeted ([0]) about this briefly and thought I'd copy here for the benefit of readers in this thread:

> the wild thing about react-sketchapp is that we can now bootstrap designs with the actual code that powers the product we are designing

> it took me a little while to realize the paradigm shift. we normally think of the code / implementation as the end of the process

> this allows us to use production code not only for our production clients, but also for starting the next iteration

> react being decoupled from the underlying UI implementation unlocks a lot of possibilities. this is just one.

> we are starting to view our react components for our design language as not just an implementation, but as the specification itself

  [0]: https://twitter.com/intelligibabble/status/856941689029640192

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

#27

Post by pavlov »

salimmadjd wrote: post #25
pavlov wrote: post #18

Earlier quoted context omitted.

To go the other way -- generating React code from Sketch -- you can use React Studio: https://reactstudio.com It has a Sketch plugin that does a rather competent job of converting Sketch layers/groups into components. (For example, you can prefix a Sketch group with "c:", and React Studio will interpret it as a component.) Here is a live video demonstrating the Sketch -> React Studio -> React code workflow: https://w…

Interesting. But, the monthly Adobe-esque subscription fee is a turn off.

That is of course something that can change. What kind of pricing would you prefer?

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

#28

Post by accountyaccount »

jordanlev wrote: post #15
jongold wrote: post #7

Earlier quoted context omitted.

"why not just look at the rendering in a web browser" This is a good question — I’m a technical-leaning designer so I’m partial to just using browser-based tools. I think things like Deco and Expo Snack are wonderful. That said, I’m specifically looking at improving the efficiency of designers’ workflows without changing them. My team is part of DesignOps at Airbnb, maybe useful to consider it analogously to DevOps.…

So... basically this entire system is really just a way to render React components in the Sketch App? And any changes to the design cannot be made in the sketch app, but instead must be made in React code? (So Sketch is just a "read-only" tool?)

It's a library of design components generated by in-production code.

In theory a full design system has most individual pieces defined. You know what your button styles, inputs, headers, etc are and designing new layouts is often a matter of rearranging these various components — you'll occasionally need to design new ones, so that's the outlier here.

This ensures designers are using a single source of truth when it comes to existing components (which is pretty spectacular, because traditionally designers often maintain an overlapping library of static components for design purposes). It also helps hugely that I could pull in real data instead of trying to transpose some real-ish information into a static mock-up.

And of course there's still that design/developer grey area. I'm educated as a designer, but I'm extensively knowledgable about HTML/CSS/SASS — and that still only takes me so far. I know basic JS, but I'm not going to pretend that I can use React. Sometimes I still need to build static mock-ups so I can try out animations or storyboard userflows, do usertesting, etc.

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

#30

Post by ryanmarsh »

lrichardson wrote: post #26
jordanlev wrote: post #5

Earlier quoted context omitted.

Sounds intriguing, but I'm also a little confused about the flow of "code that generates sketch files"... what is the purpose of Sketch in all this? I would think programs like Sketch are useful in general because they give designers a nice way to design things without adding the extra layers of abstraction that code brings (i.e. they can just draw things with a mouse instead of writing instructions that tell the com…

Hello, I work at Airbnb and helped Jon with this project a bit. A lot of people when they first learn about this project have a hard time understanding how it would be useful - so you're not alone! I tweeted ([0]) about this briefly and thought I'd copy here for the benefit of readers in this thread: > the wild thing about react-sketchapp is that we can now bootstrap designs with the actual code that powers the produ…

mind blown

This is exactly what I'm doing with Semantic UI React. I'm prototyping in React, and building my own visual language on top of the visual language of Semantic UI. I see how I could instead render my components to Sketch instead (if a really great Sketch file with all the Semantic UI components existed).

Thanks!!!

Post reply on HN