The Making of Design Data Platforms 101
Behind the scenes of our most advanced and complete guide on design tokens and ops.
When we launched Design Data Platforms 101, Caroline asked us on Twitter:
How long did this take, and how many people were involved?
In short, it took us six weeks to build it. Louis wrote the content, Yann-Edern and Thibaut designed the assets, and Allan wrote the code. The whole story, though, would require more than 240 characters.
This post is a sneak peek into the making of Design Data Platforms 101, our most advanced and complete guide on design tokens and Design Ops. It’s about why and how we wrote it, from ideation to completion, and what we hope you’ll take away from this.
👋 You can meet the team in this series and follow them on Twitter.From ideation to completion
“I’ve always dreamed of CI/CD for designers and product teams,” Valentin Chrétien, Specify’s co-founder and CEO, said. And when he and his co-founders, Antoine, Pierre-Antoine, and Louis, started Specify in 2018, they also started documenting their learnings.
After 5 years of user research, market analysis, and product validations, we decided to share our insights and lessons learned in this comprehensive guide to help design and engineering teams set up a design CI/CD workflow step by step.
We really wanted to make it as insightful and helpful as possible for the community, so we took care to polish every detail at each stage of the project, from writing to designing and coding.
Making content educative
Louis Chenais took the lead on this project as Specify’s Chief Evangelist and active contributor to the DTCG Community.
He went hands-on on the topic last November with a focus on education.
It wasn’t his first piece at all. In case you don’t know Louis, he’s the author of this introduction to Design Tokens, a must-read on the topic, embraced by the UX Collective on Medium.
Louis started jotting down notes on Notion, so we had a first edition that we shared with early readers for feedback and thoughts.
💡 Fun fact: Louis wrote this guide in 10,958 words. That's a 62-min reading time.“This guide is for every team struggling with connecting design and code,” Louis explained. “It tackles everything you need to know about how to collect, store and distribute design data through a Design API.”
Designing a delightful reading experience
While Louis was busy writing the copy, designer Yann-Edern Gillet started exploring what the guide would visually look like, with support and feedback from Louis and Valentin.
💡 Fun fact: Yann-Edern created 41 illustrations in a 552x360px format that support Light/Dark themes. That’s a total of 16,295,040 pixels.
“I wish I had this periodic table when I was a student,” Yann-Edern said. And Louis added: “This guide is for anyone willing to learn more about design tokens and how to use them.”
Yann-Edern also teamed up with Thibaut to work on 3D assets.
Thibaut is our motion designer that previously made this promo video for our public launch last February, and he did another masterpiece.
💡 Fun fact: We made this delightful 3D model with Lottie: 72 frames in 24fps, 3.9Mo compressed with Squoosh CLI, in a 21Ko json file.Building Design Data Platforms 101
Allan started working on the dev part last March, always in sync with the design team that provided detailed workflows to help build a world-class experience.
In the meantime, we ran quick feedback loops with the help of Maud and Pierre-Antoine to make Design Data Platforms 101 a delightful experience — and hopefully an insightful read — on all browsers and devices.
💡 Fun fact: Allan built this guide in 10,185 lines of code with 22 different UI components. We use Specify to sync design tokens and assets from Figma to our codebase in GitHub 🙌
Setting up the launchpad
We spent time writing, designing, and building this guide — polishing every detail, pixel and word, with love. We wanted to add credibility to it, and we had the chance to feature a foreword written by Matthew Ström, Product Design Manager at Stripe.
Design Data Platforms 101 is full of resources, inspired by design leaders from top companies, and above all, Matt’s post on the evolution of design systems is the essay that inspires us the most.
So, asking him a few words to introduce the topic was a no-brainer. We’re delighted he accepted and are humbled to feature his foreword. To quote Matt: “This guide is the periodic table that helps you make sense of your design system.”
Thank you, Matt! 🙏
Design Data Platforms 101: an advanced and complete guide on design tokens, systems, and ops
Thanks for reading!
Design Data Platforms 101 results from 5 years of lessons learned in building a Design API for design and engineering teams. It’s full of insights, best practices, real-world examples, and free resources to help teams set up a design CI/CD workflow step by step.
We really wanted to make it as helpful as possible for the community, so we put much love into writing, designing, and building it — polishing every detail, pixel and word.
All in all, it took us six weeks to complete this guide, from ideation to completion. The full team was involved, with small or more significant contributions. We couldn’t have made it without the help of every single person.
And we had an amazing launch day!
The community embraced it, defining it as a “massive knowledge hub” on design tokens and Design Ops.
S/O to all of the makers on this project across teams — Engineering, Design, Product, Data, and Marketing teams were all contributors.
Please have a read and share your thoughts and key takeaways on Twitter. We hope you’ll learn something helpful and are eager to read your comments!
There’s more on the way
We’re beta-testing a design system documentation in Notion that syncs with Figma automatically.
Want to join us on this journey by sharing early feedback?
