• 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.
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.
I think this is pretty cool. I might even update my React install and check it out properly
The website doesn't explain it like this.
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 :)
[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 process, this is easy to work around. We generate documentation from code and structured comments, which allows us to trust our docs as an up-to-date point of truth.
If you're building a design system that both engineers and designers will work with, there's no real solution to keeping sketch symbols and React components in sync. You're essentially stuck maintaining "static documentation" for designers in the form of a sketch file.
More often than not, things get busy, or someone forgets to commit a change to the sketch file, and the sketch symbols fall behind the code used in production.
Developers start to receive mocks that don't match the "standard" components they're using. Designers start to wonder why fidelity is lost by the time features make it to production. The design system falls apart.
`sketch-reactapp` will help us deal with the static documentation problem the same way we deal with it on the engineering side of things: generate from source.
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.
Congratulations on the launch!
1.) Design your thing in Sketch
2.) Code your thing in a text editor
3.) Port your code over to this new tool to see it rendered in Sketch?
Like I said. There's some value there (accounting for the changes between 1 & 2), but the workflow feels weird. Maybe someone from AirBnB design can jump in and enlighten me.
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.
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.")
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/856941689029640192It 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 (It's in realtime with detailed explanations, so it runs about 40 minutes.)
Disclaimer: I wrote a pile of code for React Studio.
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. ~= “We’re changing the servers that our applications are deployed on without forcing our engineers to learn a new language”.
Anyway, 1) having Sketch templates always-in-sync with real components is huge, 2) we’re building custom UIs on top of Sketch to use those components (which we may open source eventually), 3) this is a baby step to get us to the point where component-centric tools like Deco and Subform are good enough to realistically switch our design team to.
also it opens up things like "using real (suboptimal) data" or cross-project-wide refactoring of design, etc
- René etc is more conceptual - it’s obviously not a practical day-to-day tool
- React Sketch.app solves the problems in our org that I can do something about, but also lets you do combinatorial/permutational exploration (see the GIFs in the intro!) because _it’s just javascript_.
Both embrace the paradigm of UI-as-a-function-of-data, and really are indebted to the mark that Guillermo left on my brain with https://rauchg.com/2015/pure-ui
It also led to some exciting new uses:
- component pickers / editors for Sketch that are backed by real components rather than Sketch symbols (build your own UI)
- automatic accessibility checking / internationalization
- using real data in Sketch with real GraphQL queries etc
- as a building block for using Sketch as a canvas for the design tools of your dreams, whilst maintaining compatibility with the tooling your designers use today
AirBnB recently released Lottie that requires After Effects but when compared to Principle, AE feels like Photoshop compared to Sketch. I have a feeling that not many UX designers on Mac want to go back to Adobe tools. Certainly, I don't want to touch Adobe tools again.
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.
- react-dom
- react-native
- react-vr
- react-hardware
- react-blessed
- react-three
- react-aframe
etc
it felt like the right thing to do was a descriptive "this is what it is" name rather than a "marketing name" that would be more confusing.
Yeah, about that.
Are you saying that the "React Sketch.app" in the title is/should/will be "React Snack.app?"
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
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/
2) Create a library of core components. In aggregate, this library is your DLS (Design Language System)
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/
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
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.
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/
see also https://github.com/xaviervia/sketch2json for some interesting stuff :)
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?
I also hear whisperings of a react-pdf renderer but I haven't seen it
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/
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.
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 :(
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.
You could still use it for styleguides for type & color etc, if you keep those definitions in JSON.
if not, probably not :(
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.
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/29#issuecom... 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 :)