Workflow not clear from documentation and blog article

[vjpr]

After reading everything I still don't completely understand the workflow.

It would be good to have some docs explaining a typical workflow and interaction of designers/developers.

The examples were a bit confusing. What is the point of generating color swatches and style guide in Sketch? Same with cross-platform screens. Wouldn't it be better to just generate a webpage?

Is the idea that designers will experiment inside Sketch, and then the developers will manually implement the work from Sketch, which the designers can further use to experiment.

Is it correct that for a developer, it would be easier just to work in js and render a webpage?

I think a good way to describe it would be "a one-way sync from React to Sketch".

[mathieudutour]

I think most of your questions are answered in the initial article: https://airbnb.design/painting-with-code/

[vjpr]

@mathieudutour I had read that article too, and these were the questions I had.

[mathieudutour]

Once you understand the importance of a design system, react-sketchapp helps you create a single source of truth for both the code and the design.

Those are concerns that might not be relevant depending on the size of your design team, after all it was created by Airbnb which has hundreds of designers ;)

[vjpr]

react-sketchapp helps you create a single source of truth for both the code and the design.

Okay, so designers work in Sketch, developers work in React. One-way sync React -> Sketch.

Do you know if there are posts on how Airbnb incorporate it into their workflow? This would be very interesting.

[HerrBertling]

This article might provide some background that you're searching for :)

https://medium.com/sketch-app-sources/react-sketch-app-backstory-and-full-vision-39861c4c0549

Probably the "Why build it?" part right at the beginning sheds some light:

Airbnb has a large team of designers and engineers. They want to encourage designers to be using their design system and streamline the communication between designers and engineers.

We have a design system at Airbnb. The system has probably 200+ components. We have 100 designers and probably almost 1000 engineers. The current workflow is: the design system team creates the system. And we have a production design team who creates and updates the (Sketch) templates for all the design system files. Most of the time we’d love people to be using the system. That’s one goal.

Another goal is that we want absolute minimum of the time between design and engineering. There’s potentially back-and-forth of annotating specs, doing redlines and all that stuff. With any friction like that, times by the number of designers and engineers, the relationship becomes not scalable.

However, the central artifacts in this workflow, the design system templates, tend to get out of sync with implementations very quickly, which make them not as useful as they should be.

(In order to create the design system templates, ) We played around smart symbols in Sketch. But essentially it’s a big Sketch file stored on Dropbox. That has the tendency of getting out of sync quite like how the code is. We have iOS, Android, Web and React Native — all different codebases. It’s very possible that the engineering implementations are out of sync with themselves. There is a huge possibility that the design system templates get out of sync with any of the implementations. There are so many chances of failure.

With Sketch files, there’s not really much you can do. You have those human-updated things. It’s kind of fine if you have 5 components. But if you have 500 components, that’s a huge sketch file. The possibility of things being out of sync with so many moving parts is huge.

They set out to solve the synchronization issue with code, and use code as the only source of truth. Boom! React Sketch.app was born.

I'm currently working on a design system on a smaller scale, but still with quite some people involved. Even we notice the out-of-sync issue already and I'd love to automate the Sketch file creation as soon as possible for that.

[vjpr]

@HerrBertling Thank you, this is exactly what I was looking for!

[awkale]

I understand how to use react-sketchapp by writing code to make sketch docs. Also I get all the reasoning behind this and how it vastly improves a design system making a single source of truth. I'm still stuck on how a designer(with no coding background) uses these components made by react-sketchapp. Anyone have workflow suggestions for after I've written my components and need a designer to use them to layout a page?