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.

Practice

1. What does applying multiple fills on one element in Figma allow you to do?

easy

A. Layer different colors and effects on the same shape

B. Create multiple separate shapes automatically

C. Change the shape's size dynamically

D. Export the element as multiple files

Solution

1. Step 1: Understand the purpose of multiple fills

   Multiple fills let you add several colors or effects stacked on one shape.

2. Step 2: Compare options

   Only layering colors and effects matches the feature; others describe unrelated functions.

3. Final Answer:

   Layer different colors and effects on the same shape -> Option A

4. Quick Check:

   Multiple fills = layering colors/effects [OK]

Hint: Multiple fills stack colors/effects on one shape [OK]

Common Mistakes:

• Thinking multiple fills create multiple shapes
• Confusing fills with resizing or exporting
• Assuming fills change shape geometry

2. Which of the following is the correct way to add multiple fills to a shape in Figma?

easy

A. Right-click the shape and select 'Duplicate Fill'

B. Select the shape, click '+' in the Fill section, then choose colors

C. Drag and drop multiple images directly onto the shape

D. Use the Text tool to add fills

Solution

1. Step 1: Recall how to add fills in Figma

   You add fills by selecting the shape and clicking '+' in the Fill panel.

2. Step 2: Evaluate other options

   Duplicating fills, dragging images, or using Text tool are incorrect for adding multiple fills.

3. Final Answer:

   Select the shape, click '+' in the Fill section, then choose colors -> Option B

4. Quick Check:

   Add fill = select shape + '+' in Fill [OK]

Hint: Add fills via '+' button in Fill panel [OK]

Common Mistakes:

• Trying to duplicate fills instead of adding new ones
• Dragging images without using fill options
• Using unrelated tools like Text for fills

3. Given a shape with two fills: a red solid fill at 100% opacity and a blue solid fill at 50% opacity on top, what color will the shape mostly appear?

medium

A. Purple (blend of red and blue)

B. Solid red

C. Solid blue at half transparency

D. Solid blue at full opacity

Solution

1. Step 1: Understand fill layering and opacity

   The top fill is blue at 50% opacity over a red fill at 100% opacity.

2. Step 2: Visualize color blending

   Blue at half opacity blends with red underneath, creating purple.

3. Final Answer:

   Purple (blend of red and blue) -> Option A

4. Quick Check:

   Top fill opacity blends colors = purple [OK]

Hint: Top fill opacity blends colors underneath [OK]

Common Mistakes:

• Ignoring opacity and expecting solid top color
• Assuming no blending occurs
• Confusing opacity with fill order

4. You added multiple fills to a shape but only the bottom fill color is visible. What is the most likely reason?

medium

A. The shape is locked and cannot show multiple fills

B. Figma does not support multiple fills

C. The top fills have 0% opacity or are hidden

D. You must merge fills manually to see them

Solution

1. Step 1: Check fill visibility and opacity

   If top fills have 0% opacity or are toggled off, only bottom fill shows.

2. Step 2: Eliminate other options

   Figma supports multiple fills; shapes can be locked but still show fills; no manual merge needed.

3. Final Answer:

   The top fills have 0% opacity or are hidden -> Option C

4. Quick Check:

   Invisible top fills cause bottom fill visibility [OK]

Hint: Check top fill opacity and visibility toggles [OK]

Common Mistakes:

• Thinking multiple fills are unsupported
• Assuming shape lock hides fills
• Believing fills must be merged manually

5. You want to create a button with a gradient fill over a solid color fill and an image fill on top. How should you arrange the fills for best visual effect in Figma?

hard

A. All fills stacked randomly; order does not matter

B. Solid color fill on top, image fill in the middle, gradient fill at bottom

C. Gradient fill on top, solid color fill in the middle, image fill at bottom

D. Image fill on top, gradient fill in the middle, solid color fill at bottom

Solution

1. Step 1: Understand fill layering logic

   Top fills appear above lower fills visually, so image should be on top to be visible.

2. Step 2: Arrange gradient and solid fills

   Gradient looks best over solid color, so gradient goes above solid color.

3. Step 3: Confirm fill order

   Order: image (top), gradient (middle), solid color (bottom) for correct layering.

4. Final Answer:

   Image fill on top, gradient fill in the middle, solid color fill at bottom -> Option D

5. Quick Check:

   Fill order controls layering = image > gradient > solid [OK]

Hint: Put image top, gradient middle, solid bottom for layering [OK]

Common Mistakes:

• Placing solid color on top hiding other fills
• Ignoring fill order effects
• Assuming fill order does not affect appearance