Examples
SinnerSchrader for a car manufacturer
- Design: Have a look on the Sketch page to see how we setup the Sketch library.
Sketch
- Versioning: We didn’t use any versioning tool because only one person was updating the Sketch library.
- Design and development documentation: We used the first 2,5 years patternplate as the documentation platform. Due to several problems on the design and development side we chose to move to docz. For the design side it is still a problem that the updates can only be done via GitHub. The designers need a special onboarding to work with GitHub (= bottleneck) and it takes a lot of time until they work safely and fast with GitHub. Another requirement for the platform is, that it has to be hosted on the client’s servers.
Amazon
They have created a special build system called “Style Dictionary”. This is a single place to create and edit styles. A single command exports these rules to iOS, Android, CSS, JS, HTML, sketch files, style documentation, ….
Style Dictionary - Style once, use everywhere. A build system for creating cross-platform styles.
https://youtu.be/1HREvonfqhY
Deliveroo
For good documentation without extra work they use react docgen to create documentation. The props on the left side automatically generate the documentation on the right:
reactjs/react-docgen
— Raphael Guilleminot and Matt Vagni, Deliveroo / Source (YouTube)
O’Reilly
— Kathleen McMahon, O’Reilly / Source (YouTube)
Airbnb
They are working on a drawing → code system. Read more on their blog.
— Benjamin Wilkins, Airbnb / Source (Blog)
Resources