A good design system can be a great help for any team trying to create coherent, scalable and effective designs. By establishing a shared language and library of reusable components, it guarantees that all your products are uniform; it speeds up the workflow and enables your team to concentrate on solving user problems.
Our previous article dealt with basics. However, if you want to fully exploit the potential of a design system, you should know how exactly it can be constructed and implemented. This is easier said than done. Therefore, in this guide we will describe step by step what needs to be done so that building a design becomes simple and understandable process.
Starting from defining principles and laying down foundations till creating/organizing design assets – we will provide best practices along with real life examples which will allow you to create such systems that will give power to your team while taking product up higher into sky!
Step 1: Lay the groundwork
 |
| https://www.uxpin.com |
A design system can be of great use to any team or organization. But before you start building components and patterns, take some time to think about why you’re going for a design system and what issues you expect it to solve. For example, your product might look inconsistent across various platforms or making updates could be a manual and time-consuming effort. You may also want to facilitate collaboration between different departments or teams within the same company, ensure that all employees are on the same page or help new hires ramp up quickly.
To this end, try answering these key questions:
- What is your motivation behind wanting a design system?
- Which specific challenges are you hoping it will address?
- How would you measure its success in dealing with those challenges?
Design systems can be useful for teams of any size or skill level. Really, not everybody needs an intricate, enterprise-level design system. If you are a beginner, in the early stages of your career or working with a small team on a few brands or products, you might just need a simpler system with some reusable templates and components to streamline your workflow and ensure consistency. As your projects or team expand, your design system can grow too.
The trick is to create something that fits into the way you work—whether that’s a full-blown system for managing multiple products, or just a set of reusable elements for a small team. You have to remember: Not all design systems look alike. They come in different shapes and sizes and can help different people–from solo freelancers to huge companies.
What matters most at this point is getting everyone aligned around what it means for your organization to have a design system and why you’re investing in one.
Take stock of what you have
After deciding on your objectives, you should examine what you have already. Begin by collecting and organizing every single part that is being employed at present: such as hues, typefaces, symbols, parts and patterns among others. In this case, pictures showing various platforms and devices where the product appears will be very helpful; also remember to add any interactive states or alternative versions. Most probably there will be repetitions as well as uniformities which might act as a foundation for your design system.
Arrange and appraise
With an inventory in hand, it’s time to sort through what you’ve got. Start by putting your screenshots and examples into categories. Then take a step back and look at the big picture. What is your current design language? Can it be standardized or streamlined?
Look for places where your product feels disjointed, or where there might be inconsistencies or redundancies. These are often signs that a more cohesive design system could improve your user experience.
Recruit your champions
Building a design system is a team effort – so start gathering advocates early on. Look for people who care about design consistency, or who have experience with design systems. Don’t just stick to the design team – reach out to developers, product managers, customer support, people from other parts of the business... Different perspectives will help ensure that your design system serves the needs of your whole product and organization, not just one particular group. And remember: many successful design systems start with one person! Don’t be afraid to champion the cause yourself.
Choose the method you want
There are two main ways of going about building your design system: making a custom solution from scratch or taking up an existing framework and modifying it to suit your needs. Each has its positives and negatives.
Creating a program from ground up allows you to have a unique approach that is not similar to any other. However, doing so will take more time and resources upfront. On the other hand, using an open-source system like Bootstrap or Foundation can get you started quickly but might need further customization for fitting into specific use cases.
The answer isn’t right or wrong because it depends on what your team can do, their bandwidths, and long-term goals. Start small and grow with time if necessary!
Match with the goals of the company.
In this connection, ensure your design system initiative coincides with your general business objectives. Take into account such factors as timing, resources and leadership buy-in. Your previous investigation will be useful for this purpose; utilize what you discovered to justify why a design system would support some key enterprise aims.
Since design systems necessitate continuous investment, it is crucial to get stakeholder approval at an early stage. If you can demonstrate that faster time-to-market or enhanced user experience are among the tangible benefits associated with your system, then this will greatly help in obtaining necessary funding and support.
Establish your principles of direction.
Given this foundation, you can now begin to build your design system. Among the earliest and most important steps is creating guiding principles. They’re meant to be a reference point throughout the growth and evolution of the system — for everyone involved. These principles should clarify why your organization’s decisions were made while ensuring that such decisions align with overall goals. Keep number small enough so they are memorable yet still actionable; let them serve as signposts which may easily be consulted and put into practice.
Here are some tips on writing effective design principles:
1. Start with Why – What fundamental belief or value underpins each principle?
2. Give examples – Be specific about what actions should be taken when applying this rule in reality.
3. Make it actionable – Principles need verbs!
Let’s say your team believes in accessibility above all else. You might have a principle about designing for inclusivity that includes things like taking into consideration different abilities to see and hear, checking contrast and legibility, or following current accessibility standards. The more detailed these principles can be made, the better.
Build your design principles on top of the wealth of knowledge in your organization. See what resources you already have at hand — brand standards, voice and tone guides, marketing strategies; even customer support playbooks could be useful. Use them as starting points but collaborate with people from other departments so that yours align with wider company goals too. It’s not about creating generic statements – it’s about expressing why you care most as an organization working on this particular product or service.
Step 2: Define your foundations
 |
| https://uxdesign.cc |
Design systems are based on certain visual and functional elements. These foundations are very important because they ensure that the system is accessible. Other key aspects include color, typography, iconography, illustration, and dimensions among others. What this means is that all these parts must be used in combination so as to create a coherent design language which can be readily understood by users.
Open your design to everyone.
Accessibility implies the idea of making sure that your product can be employed and understood by all people irrespective of their abilities. This idea belongs to everybody and has got to be one of the core principles of designing systems. During the development of a design system there should not forget about such components as font sizes, color contrasts or how different parts are named and arranged among others.
At the moment you create them it is important for you to tell people what each component does as well as why it was made so; this will help in meeting products’ experiences with accessibility standards. Begin with prioritizing inclusivity at every stage together with laying down clear instructions because such kind foundations usually end up leading into more inclusive products where everyone can participate.
However, you must know that possessing an accessible design system doesn’t mean having an accessible product by default; it’s a continuous process which needs dedication from the entire team.
Choose colors that go well together
Color is a strong design element; it can stir feelings, create variety and direct attention. Create an harmonious palette for your design system with enough but not too many colors. Consider the different appearances of your colors in different modes (e.g., dark mode) and across different products to ensure consistency in brand experience.
To simplify your color palette, examine current designs from other members of your team and combine like shades. For instance, reducing the number of primary button colors used can give a cleaner look to your design while making it more intuitive. As a general guideline 60% should be neutral, 30% primary and 10% secondary or accent colors are recommended.
Pick typography that’s easy to read and fits your brand
Typography is another foundational aspect of design. Opt for fonts which are easy to read but also reflect the character of your brand; consider theming a few together. Letter-spacing, weight and line-height should be carefully considered for comfortable reading too.
Typically, ‘display’ or ‘title’ sizes are used when organizing typography scales based on their intended application within the design system; however this could also be done with more basic headings like ‘heading-100’.
Create a hierarchy of visuals with elevation.
Elevation is the term used for shadows, layers, and transparency that give depth and organization to your design. To illustrate, cards could seem slightly lifted off the page or a dialogue box could appear as though it were floating above everything else through shadowing. The fixed navigation bars may have faint shadows on them while navigation drawers might have inset shadows – which also show where they are in relation to the rest of the screen.
This helps structure designs by indicating which elements should be seen as most important and least important according to users’ intuition about such things.
Make icons consistent and meaningful
Icons are small visual symbols that represent concepts or actions quickly. A good icon system reinforces brand identity and enhances usability. It is important that icons should always be clear, consistent in design and universally understandable regardless of styling differences applied to them.
Utilize an icon grid for sizing uniformity during creation as well as descriptive names coupled with search keywords to facilitate ease-of-use when finding suitable icons during projects.
Apply tokens using variables and styles
Image of a cylindrical stack of green, yellow, and red striped disks, creating a layered effect, against an orange background.
Watch our lesson on applying tokens, variables, and styles, part of our introduction to design systems course.
Variables vs. styles
Variables in Figma store single values such as colors, whereas styles hold more complex information, such as gradients, and are better for detailed, multi-layered designs. Learn more.
In Figma, you can use variables and styles to create a consistent and scalable design system. Variables and styles help define the core elements that can be reused across your designs. They are most commonly categorized into two primary types:
Primitives:
These are your design system’s basic building blocks, like colors, spacing, and sizing. They form the foundations of your design but aren’t used directly in components or layouts.
Semantic:
These provide a meaningful context for how a variable or style should be used. For example, you may have a color variable called "color-background-warning” to convey a sense of urgency or potential danger. Semantic variables primarily alias primitive values behind the scenes, but they can also accept raw hex codes, numbers, or strings.
It is important to follow clear and consistent conventions when naming variables and styles. To make names more understandable, Nathan Curtis, a design system contributor, proposes combining a base like color or size with modifiers like variant or state. The idea is to develop an agreed-upon standard that can be employed by all team members for better communication and productivity.
Use layout grids and spacing to create visual harmony
Grid systems, sizes and spaces are invisible adhesives that hold your design together. They give a sense of organization, uniformity and visual cohesion which brings out a polished and professional feeling in your product.
Designs:
This is where you specify how the design will respond to various screens or devices so as to maintain consistency across all platforms.
Grids:
Column grids, baseline grids and modular grids can be employed for aligning elements consistently while creating a clear visual hierarchy.
Spacing:
Determine even space units that will be used for regulating the distances between objects thereby establishing an attractive and readable balance.
There are various types of grids that may be employed to establish the structure of your design:
- Column grids slice the screen vertically into sections, which assists in aligning elements as well as ensuring a uniform appearance across various gadgets.
- Baseline grids determine the vertical gap between components by usually matching up with text baselines.
- Modular grids on the other hand use both column and row divisions so as to create an adaptable frame for intricate arrangements.
For a design to be effective, spacing should be used properly to establish visual hierarchy and connections between different elements. Spacing units can help generate harmony throughout the product by giving consistent measures.
Design systems can facilitate the creation of responsive and adaptive designs by providing ready-made layout components and templates. These components are designed with specified breakpoints that define how layouts change at different screen sizes. For example, a “hero” component may be included in your design system to highlight a main message or product. You can ensure that heroes always look good and keep their visual rank regardless of whether they are viewed on mobile phones or desktop computers by offering various layout alternatives for different screen sizes. With this method, teams do not have to start from scratch each time they face a responsive layout problem but instead concentrate on generating excellent product-specific designs.
However, the presence of a system doesn’t automatically entail that everyone will use it perfectly. It’s similar to having a cookbook – sure, it’s helpful but the chef has to follow instructions from the book so as to make a good meal. Thus, spatial systems should be appreciated by designers themselves because they are able to comprehend them.
Aspects of Figma design system can assist in maintaining consistency within teams across all their projects through spatial systems. Figma provides layout grids and styles as features that enable this. By offering a single source of truth for grids, spacing and layout components; every person involved remains guided by what needs to be done hence ensuring uniformity in application across different areas or touch points with users. In other words, you won’t have disjointed user experiences when interacting with your product or brand at various places because everything will feel connected and intuitive thanks to figma design systems’ capacities.
A spatial system is extremely useful at the end of the day, however, it can only be effective if applied properly by designers. Teams can unleash the full potential of a spatial system by teaching designers its advantages and promoting its continuous usage.
Keep in mind that a spatial system should serve as an inspiration or guide to your design and not a limitation to your imagination. Whenever you are working with this kind of an approach always remember to prioritize user needs and experiences while taking into account that these principles are just helpful pointers and not hard-and-fast rules.
Step 3: Build your design system in Figma
 |
| https://www.figma.com |
Figma design systems are created for the entire project to follow a fixed, effective and extensible working method. You can consider it as a creation of some building blocks which every member in your team can use in order to build designs that appear and feel consistent with each other. The following is a guide that will help you start off:
Inspect original designs more closely
Remember that first survey you did? When you broke all your current designs down into pieces? It’s time to do it again. Start off by figuring out variables and styles, which is like the base layer of a design. This includes colors, fonts, spacing, layout – anything that’s used consistently throughout your project. By creating a set of predefined styles, you ensure everyone on your team is using the same design elements for every project.
Then move onto components. A component is a pre-made building block that can be reused across multiple designs; they can be simple (e.g., buttons) or complex (e.g., modals). Decompose each component into its smallest parts before reassembling them into new structures.
Select names that are crystal clear and uniform
When you’re naming your components and variables, it’s important to give them names which describe what they do rather than the way they look or how they are coded. This makes them easy to understand and use correctly. Choose semantic names – ones that reflect the meaning and purpose of the thing. For instance, use something like “color-warning” with an alert message or “surface-primary” for main background color of your app. Add category details along with any variations in name such as “color-text-secondary” on your secondary headline color.
There are a few different ways to name cases. Hyphens (e.g., “primary-button”) and camel case (e.g., “primary Button”) are some commonly used conventions. If you don’t know which one is best for you, talk to developers who work with this codebase about their existing conventions — or even better, find out if there’s already an agreed upon convention at your company that aligns with these suggestions too!
Organize Figma library
You can use libraries in various files and projects with Figma, which is one of its best features. This makes it possible for all members of your team to have access to the same styles and components regardless of what they are doing.
When setting up a library, consider the structure that would be most effective for your team. You could keep everything in one file so everyone always works from a single source or truth. Alternatively, you may choose to split things into different files for different parts of your project. You should think about how your team likes working together and also take into account how the development team along with design team will use the library.
Don’t forget that creating a design system in Figma is something that never finishes. It only gets bigger as your team and projects grow, therefore more complex. Set up the basics first and let all of your colleagues participate in making it better with every passing day. At some point in time what used to be just another component library becomes an essential part of a designer’s work: at this stage, it reflects our joint knowledge and skills while constantly adapting to fit into new contexts or solve different problems.