Basically, people:<p>• Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product<p>• 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<p>• 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.
Hi HN!<p>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.<p>I'll be hanging out in this thread all day if you have any questions / want to flame me :)
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.<p>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)?<p>Naming is fun.
Do I understand the use-case correctly ? :<p>1) Create designs in sketch (mainly core components)<p>2) Code those designs in React that will generate the React translated version of the sketch<p>3) Use the react generated sketch to build non-core component designs in sketch
.
.<p>4) When the core design changes, update the react component to match the new designs<p>5) All the other components in the sketch will automatically start using the new updated sketch component
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 :/
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)?
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.
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.
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.<p>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.
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.
A boilerplate project to create react-sketchapps<p><a href="https://github.com/brijeshb42/react-sketchapp-boilerplate" rel="nofollow">https://github.com/brijeshb42/react-sketchapp-boilerplate</a>
Very cool.<p>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.
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!