Painting with Code: Introducing our new open source library React Sketch.app
1–10 of 100 posts
Re: Painting with Code: Introducing our new open source library React Sketch.app
#2Hi 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 :)
Re: Painting with Code: Introducing our new open source library React Sketch.app
#3Hi 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 :)
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)
Re: Painting with Code: Introducing our new open source library React Sketch.app
#4Hi 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 :)
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)
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
Re: Painting with Code: Introducing our new open source library React Sketch.app
#5Hi 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 :)
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.")
Re: Painting with Code: Introducing our new open source library React Sketch.app
#6Hi 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 :)
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 com…
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
Re: Painting with Code: Introducing our new open source library React Sketch.app
#7Hi 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 :)
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 com…
"why not just look at the rendering in a web browser"
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.
Re: Painting with Code: Introducing our new open source library React Sketch.app
#8Hi 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 :)
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/)?
Re: Painting with Code: Introducing our new open source library React Sketch.app
#9We 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.
Re: Painting with Code: Introducing our new open source library React Sketch.app
#10This 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.