5 ms·

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

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

3stripe 9y ago
Can you explain a scenario where you would use the resulting Sketch file? I still don't quite get it (probably as not familiar with React)
- jongold 9y ago
  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 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
  - deleted 9y ago
    [deleted]
  - joekim 9y ago
    > 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?
    - jongold 9y ago
      e.g. checking accessibility of colors in a UI :)
      - joekim 9y ago
        OK, like detecting lack of contrast for color blindness?
jordanlev 9y ago
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.")
- andreasklinger 9y ago
  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
  - jordanlev 9y ago
    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!
    - jongold 9y ago
      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.
meagher 9y ago
How was React Sketch.app influenced by your blog post from June 2016: Declarative Design Tools (http://www.jon.gold/2016/06/declarative-design-tools/ http://www.jon.gold/2016/06/declarative-design-tools/)?
- jongold 9y ago
  So for context that was written whilst I was funemployed before joining Airbnb. - 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 https://rauchg.com/2015/pure-ui
  - perfmode 9y ago
    Thanks for the link
akdetrick 9y ago
To help clarify why this is a big deal, I'd like to share why I've been so excited about this project... [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!
- ryanSrich 9y ago
  That seems like it has some value for super large teams. I guess the thing I'm having a hard time wrapping my head around is the workflow for a tool like this. My current understanding is that you'd need: 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.
  - jordanlev 9y ago
    Yeah this confused me as well, but some other comments here clarify the situation: there's one sketch file that is the "design system" (containing the "components"), then a bunch of other sketch files for the actual pages of the site or screens of the app... it's only this "components" file that is generated from code. Sketch is used for the design of the pages/screens/etc, but they are pulling the components from the "design system" file. As with most misunderstandings/disagreements/arguments in the programming world, this confusion arises from people in different contexts using a tool for one purpose, but not realizing that other people are in different situations trying to achieve different goals with those same tools. (Specifically, if you are an agency or freelance designer/developer, and you are building a bunch of different sites, then this tool does not serve any useful purpose... but if you have an underlying "design system" and a large company with lots of different products all sharing the same basic design, and a large team to go with it,then this starts to make a lot more sense.)
bdickason 9y ago
This is super cool - I see designers struggle with this at every company and am a huge fan of tooling that make design/eng collaboration better.
Smirnoff 9y ago
Hi Jon. Any plans to extract interactions as code from modern prototyping tools (e.g. Principle) to Xcode? 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.

3stripe 9y ago

Can you explain a scenario where you would use the resulting Sketch file? I still don't quite get it (probably as not familiar with React)

jongold 9y ago
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 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
- deleted 9y ago
  [deleted]
- joekim 9y ago
  > 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?
  - jongold 9y ago
    e.g. checking accessibility of colors in a UI :)
    - joekim 9y ago
      OK, like detecting lack of contrast for color blindness?

jordanlev 9y ago

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

andreasklinger 9y ago
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
- jordanlev 9y ago
  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!
  - jongold 9y ago
    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.

meagher 9y ago

How was React Sketch.app influenced by your blog post from June 2016: Declarative Design Tools (http://www.jon.gold/2016/06/declarative-design-tools/ http://www.jon.gold/2016/06/declarative-design-tools/)?

jongold 9y ago
So for context that was written whilst I was funemployed before joining Airbnb. - 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 https://rauchg.com/2015/pure-ui
- perfmode 9y ago
  Thanks for the link

akdetrick 9y ago

To help clarify why this is a big deal, I'd like to share why I've been so excited about this project... [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!

ryanSrich 9y ago
That seems like it has some value for super large teams. I guess the thing I'm having a hard time wrapping my head around is the workflow for a tool like this. My current understanding is that you'd need: 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.
- jordanlev 9y ago
  Yeah this confused me as well, but some other comments here clarify the situation: there's one sketch file that is the "design system" (containing the "components"), then a bunch of other sketch files for the actual pages of the site or screens of the app... it's only this "components" file that is generated from code. Sketch is used for the design of the pages/screens/etc, but they are pulling the components from the "design system" file. As with most misunderstandings/disagreements/arguments in the programming world, this confusion arises from people in different contexts using a tool for one purpose, but not realizing that other people are in different situations trying to achieve different goals with those same tools. (Specifically, if you are an agency or freelance designer/developer, and you are building a bunch of different sites, then this tool does not serve any useful purpose... but if you have an underlying "design system" and a large company with lots of different products all sharing the same basic design, and a large team to go with it,then this starts to make a lot more sense.)

bdickason 9y ago

This is super cool - I see designers struggle with this at every company and am a huge fan of tooling that make design/eng collaboration better.

Smirnoff 9y ago

Hi Jon. Any plans to extract interactions as code from modern prototyping tools (e.g. Principle) to Xcode? 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.