Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete the code to name the smallest building blocks in Atomic Design.
Figma
Atoms are the [1] components in Atomic Design.
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Confusing atoms with larger components like molecules.
✗ Incorrect
Atoms are the smallest components, like buttons or inputs.
2fill in blank
mediumComplete the code to identify the combination of atoms in Atomic Design.
Figma
Molecules are groups of [1] working together. Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Mixing molecules with organisms or pages.
✗ Incorrect
Molecules combine atoms to form simple UI elements, like a search form.
3fill in blank
hardFix the error in the statement about organisms in Atomic Design.
Figma
Organisms are [1] of molecules and atoms forming distinct sections.
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Thinking organisms are single atoms or full pages.
✗ Incorrect
Organisms are groups of molecules and atoms that form distinct UI sections.
4fill in blank
hardFill both blanks to describe templates and pages in Atomic Design.
Figma
Templates define the [1] and [2] of pages.
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Confusing style or color with structure or content.
✗ Incorrect
Templates set the structure and content layout for pages.
5fill in blank
hardFill all three blanks to complete the Atomic Design hierarchy.
Figma
The order is [1], [2], [3] from smallest to larger components.
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Mixing the order of components.
✗ Incorrect
The hierarchy starts with atoms, then molecules, then organisms.