Building a Design System → Part III: How to structure a design System.
Design systems can have a variety of assets that are shared between product teams. In Part II: velocity through reuse we talked about how the reusability of a design system can speed up the design process. This reusability, however, is ineffective if the design system cannot provide simple navigation to find information. This part will look at how a design system can be structured, as well as what kind of content can be stored within a design system.
Design system structure
Within Figma, it is possible to segment a design system into sections or pages. This provides a controlled environment where all product teams can share content, such as colors, components, fonts, as well as work methods, and experimentation pages. Experimentation pages need to be used carefully since they can negatively affect file performance by rarely being cleaned up from unused components and experiments.
The following chapters show some of the content which can be stored and shared in a design system.
Design Token
Design tokens are all the values needed to construct and maintain a design system: spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as an RGB value, opacity as a number, animation ease as Bezier coordinates. They are used in place of hard-coded values to ensure flexibility and unity across all product experiences. Design tokens are directly integrated into a component library. Design Tokens can be also easily handled by a plugin called “Figma Tokens”
Design Tokens exist as two different types of tokens:
Global tokens: Global tokens are the primitive values in our design language, represented by context-agnostic names. Our color palette, animation, typography, and dimension values are all recorded as global tokens. These can be directly used, and are inherited by all other token types.
Alias tokens: Alias tokens relate to a specific context of abstraction. Aliases help communicate the intended purpose of a token and are effective when a value with a single intent will appear in multiple places.
Global- and Alias-Tokens together create “Component-Specific-Tokens”. While these Component-Specific-Tokens are synced you can format them to meet the needs of any platform.
CopyTokens: Share Terminology and copies as Tokens in the design system. To make terminology and copies cohesive across all products.
Foundation
The foundation is the visual elements required to create an engaging end-to-end user experience. These elements include:
Iconography
Icons are visual representations of commands, devices, directories, or common actions. Icons should be used purposefully to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section.
Responsive typography
In a similar approach to colors, a typographic system is established in Global and Alias design tokens. Different Font variants fulfill a specific purpose and at the same time exist in a responsive design optimized way.
Grid system
One of the easiest ways to achieve an organized design is to apply a grid system. Grids provide a consistent experience across multiple devices with different screen sizes. A common practice is an 8-Point Grid, which is using multiples of 8 to define dimensions, padding, and margin of elements.
Layout
Users are happy when they see familiar features laid out as they would expect to find them. The layout helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design. Every element has its place that we can see instantly and reproduce elsewhere.
High-value elements
Component or pattern with high business value. This can be Logos or elements that are integral to a flow or audience with unusually high value for the organization.
Color palette
A section of your design system or style guide outlines how color combinations are used together and for what interactions. This can be done in the Figma style functions or with a design Token plugin, for example, “Figma Tokens” as mentioned. Colors are often separated into primary-, secondary-, and tertiary-, Accent-colors, etc.
Components Libary
Component libraries are collections of components used in web apps, software, and other applications. It includes buttons, input fields, icons, text, and a UI kit. In the case of a website or software, it can be helpful to make components responsive. In other words, there is always a component available for desktop, tablet, and mobile screens. Components can vary in size and complexity. To differentiate this complexity, Atomic design can create a way to organize components.
In my experience, using the full scope of atomic design over engineers the design system. According to the Atomic design principles, there are two more distinctions between atoms and templates, these are molecules and Organisms. Often, differentiating between atoms, molecules, organisms, and templates becomes a philosophical discussion rather than a useful one. Consequently, we use atoms and templates to differentiate between components.
Atoms
- Atoms are simple components that are the second smallest element after the Tokens in your design system.
- Atoms have the highest reusability across all products and often consist of many variants.
- Atoms have low technical feasibility. This means it is technically simple to implement. Atoms are also technically independent.
- Atoms have clear start and endpoints. A component is independent when the component is decoupled from other legacy designs and code.
Templates
- Templates are complex components.
- It is considered a template when you combine more than two atoms in one element.
- Templates take more time to implement, and they rely on example data to be displayed.
Keep the search clean for your design team
Atom and Templates, especially templates, have a lot of subcomponents or sometimes also called base components. This component type shares reusable components between variants. Designers do this so it will be easier to add or maintain components later. This creates in Figma more searchable components in the asset and search function. This can be avoided by adding an “_” (underline) sign at the beginning of the name.
Thank you for taking the time to read! Please clap and subscribe if you enjoyed it. It would mean a lot to me and encourage me to write more stories like this.
I would appreciate it if you would leave a comment to share your thoughts and experiences with me and the community.
You can support me by becoming a member of Medium by clicking my referral link: https://medium.com/membership/@florianwachter
or buy me a Coffee ☕ 👉 https://www.buymeacoffee.com/flowr
You can learn more about Design Systems here:
