Atomic design methodology in Figma - Cell-by-Cell Formula Trace

Sample Data

This data shows the five levels of Atomic Design methodology used in UI/UX design.

Cell	Value
A1	Component Type
B1	Description
A2	Atoms
B2	Basic building blocks like buttons, inputs, labels
A3	Molecules
B3	Groups of atoms working together, e.g., search form
A4	Organisms
B4	Complex UI sections made of molecules and atoms
A5	Templates
B5	Page-level structures combining organisms
A6	Pages
B6	Specific instances of templates with real content

Formula Trace

Count of components by type = COUNTIF(A2:A6, "Atoms") + COUNTIF(A2:A6, "Molecules") + COUNTIF(A2:A6, "Organisms") + COUNTIF(A2:A6, "Templates") + COUNTIF(A2:A6, "Pages")

Step 1: COUNTIF(A2:A6, "Atoms")

Step 2: COUNTIF(A2:A6, "Molecules")

Step 3: COUNTIF(A2:A6, "Organisms")

Step 4: COUNTIF(A2:A6, "Templates")

Step 5: COUNTIF(A2:A6, "Pages")

Step 6: 1 + 1 + 1 + 1 + 1

Cell Reference Map

   A       B
1|Component|Description
2|Atoms    |Basic building blocks
3|Molecules|Groups of atoms
4|Organisms|Complex UI sections
5|Templates|Page-level structures
6|Pages    |Specific instances

Arrows: Formula reads cells A2 to A6 for component types.

The formula references cells A2 through A6 to count each component type in the Atomic Design methodology.

Result

   A       B                C
1|Component|Description      |Count
2|Atoms    |Basic building blocks|1
3|Molecules|Groups of atoms   |1
4|Organisms|Complex UI sections|1
5|Templates|Page-level structures|1
6|Pages    |Specific instances|1
7|Total    |                 |5

The final count shows 5 component types in Atomic Design, each counted once, summed to total 5.

Sheet Trace Quiz - 3 Questions

How many 'Molecules' are counted in the formula?

A 0

B 5

C 1

D 2

Key Result

COUNTIF counts occurrences of each component type in a specified range and sums them.

Practice

1. In the Atomic design methodology, what is an atom?

easy

A. A complex data model for BI analysis

B. A full page layout with all components assembled

C. The smallest reusable UI element like a button or input field

D. A group of templates combined to form a dashboard

Solution

1. Step 1: Understand the definition of atoms

   Atoms are the smallest building blocks in UI design, such as buttons, labels, or input fields.

2. Step 2: Differentiate atoms from larger components

   Unlike pages or templates, atoms are simple and reusable elements, not full layouts or complex models.

3. Final Answer:

   The smallest reusable UI element like a button or input field -> Option C

4. Quick Check:

   Atoms = smallest UI parts [OK]

Hint: Atoms are the tiniest UI pieces you can reuse [OK]

Common Mistakes:

• Confusing atoms with full pages or templates
• Thinking atoms are complex components
• Mixing atoms with data models

2. Which of the following correctly lists the order of stages in Atomic design methodology?

easy

A. Atoms, Molecules, Organisms, Templates, Pages

B. Pages, Templates, Organisms, Molecules, Atoms

C. Molecules, Atoms, Pages, Organisms, Templates

D. Organisms, Atoms, Templates, Molecules, Pages

Solution

1. Step 1: Recall the Atomic design stages

   The methodology builds UI from smallest to largest: Atoms, Molecules, Organisms, Templates, then Pages.

2. Step 2: Verify the sequence correctness

   Atoms, Molecules, Organisms, Templates, Pages lists the stages in the correct ascending order of complexity and composition.

3. Final Answer:

   Atoms, Molecules, Organisms, Templates, Pages -> Option A

4. Quick Check:

   Order = Atoms to Pages [OK]

Hint: Remember: Smallest to largest - atoms first, pages last [OK]

Common Mistakes:

• Reversing the order of stages
• Mixing molecules and organisms positions
• Skipping templates or pages

3. Given a BI dashboard built using Atomic design, which component would most likely contain a group of buttons and input fields working together?

medium

A. Molecule

B. Atom

C. Template

D. Page

Solution

1. Step 1: Identify what molecules represent

   Molecules are groups of atoms combined to form functional UI units, like a search bar with input and button.

2. Step 2: Differentiate molecules from templates and pages

   Templates arrange organisms into layouts, and pages are full screens; atoms are single elements.

3. Final Answer:

   Molecule -> Option A

4. Quick Check:

   Molecules = groups of atoms working together [OK]

Hint: Molecules combine atoms into small functional groups [OK]

Common Mistakes:

• Choosing atom for multiple elements
• Confusing templates with molecules
• Selecting page for small groups

4. You notice a BI dashboard built with Atomic design has inconsistent button styles across pages. What is the most likely cause?

medium

A. Templates were not created for each page

B. Atoms were not reused properly across molecules and organisms

C. Pages were designed before templates

D. Organisms were combined incorrectly

Solution

1. Step 1: Understand the role of atoms in style consistency

   Atoms define basic UI elements like buttons; reusing them ensures consistent styles.

2. Step 2: Identify why inconsistency happens

   If atoms are not reused properly, different button styles appear across the dashboard.

3. Final Answer:

   Atoms were not reused properly across molecules and organisms -> Option B

4. Quick Check:

   Reuse atoms for consistent styles [OK]

Hint: Inconsistent buttons? Check atom reuse first [OK]

Common Mistakes:

• Blaming templates or pages instead of atoms
• Ignoring reuse of smallest components
• Assuming organisms cause style inconsistency

5. You want to update the color scheme of all buttons in a BI dashboard built with Atomic design. Which approach is best?

hard

A. Edit the page layouts to include new button colors

B. Manually update each button on every page

C. Create new molecules with updated button colors

D. Change the button atom style once to update all instances

Solution

1. Step 1: Identify the role of atoms in styling

   Atoms define basic UI elements like buttons, so changing their style updates all uses.

2. Step 2: Compare approaches for efficiency

   Changing the atom once is efficient and consistent; manual or page-level changes are error-prone and slow.

3. Final Answer:

   Change the button atom style once to update all instances -> Option D

4. Quick Check:

   Update atoms once for global style change [OK]

Hint: Update atoms once to change all buttons globally [OK]

Common Mistakes:

• Editing each button manually
• Changing pages instead of atoms
• Creating new molecules unnecessarily