If you haven’t seen it yet, check out ‘React-sketchapp’ from Airbnb Design team on Github and read the article linked below.
As larger design teams attempt to leverage Sketch for end to end design and development projects, objectives can often be a little ahead of the current native Sketch capabilities. Once a v1 design library or “Style Guide” has been developed in Sketch and built out and then implemented by development, maintaining and evolving that library gets trickier.
For Airbnb, a solution was to flip the process on its head:
“Design tools that seek to produce production-ready code are as old as the internet. 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…”
This is not a hostile takeover or replacement of design by development. It’s more like a passing of the baton at the appropriate time. It can work only after a comprehensive design library/system is established and has moved into a state of maintenance and refinement. The initial design definition is still likely to incorporate (static) visual design tools. However, once the bulk of UI elements have been coded, it can become less efficient for static design tools to be the “source of truth” as they put it.
It’s only at this point in the overall process where the roles can reverse and code can generate consistent design templates for additive/iterative work based on an established Design Library. There’s still the need for new designs and patterns (not previously coded) to be realized and appended to the coded version of the design library – a process I hope to see Airbnb blog about in the future. This isn’t one-size-fits all approach, but it’s very impressive and we applaud Airbnb for sharing it.