Multiple fills on one element in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a second fill to the selected element in Figma.

Figma

figma.currentPage.selection[0].fills = [...figma.currentPage.selection[0].fills, [1]];

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

Afigma.createFrame()

Bfigma.createRectangle()

Cfigma.createPaint()

Dfigma.createText()

Attempts:

3 left

💡 Hint

Common Mistakes

Using frame or shape creation methods instead of paint objects.

Trying to assign fills directly without creating a paint object.

To add a new fill, you use figma.createPaint() which creates a paint object for fills.

2fill in blank

medium

Complete the code to set the opacity of the second fill to 50%.

Figma

const fills = figma.currentPage.selection[0].fills.slice(); fills[1].opacity = [1]; figma.currentPage.selection[0].fills = fills;

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

A0.5

B1

C50

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 50 instead of 0.5 for opacity.

Using integer values greater than 1.

Opacity values range from 0 to 1, so 50% opacity is 0.5.

3fill in blank

hard

Fix the error in the code to correctly assign multiple fills to the element.

Figma

figma.currentPage.selection[0].fills = [1];

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

A{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }

B[{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }]

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a single object instead of an array.

Assigning null or undefined.

The fills property expects an array of paint objects, so it must be wrapped in square brackets.

4fill in blank

hard

Fill in the blank to create a linear gradient fill and assign it as the second fill.

Figma

const gradientFill = { type: [1], gradientStops: [], gradientTransform: [[1, 0, 0], [0, 1, 0]] }; const fills = figma.currentPage.selection[0].fills.slice(); fills[1] = gradientFill; figma.currentPage.selection[0].fills = fills;

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

A'EMOJI'

B'SOLID'

C'IMAGE'

D'GRADIENT_LINEAR'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'SOLID' or other fill types instead of 'GRADIENT_LINEAR'.

To create a linear gradient fill, the type must be 'GRADIENT_LINEAR'.

5fill in blank

hard

Fill all three blanks to create a new solid fill with red color and add it as the first fill.

Figma

const newFill = { type: [1], color: { r: [2], g: [3], b: 0 } }; const fills = figma.currentPage.selection[0].fills.slice(); fills.unshift(newFill); figma.currentPage.selection[0].fills = fills;

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

A'SOLID'

B1

C0

D'GRADIENT_LINEAR'

Attempts:

3 left

💡 Hint

Common Mistakes

Using gradient type instead of solid.

Mixing up color channel values.

The fill type for solid color is 'SOLID'. Red color has r=1, g=0, b=0.