Scaling Design Systems

May 01, 2021

There are distinct stages of creating a system and for this I’m going to assume you are starting at zero but feel free to jump around the content depending on maturity of the system. My mental model for a design system is a bridge from design to product. To be successful this bridge requires both design and engineering resources.

[0 - 6 months] Formulation Period

Design: Defining core concepts for the system: Typography, Spacing, Iconography, Color Palette, etc. These core tokens should be defined by design and socialized throughout the design organization. These will be atoms that will cascade throughout the system. This work should be done primarily by creative directors. At this stage the design org will also need to figure out what software the designers primarily use, sketch, figma, etc. This will help you understand where you need to provide the design system library to.

Engineering: At this stage engineering should be focused on identifying customers (customers are users of the system) and understand their technology stack. Customers may also be external partners/open source developers but the focus will primarily be internal. What language do they write in? What frameworks do teams use angular, react, vue, etc? How do they manage dependencies in their repos? Are there best practices for styling– emotion, sass, styled components? Are their repos in github, confluence, gitlab? Internal surveys are great for identifying these things. This will help you understand out how to best serve your customers. You want to make it as frictionless as possible for your developers to use your system…this requires you to have an understanding of their current workflows. Once you have an understanding of what your deployment target requirements are you can start codifying the tokens that design has established. You also will want to set up CI/CD. This work may be done by a generalist and an expert in the language/framework that you decide on.

[6 months - 12 months] Component Development & Socializing

Design: After core tokens defined design will want to create a pipeline of component work. You will need to talk to various stakeholders to understand and prioritize the design work. It will also be ideal to establish a process of teams requesting component work to be done. For this you can have a simple form teams fill out. Socializing the system at this point is important. I would recommend creating a slack channel specifically for designers that use the system. At this point, I would think about bringing on a PM to help manage and prioritize.

Engineering: Engineering should be focused on component work with a secondary prioritization on scaleability. At this stage you will want to define how you test your components– we do unit testing and visual snapshot testing. You will also want to establish how customers can view your components– we use storybook for this. I would also recommend creating a slack channel for communication and support for the engineers who use this system. Bringing on additional developers and a PM at this stage is ideal.

[12 months +] Long Term Stability

Design: Continual component design with extracurricular tasks: documentation on best practices and do’s and don’ts of using the system. Evangelize the system internally and externally (external evangelizing will help with attracting talent).

Engineering: Continue to scale, automate, and optimize. You should have a deep integration with other engineering teams. Office hours, workshops, internal conferences can start to happen at this point. The engineering team working on the system can grow to 5+ people here. You can also start creating tools to help you prioritize component development. We have scripts that we run internally that will show analytics on components so we can get an idea of what usage is at.