
Painting with Code: Introducing our new open source library React Sketch.app - pouwerkerk
http://airbnb.design/painting-with-code/
======
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.

~~~
zem
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.

~~~
ayanray
Can someone elaborate on the programmer's perspective? I understood the first
and second paragraph (super helpful thanks!) but the exploratory, reloading
repl escaped me.

~~~
superlopuh
REPL (Read-Eval-Print Loop) is an interactive way to program. You feed bits of
the program line by line, in contrast to compiling a bunch of files. This is
kinda like giving instructions live vs writing down a list beforehand.

When solving some problems, it's easier and quicker to use a REPL to get
something that more or less works, and then to copy the working bits over to a
proper source file to reuse. Before this React Sketch, Sketch.app was just the
equivalent of the REPL, where you'd only store the result of your work, and
not the process. Now you have a way to, as soon as you're happy with a design
you drew by hand, write the code to generate it in order to reuse it in the
future.

------
jongold
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 :)

~~~
jordanlev
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 computer how to draw things).
But if Sketch is just another rendering layer of react components, then what
is the point of having it... why not just look at the rendering in a web
browser?

Or am I misunderstanding and there's a way for react code to be generated from
Sketch? (Despite this statement in your blog post: "As the industry has
coalesced around Sketch, people have sought to generate code from Sketch. This
is exciting, but for our challenges we wanted to do the exact opposite — to
keep DLS in sync we have to generate Sketch files from code.")

~~~
pavlov
To go the other way -- generating React code from Sketch -- you can use React
Studio:

[https://reactstudio.com](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://www.youtube.com/watch?v=Rfd7zmlFZw8](https://www.youtube.com/watch?v=Rfd7zmlFZw8)
(It's in realtime with detailed explanations, so it runs about 40 minutes.)

Disclaimer: I wrote a pile of code for React Studio.

~~~
sorenbs
The idea behind React Studio is awesome.

I think it would be super cool if React Studio could automatically create a
GraphQL api based on the structure of the component data.

We are already doing small experiments in this direction at Graphcool (for
example graphql-up [https://www.graph.cool/graphql-
up/](https://www.graph.cool/graphql-up/))

Do you think anyone at Reract Studio would be interested in talking more about
this? They can ping me at soren@graph.cool :-)

~~~
pavlov
Sounds really great, I'll pass on your contact info!

------
thebouv
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.

~~~
dikaiosune
For anyone missing context, naming is hard.

[https://blog.expo.io/expo-sketch-expo-
snack-a444f8dec72b](https://blog.expo.io/expo-sketch-expo-snack-a444f8dec72b)

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

------
udkl
Do I understand the use-case correctly ? :

1) Create designs in sketch (mainly core components)

2) Code those designs in React that will generate the React translated version
of the sketch

3) Use the react generated sketch to build non-core component designs in
sketch . .

4) When the core design changes, update the react component to match the new
designs

5) All the other components in the sketch will automatically start using the
new updated sketch component

~~~
joekim
Here's my variation:

1) Using a text editor like Visual Studio Code, write core components in
react-primitives. This code can be largely the same as your real react-native
code with all it's handling of layout and internationalization.

[https://github.com/lelandrichardson/react-
primitives/](https://github.com/lelandrichardson/react-primitives/)

2) Create a library of core components. In aggregate, this library is your DLS
(Design Language System)

[http://airbnb.design/building-a-visual-
language/](http://airbnb.design/building-a-visual-language/)

3) Use react-sketchapp to transform your core components in react-primitives
to sketch symbols. If you have a large design system and support multiple
languages, then this will save you a lot of time as the number of combinations
of layout, language and potential input values are explosive.

[http://airbnb.design/painting-with-code/](http://airbnb.design/painting-with-
code/)

4) Use sketch to design your new feature. Use sketch symbols to quickly pull
in core components. If you need to create a new core component go back to step
1. With all your fancy tooling, it can be as fast as 1 minute to build a new
page.

[https://twitter.com/karrisaarinen/status/849733176150773761](https://twitter.com/karrisaarinen/status/849733176150773761)

5) When core components change, go back to the "source of truth", the react-
primitives code and modify that. Re-run react-sketchapp. Now all sketch files
that depend on that core component will be automatically updated because of
updated sketch symbols.

------
scrollaway
This looks great. And Sketch is incredible. I wish there was something like it
available on Linux, or I could run it on Linux somehow. Seeing how important a
tool it's becoming to web design makes me uneasy as it's shutting out my
ability to do anything design related :/

~~~
lucaspiller
I keep an old Mac around for exactly this reason. However since version 43
they've switched to a new file format offering "more powerful integrations for
third-party developers".

The new format is a ZIP containing a bunch of JSON files per page, so maybe
someone will come up with a cross-platform viewer or similar.

Edit: I found this which works with basic Sketch files:
[https://animaapp.github.io/sketch-web-
viewer/](https://animaapp.github.io/sketch-web-viewer/)

~~~
scrollaway
Oh that's excellent to hear. Openly usable formats are great.

Most of the slickness of Sketch is in its UI though, it'll be tough to
replicate. Do you know of any project attempting to do so?

~~~
jongold
check out Figma!

~~~
scrollaway
Yep I've used Figma before. It's not really on par with Sketch, but it's
certainly high quality.

------
1rae
Would it be possible to use this on the server to create complicated PDF files
for download (react -> sketch -> pdf), without using something like this
current process (react dom -> html, css -> phantomjs -> pdf)?

~~~
jongold
Yeah sure - the caveat is that you have to run it on OSX rather than Linux. We
have a bunch of Mac Pros & Mac Minis laying around the office doing CI
funtimes.

I also hear whisperings of a react-pdf renderer but I haven't seen it

------
FanaHOVA
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.

~~~
jongold
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/](http://airbnb.design/designops-
airbnb/)

The Way We Build (head of design @alexoid talking about our process) -
[http://airbnb.design/the-way-we-build/](http://airbnb.design/the-way-we-
build/)

Building a Visual Language (on our design system)
[http://airbnb.design/building-a-visual-
language/](http://airbnb.design/building-a-visual-language/)

~~~
swanson
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.

~~~
danoc
Would recommend joining the Design Systems Slack [1] and attending the Clarity
conference [2] to meet like-minded folks!

[1]
[https://twitter.com/jina/status/713173129263067136](https://twitter.com/jina/status/713173129263067136)
[2] [https://www.clarityconf.com/](https://www.clarityconf.com/)

------
afandian
What is a "Sketch document"? I didn't see a link or explanation in that page.

~~~
enra
Sketch is vector based design tool for designing UI and Sketch document is the
format that it uses to save those designs.
[https://www.sketchapp.com/](https://www.sketchapp.com/)

~~~
afandian
Thanks!

------
ziikutv
The website slows down my chrome browser to the point where it lags and I have
to backout.

~~~
jvzr
Noticed the heavy CPU usage as well. The laptop still performed admirably but
estimated remaining battery time fell below 2H on a full charge so I smelled
something amiss. Turned out the videos on this page continue playing even when
the tab is open in the background (not active tab, nor active window). Seems
like a complete waste of cycles. (Opera Beta)

~~~
jongold
Sorry - wasn't sure of a good solution for this without rewriting our blog
too.

Some things I tried: \- not autoplaying the videos (but they're super short,
so it would be annoying to click play) \- playing them when they're in focus &
pausing afterwards (would have to mess with our WordPress installation instead
of launching this thing) \- using GIFs (they were HUGE - I couldn't get them
below like 2mb each) \- YouTube embeds etc (ugh)

I thought this was the best compromise but yeah. Sorry :(

------
z3t4
The classic way for reusing style and layout in web development is to have the
style in CSS-files. CSS-files have a URL, so you can include CSS across web
pages and take advantage of CDN's and browser caching. CSS have it's problems,
but CSS is far superior to in-lining the style al la components. It's good
practice to use the native browser components, the component might work very
different on a smart-watch, vs a big screen PC, native HTML component will
work on both devices! And native HTML components also work with JavaScript
turned off! and for visually impaired people using different kinds of screen
readers.

------
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.

~~~
jongold
Hey Vlad!

You could still use it for styleguides for type & color etc, if you keep those
definitions in JSON.

if not, probably not :(

------
xrjn
We have just recently started using React for new products that our team
develops, doing the design in Sketch. This was already a huge improvement in
efficiency compared to doing design in Photoshop and building products with
Angular. I'm super excited to try this library on our next project and see how
it can streamline the design and development cycle.

------
throaway4242
It's great to see a company like airbnb developing and open sourcing so much
cool stuff. Are you guys hiring developers?

~~~
jongold
:) always!
[https://www.airbnb.com/careers/departments/engineering](https://www.airbnb.com/careers/departments/engineering)

------
brijeshb42
A boilerplate project to create react-sketchapps

[https://github.com/brijeshb42/react-sketchapp-
boilerplate](https://github.com/brijeshb42/react-sketchapp-boilerplate)

------
mixedbit
Sketch.app name similarity with SketchUp can be a source of some confusion.

~~~
rtkwe
We're deep into the woods of name confusion now, all the easy names that
relate to what an app actually does are taken.

------
tlrobinson
Very cool.

It would be even cooler if it could render React components written for the
web without modification, maybe in a transparent webview. I'm guessing Sketch
would need to add support for that.

~~~
jongold
If we can figure a way to translate React DOM to React Native-style components
then this will be doable.

You could write a codemod that turned <div> into <View>, <h1-6> into <Text>
etc, but there's complexity in standardizing layout systems & CSS properties
too. React Native-style components provide the best chance of us using React
as a truly universal platform.

see [https://github.com/airbnb/react-
sketchapp/issues/37](https://github.com/airbnb/react-sketchapp/issues/37) &
[https://github.com/airbnb/react-
sketchapp/issues/29#issuecom...](https://github.com/airbnb/react-
sketchapp/issues/29#issuecomment-297435389) for some more context

If you have any ideas on solving I'd love to see them in GitHub so I don't
lose track of them :)

------
chadlavi
I'd really like to try to integrate some of this design philosophy (and what
your team lays out in that DLS blog post, too) in my team's design flow.
Thanks for this!

------
hoodoof
It's not really clear WHAT this is - why would I use it, what would I get if I
used it?

------
fiatjaf
I don't use anything from Airbnb (and no, I'm not a hotel or against the
"sharing economy", much to the contrary).

~~~
libria
Ok. Why not?

