Overview of Design System Components

1. Atomic Design

Atomic Design is a methodology for creating design systems by breaking down interfaces into fundamental building blocks. It consists of five distinct levels:

• Atoms: The smallest elements, such as buttons, inputs, and labels.
• Molecules: Groups of atoms bonded together to form a relatively simple and reusable component, like a search form.
• Organisms: Complex components that combine molecules and atoms to form distinct sections of an interface, such as a header or footer.
• Templates: Layouts that arrange organisms, molecules, and atoms into a structured design, providing a blueprint for pages.
• Pages: Specific instances of templates that showcase the final content and functionality.

Think of Atomic Design as building a house: atoms are the bricks, molecules are the walls, organisms are the rooms, templates are the floor plans, and pages are the completed houses.

2. Design Tokens

Design Tokens are the visual design atoms of the design system, representing the basic building blocks like colors, fonts, spacing, and shadows. They are stored as variables and can be reused across different components and platforms.

For example, a color token might be named $primary-color and assigned the value #0070f3. This token can then be applied to buttons, text, and backgrounds throughout the design system.

Imagine design tokens as the paint colors and materials you choose for your house. They ensure consistency and make it easy to update the look and feel of the entire design system.

3. Components

Components are the reusable building blocks of the design system. They encapsulate specific functionality and can be combined to create more complex interfaces. Components can range from simple buttons to complex data tables.

In Figma, components are created by duplicating a master component and then overriding its properties as needed. This allows for easy updates and ensures consistency across the design system.

Think of components as the furniture in your house. Each piece serves a specific purpose and can be moved or modified without affecting the overall structure of the house.

4. Variants

Variants are different states or variations of a component. For example, a button component might have variants for different sizes, colors, or states like hover, active, and disabled.

In Figma, variants are created using the Variants feature, which allows you to define different states and properties for a component. This makes it easy to manage and update multiple variations of a component.

Consider variants as different styles of the same piece of furniture. A chair might come in different colors, materials, and sizes, but it remains a chair in all its forms.

5. Libraries

Libraries are collections of components, design tokens, and other assets that can be shared across different projects. They ensure consistency and make it easy to update and maintain the design system.

In Figma, libraries are created by publishing a file as a library. Once published, the components and tokens in the library can be accessed and used in other Figma projects.

Think of libraries as a catalog of furniture and materials that you can use to decorate multiple houses. Each house can have its own unique style, but the core components and materials come from the same catalog.