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

91–100 of 100 posts

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

#91

Post by joekim »

udkl wrote: post #39

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 s…

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/

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.

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

#92

Post by jongold »

scrollaway wrote: post #79
lucaspiller wrote: post #75

Earlier quoted context omitted.

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/

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?

check out Figma!

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

#93

Post by jongold »

lucaspiller wrote: post #75
scrollaway wrote: post #74

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 :/

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/

Unfortunately, there's still a bunch of internal Sketch APIs we have to call, though radically, radically fewer than in the version of react-sketchapp pre-Sketch 43.

see also https://github.com/xaviervia/sketch2json for some interesting stuff :)

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

#94

Post by jongold »

jvzr wrote: post #84
ziikutv wrote: post #67

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

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)

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 :(

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

#95

Post by jongold »

vladgur wrote: post #68

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 Re…

Hey Vlad!

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

if not, probably not :(

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

#96

Post by jongold »

joekim wrote: post #89
jongold wrote: post #4

Earlier quoted context omitted.

The initial usecase we built it for was generating templates for our design system (color palettes, components etc). At our size, keeping them in sync with the production state-of-the-world was super difficult. So we scripted it, using our production components. 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…

> automatic accessibility checking Can you elaborate on the automatic accessibility checking? Are you testing the sketch file or the react-primitive code for accessibility tags?

e.g. checking accessibility of colors in a UI :)

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

#97

Post by jongold »

tlrobinson wrote: post #87

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.

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 into , into 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 :)

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

#98

Post by joekim »

jongold wrote: post #96
joekim wrote: post #89

Earlier quoted context omitted.

> automatic accessibility checking Can you elaborate on the automatic accessibility checking? Are you testing the sketch file or the react-primitive code for accessibility tags?

e.g. checking accessibility of colors in a UI :)

OK, like detecting lack of contrast for color blindness?

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

#99

Post by scrollaway »

jongold wrote: post #92
scrollaway wrote: post #79

Earlier quoted context omitted.

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?

check out Figma!

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

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

#100

Post by redindian75 »

pavlov wrote: post #38
pknopf wrote: post #32

Earlier quoted context omitted.

Any kind of one-time pricing would be great. Ideally, with a perpetual license with 1-year of free upgrades.

That seems definitely possible. I think what the team was worried about is sticker shock -- $19/month might translate to something in the region of $200-250 for the scheme you propose. Does that sound bearable?

perpetual license is what scared me off as well. Ideally $199 with 1 year upgrades. As long as it keeps working after 1 year I am sold.
Post reply on HN