Style organization and naming conventions in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to name a color style in Figma following best practices.

Figma

Color / Primary / [1]

Drag options to blanks, or click blank then click option'

Abutton

BBlue

Cbackground

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using UI element names like 'button' instead of color names.

Using vague names like 'background' for a primary color.

Color styles should be named clearly and consistently. Using 'Blue' for a primary color is clear and follows naming conventions.

2fill in blank

medium

Complete the code to organize text styles by usage in Figma.

Figma

Text / [1] / Heading

Drag options to blanks, or click blank then click option'

APrimary

BSize

CColor

DWeight

Attempts:

3 left

💡 Hint

Common Mistakes

Using attributes like 'Size' or 'Weight' as the main folder name.

Confusing color with usage categories.

Organizing text styles by usage like 'Primary' helps keep styles clear and easy to find.

3fill in blank

hard

Fix the error in the style naming to follow Figma best practices.

Figma

Button / [1] / Primary / Large

Drag options to blanks, or click blank then click option'

APrimary Button

Bprimary

CPrimary

DButtons

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces in folder names like 'Primary Button'.

Using lowercase inconsistent casing like 'primary'.

Using plural forms like 'Buttons'.

Use simple and consistent folder names like 'Primary' instead of combining words or using plural forms.

4fill in blank

hard

Fill both blanks to correctly organize and name a shadow style in Figma.

Figma

Effect / [1] / [2]

Drag options to blanks, or click blank then click option'

AShadow

BElevation

CLight

DMedium

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic terms like 'Shadow' as a folder name.

Using color names instead of intensity levels.

Shadow styles are often organized by 'Elevation' and named by intensity like 'Medium' for clarity.

5fill in blank

hard

Fill all three blanks to correctly name and organize a grid style in Figma.

Figma

Layout / [1] / [2] / [3]

Drag options to blanks, or click blank then click option'

AGrid

BColumns

C12

DRows

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Rows' instead of 'Columns' for common grid naming.

Skipping the grid type folder.

Grid styles are organized under 'Layout', then by type like 'Grid', then by structure such as 'Columns' and number like '12'.