Design System in 90 Days

A workbook designed for teams on creating a design system that lasts.

Buy workbook + templates — $349
You get a 130-page workbook PDF, a 🚀 Design System Command Center FigJam file with 30 prompts, and a Figma file with 2 template pages.

If you’re like most of our clients, you’re a design, engineering, or product leader, working at an enterprise organization on its second or third attempt at a design system that truly powers all of its digital products. In the first few tries, perhaps you ended up with some great libraries that just didn’t get used as much as you’d hoped. (We call those “design system graveyards.”).

Six months of work down the drain. Now, it seems like enthusiasm for the idea of a design system is fizzling out and your leadership wants to reallocate your design system team to other projects.

Create a design system teams love to use

It still feels within your grasp: a set of shared components all teams start with as an established part of their workflow.

They’re free to innovate, to solve more impactful business problems because they’re not custom-building yet another datepicker for the fifth time.

When the big rebrand or technology migration eventually comes around, you’d be ready. Change will be relatively painless, because you’ll be able to make modifications in one place that cascade out to every product with a few simple build commands.

If this is your first time marching toward this utopia, it can feel like stumbling around in the dark, messing up more than succeeding. You’re unknowingly headed toward yet another design system graveyard because you don’t know the steps, the process, the sequence.

You can create a design system in a way that involves your customers—really, your community—from the start. You’ll no longer feel behind, like you have to catch up and rein in the teams that can’t help but deviate from the system because there’s not enough of it there for them yet. Instead of policing other teams to keep them in line with the standards, your team becomes the one that propels them to boost the quality of their work. You’ll have clarity, and

It’s doable! Companies like Shopify, IBM, Lyft, REI, Atlassian, Microsoft, and more are living this reality. You can too.

Know exactly what you can do each day

The key is focusing relentlessly on adoption from Day 1 by systematically and intentionally including members of your team at every single stage of the process. You hold that as the focus for every activity you do by clearly understanding what teams need in a design system. And you iterate on it constantly and smartly in a way that scales and sticks.

Our Design System in 90 Days workbook will show your team exactly how to do that, every day from Day 1 to Day 90. We’ve spent the last few years workshopping this sequence of 52 activities. It’s a proven process that, when repeated over the next 90 days and beyond, plants seeds that can blossom into a healthy design system practice. These are the steps we’ve used with many enterprise teams to help them create digital products efficiently, consistently, and in a way that’s a lot of dang fun!

Afyia Smith

“No one’s more qualified to create a design system workbook than SuperFriendly. If you’ve ever wondered about a good process for making a design system, this is a great starting point! ”

Afyia Smith, Design Manager, Design Systems, Epic Games

The format

You won’t find a lot of theory here: the workbook clearly instructs you on what to do and how to do it. The activities are designed for a cross-disciplinary design system team of 3–8 people working 20–30 hours per week to complete together over a 90-day timeframe. This workbook also includes FigJam prompts and Figma templates you’ll use to complete the activities, so access to Figma is a must!

Who should use this

Design systems find their full potential at enterprise organizations. Because design systems require deep knowledge of design, engineering, and product, it’s naturally a team sport. We wrote this workbook for a dedicated, cross-disciplinary design system team to do together. Because these activities are meant for teams, it may feel too overwhelming for an individual to complete this workbook on their own.

Inside the workbook

Table of Contents

52 activities
30 FigJam prompts
02 Figma template pages
  1. Assemble the North Star
  2. Assemble Design and Code Assets for Audit
  3. Create an Influence Map
  4. Collect Feature Teams’ Roadmaps
  5. Identify Existing Paradigms in Design And Code
  6. Identify Emerging and Interesting Paradigms in Design and Code
  7. Interview Potential Design System Customers
  8. Identify Potential Pilot Teams
  9. Schedule Pilot Product Walkthroughs
  10. Identify Key Stakeholders + Schedule Interviews
  11. Visualize Your Technical Ecosystem
  12. Interview End Users
  13. Interview Stakeholders
  14. Conduct Pilot Team Walkthroughs
  15. Create New Design System Repository and Package
  16. Set Up Public Workshop Environment with Branch Deploys
  17. Teach HTML & CSS to Designers
  18. Teach Figma to Engineers
  19. Teach Git to Designers
  20. Teach Storybook to Designers
  21. Practice Hot Potato
  22. Join Pilot Teams’ Sprint Planning Sessions
  23. Practice with an Existing Design System
  24. Conduct a Practice Pilot
  25. Create a Glossary of Shared Vocabulary
  26. Identify 3 Initial Components to Pilot
  27. Synthesize Themes & Insights from Stakeholder Interviews
  28. Send First Stakeholder Update
  29. Create Design System Coverage Map
  30. Set Up Slack Channel for Design System Conversation
  31. Create Reference Website v1
  32. Create Component Implementation Roadmap
  33. Propose Collaboration Plan to Pilot Teams
  34. Abstract Component Through Hot Potato
  35. Share In-Progress Component Abstraction Work with Pilot Teams
  36. Iterate on Component Through Hot Potato
  37. Writer + Engineer + Designer Chronicle the Process
  38. Issue Pull Request to Contribute Newly Abstracted Component
  39. Usability Test Component with Pilot Teams
  40. Final Iteration on Component
  41. Send Stakeholder Update
  42. Extract 3 Overarching Principles
  43. Create a List of Potential Design System Names
  44. Create Design System Logo v1
  45. Add “Design System Office Hours” to Calendar
  46. Make Design System Swag
  47. Send Slack Post about Component #1
  48. Host “Systems Week”
  49. Send Design System Name and Logo Finalists to Brand & Legal Team
  50. Repeat Activities 34–40 for Component #2
  51. Repeat Process for Component #3
  52. Congrats! Release Design System v1.0.0!

Why so expensive?

Following our process can likely save a design system team about 6–9 months of figuring out what work to do, resulting in about a week of design and development time savings for your feature teams at first, and then a few more weeks eventually. That’s about $30k–$90k of savings per team at industry rates, a 85×–260× return on investment for this workbook. (And we bet you have more than 1 feature team!) In a recent presentation to their leadership team, one of our previous clients projected an additional $250M (no lie) as a result of our design system collaboration!

Why so cheap?

Expensing business purchases is too complicated sometimes. We tried to price this low enough so you could buy it with your corporate credit card without needing to go to your manager or procurement for approval.

The right balance of specifics and flexibility that you can use to uplevel the impact and influence of a design system team in a focused amount of time. I highly recommend it for both folks that are just starting a system and for design system veterans.

Kelly Harrop, UX Engineering Lead, Intuit Design System

It’s so practical it almost feels like doing a workshop & getting real-life guidance… only YOU get to choose the pacing.

Sara Soueidan, Independent inclusive design engineer

An amazing playbook that you can run at your own pace whether you are just starting up your design systems practice or looking to formalize aspects of it.

Davy Fung, Product Designer, Design Systems, Meta

These steps are great for any point on the journey to recenter your design system team and focus on connections to product.

Darian Rosebrook, Design Systems Lead

I can’t believe how jammed packed this workbook is!

Heather Palmer, Design Ops & Accessibility Program Manager, Zillow

I recommend this to anyone who is starting their first design system.

Mae Capozzi, Senior Software Engineer, Amplitude

I wish I had something like this available when we were starting with our design system.

Jan Toman, Design Systems Lead, Productboard

Thank you for the dose of knowledge and energy in these discussions and activities about mission, collaboration, adoption, documentation, growth, and more.

Michael Haggerty-Villa, Senior Product Design Manager, Compass

Fully packed with insights and guidance. It’s a must-read for my team.

Silvia Bormüller, Founder, Into Design Systems

Imagine becoming a chef by studying led techniques and practical approaches without having to unconsciously just execute recipes.

Raf Vitale, Senior Product Designer, Design System

Packed with tried-and-tested exercises for starting or reinvigorating design systems at any stage of life. An indispensable reference even for seasoned design system practitioners.

Dan Eden, Product Designer, Meta

The most practical, comprehensive design systems resource that I’ve ever seen. It’s kind of mind-blowing how much thought went into this.

Michael Riddering, Founding Designer, Maven

Starting from scratch feels overwhelming. The workbook helped me get clarity on how I want to approach our design system and team, and I always have a guide to fall back to when I need it.

Joey Banks, Senior Product Designer, Webflow
Buy workbook + templates — $349