0
0
Figmabi_tool~10 mins

Design system file structure in Figma - Interactive Code Practice

Choose your learning style9 modes available
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to name the main folder for a design system.

Figma
The main folder should be named [1] to organize all design assets.
Drag options to blanks, or click blank then click option'
AProject Files
BDesign System
CAssets
DDocumentation
Attempts:
3 left
💡 Hint
Common Mistakes
Naming the folder as 'Assets' or 'Project Files' which are too generic.
2fill in blank
medium

Complete the code to name the subfolder that contains reusable UI components.

Figma
Inside the design system folder, the subfolder for UI components is called [1].
Drag options to blanks, or click blank then click option'
AComponents
BIcons
CTypography
DColors
Attempts:
3 left
💡 Hint
Common Mistakes
Choosing 'Icons' or 'Colors' which are specific asset types, not components.
3fill in blank
hard

Fix the error in naming the folder for color styles.

Figma
The folder for color styles should be named [1] instead of 'ColorStyles'.
Drag options to blanks, or click blank then click option'
AColors
BColor Palette
CColor Styles
DColorThemes
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'ColorStyles' without space or 'Colors' which is too generic.
4fill in blank
hard

Fill both blanks to name folders for typography and icons.

Figma
The folders [1] and [2] hold text styles and icon assets respectively.
Drag options to blanks, or click blank then click option'
ATypography
BText Styles
CIcons
DImages
Attempts:
3 left
💡 Hint
Common Mistakes
Confusing 'Text Styles' with 'Typography' or 'Images' with 'Icons'.
5fill in blank
hard

Fill all three blanks to complete the folder structure for documentation, grids, and motion.

Figma
Folders named [1], [2], and [3] contain guidelines, layout grids, and animation specs.
Drag options to blanks, or click blank then click option'
ADocumentation
BGrids
CMotion
DGuidelines
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'Guidelines' instead of 'Documentation' or mixing 'Motion' with unrelated terms.