Color styles in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new color style named "Primary Blue".

Figma

const primaryBlue = figma.createPaintStyle();
primaryBlue.name = [1];

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

APrimary Blue

B"Primary Blue"

C'Primary Blue'

DPrimaryBlue

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the style name.

Using variable names without quotes.

You need to assign the name as a string with quotes. So, "Primary Blue" is correct.

2fill in blank

medium

Complete the code to set the color of a paint style to pure red.

Figma

const redPaint = { r: [1], g: 0, b: 0 };
style.paints = [redPaint];

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

A100

B255

C1

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1 for RGB values.

Setting green or blue to non-zero values.

Figma uses normalized RGB values between 0 and 1, so pure red is r: 1.

3fill in blank

hard

Fix the error in setting the paint style's paints array.

Figma

style.paints = [1];

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

A[redPaint]

B{ redPaint }

CredPaint

D(redPaint)

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a single object instead of an array.

Using parentheses or curly braces instead of square brackets.

The paints property expects an array of paint objects, so use [redPaint].

4fill in blank

hard

Fill both blanks to create a new color style with a blue color.

Figma

const bluePaint = { r: [1], g: [2], b: 1 };
const blueStyle = figma.createPaintStyle();

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

A0

B1

C0.5

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 0 or 1.

Setting green or red to non-zero values.

Pure blue means red and green are 0, blue is 1.

5fill in blank

hard

Fill all three blanks to create a green color style and assign it correctly.

Figma

const greenPaint = { r: [1], g: [2], b: [3] };
greenStyle.paints = [greenPaint];

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

A0

B1

C0.5

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1 or 0.

Mixing up the RGB channels.

Pure green means red and blue are 0, green is 1.