Design systems help designers and engineers speak the same language and create a more collaborative experience for everyone involved in product development. Design systems can:
- Speed up design and development
- Improve consistency of the user experience
- Help teams focus on what matters
- Provide a shared language and source of truth
You might be familiar with established design systems, such as IBM Carbon, Material by Google, or Spectrum by Adobe. It's easy to browse these large industry behemoths in comparison to your nascent design system and feel intimidated by the challenge before you. But your system doesn't have to be the next Carbon. In fact, it should be a lean system that works for your product and context.
Design system challenges
In a perfect world, a perfect design system would have a great hierarchy of information, fully designed components and patterns, complete and accurate documentation, and an engineering API. Design kits would enable collaboration between designers and engineers. Contributions would be seamless and low effort, and nothing would ever break.
But it's not a perfect world, and there are challenges with getting a new design system up and running. There's the question of where to start, how to make it scalable, when to open it up for contributions, and how to help your partners use the system. How do we develop a great design system when there's never enough time, people, or money? We have to be lean.
Lean as a concept
Lean originates in manufacturing and focuses on minimizing waste while maximizing productivity. Waste is anything that doesn't add value.
Applied outside of manufacturing, being lean means narrowing your focus to maximize your impact, or output, and minimizing the waste of effort or inputs.
Four principles of lean applied to design systems
How do we reduce waste and maximize productivity when creating a design system? Here's four lean principles for creating a design system:
- Find the biggest fires: focus on the things with the biggest impact.
- Don't reinvent the wheel: use what others have already established or figured out.
- Best of basics: perfect your foundations: color, typography, elevation, and spacing.
- Win friends not battles: don't be the gatekeeper or bottleneck of the design system. Instead, find key partnerships and take a long-term view of how the system will develop. Embrace contributions from others to crowdsource components.
Four collaborative exercises to help you be lean
Here's four collaborative exercises in Freehand to help you and your design team be lean and bring partners into the process.
User experience audit template
A user experience audit helps you find the biggest fires. The experience audit focuses on locating inconsistencies within your product. You can then create a list of work to fix the inconsistencies and standardize the user experience.
Architecture planning template
Design system architecture planning ensures you don't reinvent the wheel. Define some basic areas of your design system and what should be in each.
InVision's template provides principles, foundations, components, and patterns. You can change each area to reflect what's important for your system (or what you've seen in other systems). This exercise helps build a common understanding of your design system and how to talk about it. The next steps area of the template helps you plan and rank the different types of work
Design token planning template
Design token planning helps you get the best of basics. Design tokens are a flexible way to express design decisions across your design system. Tokens create a link between design and engineering.
This exercise walks you through defining global design tokens, components, and component-level tokens. InVision uses this exercise as a hand off for our engineers to then create the design tokens.
Design system component template
Use the design system component template to win friends, not battles. You won't be too far into your design system before contributions from others become essential to success. The challenges arise when contributors don't know the system to the same level of detail as you.
This template brings together all your partners (designers, engineers, product owners) with the design system team to have a conversation in a single place. Collect information about who's responsible for individual components. Collect design proposals for new components. A dedicated technical approach section ensures engineers have space to consider how they'll build and deploy the component, and any challenges.
Consumers of the design system felt more involved and included in the conversation, and the design system team developed greater empathy for what users of the system needed to achieve.