In our quest for consistency and seamless design-to-code transition, design tokens play a pivotal role. Most of our Product Design projects start with them, and we wanted to share what they're capable of.

Design Tokens are the subatomic "particles" of a design system, representing the values for a design attribute in a semantic and platform-agnostic way. They can include anything from colors, typography, spacing, to animation timings, and more.

They are small, individual pieces of design information used to define and communicate the style properties of a design system. More about design tokens here.

For us, Design Systems and Desing Tokens go hand in hand - when we're creating components, we rely on design tokens to make sure our designs are consistent, and create new tokens once there's a need. The time cost is significant, but the benefits are at least 10 times bigger than the initial investment.

Atoms and molecules

Once we have the foundations, we can start building the framework of our design system - atoms and molecules. Atoms represent the most basic functional units of a user interface. They're the building blocks that, when combined, create molecules. The perfect example of an atom is a Button.

Molecules are components made by grouping atoms together. They form functional sections and are used to build out organisms. The perfect example of a molecule is an alert banner, which includes multiple atoms, such as text field, buttons, icons, etc..

Connecting atoms and molecules into organisms, templates and pages

Connecting atoms and molecules into organisms, templates and pages

Now that we have all the main building blocks, we can start building the end components that have the biggest weight - organisms. Organisms are complex UI sections formed by grouping together molecules and/or atoms. They form distinct parts of a page and work together as a part of the whole.

Read the full case study here.

Let's build an amazing product, together

Want something similar for your product? Book a call with us and we’ll help you decide. Book a call