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.

Practice

1. What is the main purpose of using Solid fills in Figma for Business Intelligence visuals?

easy

A. To import external images into the design

B. To create complex gradients and patterns

C. To add a uniform color to shapes or areas for better clarity

D. To add text labels to charts

Solution

1. Step 1: Understand what solid fills do

   Solid fills add a single, uniform color to shapes or areas in a design.

2. Step 2: Identify their use in BI visuals

   They help improve clarity and highlight important parts by using consistent colors.

3. Final Answer:

   To add a uniform color to shapes or areas for better clarity -> Option C

4. Quick Check:

   Solid fills = uniform color [OK]

Hint: Solid fills = one color, simple and clear [OK]

Common Mistakes:

• Confusing solid fills with gradients or patterns
• Thinking solid fills add text or images
• Assuming solid fills create complex designs

2. Which of the following is the correct way to apply a solid fill color to a shape in Figma?

easy

A. Select the shape, go to Fill section, click the color box, and pick a color

B. Right-click the shape and choose 'Add Gradient Fill'

C. Drag and drop an image onto the shape

D. Use the Text tool to type the color name inside the shape

Solution

1. Step 1: Locate the Fill section in Figma

   In Figma, the Fill section is where you add or change colors for shapes.

2. Step 2: Apply solid fill correctly

   Select the shape, click the color box in Fill, and choose the desired color to apply a solid fill.

3. Final Answer:

   Select the shape, go to Fill section, click the color box, and pick a color -> Option A

4. Quick Check:

   Fill section + color box = solid fill [OK]

Hint: Fill section + color picker = solid fill [OK]

Common Mistakes:

• Choosing gradient fill instead of solid fill
• Trying to add images instead of colors
• Using text tool to change color

3. Consider a rectangle shape in Figma with a solid fill color set to #FF0000 (red). If you change the fill color to #00FF00 (green), what will be the visible color of the rectangle?

medium

A. Red

B. Green

C. Yellow

D. No color (transparent)

Solution

1. Step 1: Understand fill color change effect

   Changing the fill color replaces the old color with the new one on the shape.

2. Step 2: Apply the new color #00FF00

   The rectangle's fill changes from red (#FF0000) to green (#00FF00), so it will appear green.

3. Final Answer:

   Green -> Option B

4. Quick Check:

   Fill color change = new color visible [OK]

Hint: Last fill color set is what you see [OK]

Common Mistakes:

• Thinking colors mix to create yellow
• Assuming old color stays visible
• Believing fill becomes transparent

4. You applied a solid fill to a shape in Figma, but the color does not appear. What is the most likely reason?

medium

A. The fill opacity is set to 0%

B. The shape is locked

C. The fill color is set to black

D. The shape has no stroke

Solution

1. Step 1: Check fill opacity setting

   If fill opacity is 0%, the fill color is fully transparent and won't show.

2. Step 2: Confirm other options

   Locking a shape or having no stroke does not hide fill color; black color is visible.

3. Final Answer:

   The fill opacity is set to 0% -> Option A

4. Quick Check:

   Opacity 0% = invisible fill [OK]

Hint: Check opacity if fill color is invisible [OK]

Common Mistakes:

• Confusing stroke with fill visibility
• Assuming locked shape hides fill
• Thinking black color is invisible

5. You want to highlight a key metric on a BI dashboard using Figma. Which approach best uses solid fills to improve readability and focus?

hard

A. Remove all fills and use only outlines around the metric

B. Use multiple gradient fills on the metric background

C. Add a solid fill with the same color as the dashboard background

D. Apply a bright solid fill color to the metric's background and a contrasting color to the text

Solution

1. Step 1: Understand highlighting with solid fills

   Using a bright solid fill behind the metric draws attention and improves readability.

2. Step 2: Ensure text contrast

   Applying a contrasting text color ensures the metric is easy to read against the fill.

3. Step 3: Evaluate other options

   Gradients can distract, same color fill hides metric, outlines alone don't highlight well.

4. Final Answer:

   Apply a bright solid fill color to the metric's background and a contrasting color to the text -> Option D

5. Quick Check:

   Bright fill + contrast text = highlight [OK]

Hint: Bright fill + contrast text = clear highlight [OK]

Common Mistakes:

• Using gradients that reduce focus
• Matching fill to background color
• Relying on outlines without fill