esign systems have rapidly become essential in product design, mainly due to their efficiency-enhancing capabilities. A well-structured design system bridges the gap between design and development, offering reusable design components that speed up production and streamline various processes.
Do you really need a design system?
If you’re developing a digital product, the answer is yes! But every team has its own set of priorities and resources that they have to allocate reasonably. You might be a new and upcoming team or a large organization that is looking to streamline its workflow, but it’s worth starting by understanding how a design system might help before embarking on the journey. Ask yourself:
- Are you frequently engaged in repetitive work?
- Is sharing design assets across departments a challenge?
- Do you struggle to release products on time?
- Are there inconsistencies in your final product?
If you answered “yes” to any of these, then you should definitely consider building a design system.
It’s also worth further understanding the benefits of design systems that go beyond solving an immediate problem. At the end of the day, design systems will help you streamline your workflow, scale effectively, and build better products.
So, what do you need to build one?
Key considerations before building a design system
Understanding and documenting your vision
The best way to treat a design system is like any other external product you’re working on, but your users are your team. A design system aligns different teams under a unified vision. Understanding and documenting this vision is crucial for building an effective design system. It lets you plan and make the right choices that can save you a lot of time and money in the long run.
Establishing design principles
Design principles guide decision-making throughout the design process and are a vital part of your design system. You’ll also need to document these principles for your team — we’ll get into what tools to use later on in the article.
Assessing current assets
Rarely does any team embarking on a design system journey start from complete scratch. You could have an existing ‘design system’ that is an Excel sheet of components. It could be a style guide or pattern library that the team has been relying on. A design system will help you consolidate all these existing design processes, patterns, components, and assets, so you might not need to start your design system from scratch.
Choosing the right design system tool stack
Product design tool
Your design tool is the first key component of a design system, without a design tool, there would be no designs to manage. Any product team will likely already be using one, so why include options to choose from now? Creating a design system is a good opportunity to reevaluate how you design and pick something that makes the most sense to scale and work along with your design system to help you achieve your goals. Figma and Sketch are the most popular design tools, but you should also consider up-and-coming options like Penpot.
If we were writing this article in 2019, the conversation would have gone a lot deeper at the pros and cons of all the different options. But nowadays, the best option to help you scale, support your design system, and set yourself up for success is Figma — by far. This chart from UXtools design tool survey back in 2021 shows just how dominant Figma has become.
Design tokens manager
Design tokens are the atomic building blocks of your design system and product. Using a tokenized approach to design helps you reap the benefits of consistency and efficiency in your design system. Your design tokens include: colors, typography, size, spacing, and much more. They are agreed upon decisions that our primary color, for example, will be a certain value. A design tokens manager helps you establish these tokens and manage them from a central location that can propagate changes to the rest of your designs. Your options include:
Tokens Studio (previously named Figma Tokens Plugin): Started to address the vacuum left by Figma not supporting design tokens until recently, this tool specializes in creating and managing design tokens. It allows designers to define and update their design tokens in one place, ensuring consistency with your Figma designs.
Figma variables: Now that Figma has its take on design tokens with Figma variables, you can do some basic management within Figma itself.
Supernova: Supernova’s design token management supports importing classic Figma styles, Figma variables, and Tokens Studio, all to help you manage your token values from a central location. You can edit, create, and add descriptions, statuses, and more details to help your team use tokens effectively.
Design system documentation tool
Documentation is at the core of design systems. It’s so important that some practitioners consider the documentation to be the design system. Having a central location where you can detail all the information you need (usage, variants, implementation, status, etc) for your design components, tokens, and assets helps your team be more efficient and consistent.
It also teaches designers and developers how to use the design system itself more effectively. To help you do all these things, you can either create a custom documentation site or rely on a third-party documentation tool. Third-party design system documentation tools are split into two categories: dedicated design system documentation tools and general documentation platforms with design system considerations.
Supernova: In addition to managing your design tokens, Supernova provides an easy-to-use, no-code documentation editor. You can connect and automatically sync your tokens and components from your Figma libraries and codebase to your Supernova documentation to create an integrated system. There are a variety of content blocks you can implement, including component health, Figma frames, and React renders. This allows teams to create comprehensive guidelines and documentation that connects both design and development decisions.
Notion: Some teams consider using Notion a better deal since they already use the platform for internal documentation and can add design system pages to it. While it does support design tokens and is generally easy to use, it falls short when it comes to integrations you’ll need to power your team and product workflows. For example, you can’t connect your codebase to Notion.
Confluence: Similar to Notion, Confluence is another tool teams use internally that tends to be extended to design system documentation. However, it faces the same limitations as Notion, and it will ultimately limit your ability to scale your design system and the benefits from it.
UI component builder
Unlike the other parts of your design system tech stack, there is really only one option when it comes to a UI component builder — Storybook. A front-end engineer’s best friend, Storybook integrates seamlessly with most modern web frameworks and lets them build, test, and document their UI components and pages easily. It also happens to be open-source and free. Dedicated design system tools like Supernova support direct integration of your Storybook pages to make sure you have all you need in one place.
Code repositories
Some people have the misconception that a design system only applies to the design side of the product. But a true design system connects your designs to code to help your entire team design, implement, and iterate with ease. A reliable code repository is essential for version control and collaboration in software development.
GitHub: Known for its robust features and large community, GitHub is ideal for hosting and reviewing code, managing projects, and building software alongside millions of other developers.
Bitbucket: Bitbucket is favored for its integration with other Atlassian products like Jira and Trello, offering a more integrated solution for teams already using these tools.
Design system tool
We’ve now covered all the different parts of a design system tech stack as individual parts, consolidating them into a single source of truth is its own separate challenge. Growing adoption for your design system is one of the biggest challenges most teams face, and having people use six different tools to accomplish a single task is a quick way of losing them. A design system tool helps you bring your entire process into a holistic solution.
Supernova stands out as a comprehensive design system tool, acting as a central hub for managing various aspects of a design system that we’ve touched on. It connects design tokens, components, and documentation while integrating with other tools like Storybook and Figma, ensuring that all team members have access to the latest designs and guidelines. It also helps you connect your designs to code with automation pipelines that sync updates in designs directly to your codebase.
Choosing the right set of tools is pivotal in building an effective design system. These tools should not only align with your team’s needs but also look to improve collaboration, maintain consistency, and streamline the design and development process. It’s also key to keep in mind what you might need in the future. It’s a common pitfall in design system teams that while managing resources, they opt for what is convenient now, only to face a roadblock in a year because a tool can’t scale with the team. By carefully selecting and integrating design, management, documentation, and delivery tools, you can create a robust and efficient design system that serves your team well.