Atomic Design
Atomic Design is a methodology inspired by chemistry for designing user interfaces that was introduced by Brad Frost, a web designer and developer. It's based on the idea that user interfaces can be broken down into smaller, reusable parts, just like atoms in the real world. These parts can then be combined in different ways to create more complex user interface elements, or molecules. These molecules can then be combined to form larger, more complex structures, or organisms. The goal of atomic design is to create a consistent, modular Design System that can be used to build user interfaces more efficiently.
The five levels of atomic design
- Atoms: These are the smallest, most basic UI elements, such as buttons, inputs, and icons.
- Molecules: These are groups of atoms that function together as a unit, such as a search form or a navigation menu.
- Organisms: These are groups of molecules that function together to form a larger, more complex UI element, such as a header or a footer.
- Templates: These are layouts that show how the organisms and molecules will be arranged on a page.
Pages: These are the final, fully-realised user interfaces that are built using the templates and the organisms, molecules, and atoms.
By following the principles of atomic design, designers and developers can create a cohesive, scalable Design System that can be easily maintained and updated over time.
Base components
In Figma, these are the fundamental building blocks of our components.
COA
This is an acronym commonly used to the describe the Queensland Government Coat of Arms.
Components
Components are reusable parts of the design system. Each component has been developed to meet a user interface need. All components work together to create different patterns and templates.
Component library
A collection of available components or patterns you can browse to use in your designs.
Core styles
Govern the typography, grids, effects (shadows) and colours. They're available through pre-set styles defined in the Design System master file.
DTA
The Australian Government Design System produced by the Digital Transformation Agency (DTA). It provides a framework and a set of tools to help designers and developers build government products and services more easily.
Instance
In Figma, an instance is a copy of a component. Instances are linked to the main component and receive any updates made to the component.
Main component
In Figma, main components are the source of truth for each component. When you use our components in your designs you create instances (copies) of the main components.
Patterns
Patterns are standardised ways of combining components to address common design problems and ensure a familiar, consistent experience.
Templates
Templates are pre-structured page layouts that show how components and patterns fit together to achieve a specific purpose.
Variants
In Figma, components with variants will have toggles or drop downs in the properties panel that show unique options for that component.
Variables
Reusable style values that define the core design of a website, such as colour, typography and spacing. They are often implemented using SASS (Syntactically Awesome Style Sheets), a preprocessor scripting language that is interpreted or compiled into CSS (Cascading Style Sheets).