Why color communicates meaning in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the fill color of a shape to red in Figma.

Figma

node.fills = [{ type: 'SOLID', color: { r: 1, g: [1], b: 0 } }];

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-1 scale

Setting green to 1 which makes yellow

The green (g) value should be 0 to get pure red color in RGB.

2fill in blank

medium

Complete the code to create a text node with color blue in Figma.

Figma

const text = figma.createText();
text.fills = [{ type: 'SOLID', color: { r: 0, g: 0, b: [1] } }];

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

A255

B0

C0.5

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1

Setting blue to 0 which results in black

Blue color has blue channel set to 1, red and green are 0.

3fill in blank

hard

Fix the error in the code to set a rectangle's fill color to green in Figma.

Figma

const rect = figma.createRectangle();
rect.fills = [{ type: 'SOLID', color: { r: 0, g: [1], b: 0 } }];

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

A0

B255

C1

D-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 which is out of range

Using negative values

Green color uses green channel = 1 in Figma's 0-1 scale.

4fill in blank

hard

Fill both blanks to create a semi-transparent red fill in Figma.

Figma

node.fills = [{ type: 'SOLID', color: { r: [1], g: 0, b: 0 }, opacity: [2] }];

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

A1

B0.5

C0

D0.8

Attempts:

3 left

💡 Hint

Common Mistakes

Setting opacity to 0 which makes it invisible

Using green or blue channel instead of red

Red color uses r=1, and opacity 0.5 makes it semi-transparent.

5fill in blank

hard

Fill all three blanks to create a yellow fill with 80% opacity in Figma.

Figma

node.fills = [{ type: 'SOLID', color: { r: [1], g: [2], b: [3] }, opacity: 0.8 }];

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

A1

B0

C0.5

D0.8

Attempts:

3 left

💡 Hint

Common Mistakes

Setting blue to 1 which makes white

Confusing opacity with color channels

Yellow is red=1, green=1, blue=0. Opacity is set to 0.8 outside the blanks.