Solid fills in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a solid fill color in Figma.

Figma

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

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

AVIDEO

BGRADIENT_LINEAR

CIMAGE

DSOLID

Attempts:

3 left

💡 Hint

Common Mistakes

Using gradient or image types instead of 'SOLID' for a solid color fill.

In Figma, to apply a solid fill, the type must be set to "SOLID".

2fill in blank

medium

Complete the code to set the fill color to blue using RGB values.

Figma

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

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

A1

B0

C0.5

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1 for color values.

Setting red or green values incorrectly for blue color.

Blue color in RGB has red = 0, green = 0, and blue = 1 in Figma's 0-1 scale.

3fill in blank

hard

Fix the error in the code to correctly apply a semi-transparent red fill.

Figma

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

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

Aopacity

Balpha

Ctransparency

Dtranslucency

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alpha' or 'transparency' instead of 'opacity'.

Placing opacity inside the color object instead of alongside it.

The correct property to set transparency in Figma fills is opacity.

4fill in blank

hard

Fill both blanks to create a green solid fill with full opacity.

Figma

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

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

ASOLID

B1

C0.5

DGRADIENT_LINEAR

Attempts:

3 left

💡 Hint

Common Mistakes

Using gradient type instead of solid.

Setting green value less than 1 for full green.

Use 'SOLID' for solid fills and set green value to 1 for full green color.

5fill in blank

hard

Fill all three blanks to create a yellow solid fill with 75% opacity.

Figma

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

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

ASOLID

B1

C0.5

DGRADIENT_RADIAL

Attempts:

3 left

💡 Hint

Common Mistakes

Using gradient types instead of solid.

Setting red or green values incorrectly for yellow.

Confusing opacity value scale.

Yellow is made by red=1 and green=1 with blue=0. Use 'SOLID' type and set opacity to 0.75.