Eyedropper tool in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to activate the eyedropper tool in Figma.

Figma

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

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

AselectColor

BpickColor

CcolorPicker

Deyedropper

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not exist in Figma API.

Confusing eyedropper with colorPicker.

The eyedropper() function activates the eyedropper tool to pick colors in Figma.

2fill in blank

medium

Complete the code to store the color picked by the eyedropper tool.

Figma

const pickedColor = await figma.[1]();

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

ApickFill

BpickColor

Ceyedropper

DselectFill

Attempts:

3 left

💡 Hint

Common Mistakes

Using synchronous functions instead of awaiting the eyedropper.

Using incorrect function names.

The eyedropper() function returns a promise that resolves to the color picked.

3fill in blank

hard

Fix the error in the code to correctly apply the picked color to a rectangle's fill.

Figma

rectangle.fills = [{ type: 'SOLID', color: [1] }];

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

ApickedColor

BpickedColor.rgb

CpickedColor.hex

DpickedColor.color

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access non-existent properties like rgb or hex.

Passing a string instead of a color object.

The eyedropper returns a color object compatible with the fill color property, so use pickedColor directly.

4fill in blank

hard

Fill both blanks to create a function that picks a color and applies it to a selected shape.

Figma

async function applyColor() {
  const color = await figma.[1]();
  figma.currentPage.selection[0].fills = [{ type: 'SOLID', color: [2] }];
}

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

Aeyedropper

BpickedColor

Ccolor

DpickColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched variable names.

Using incorrect function names.

The function eyedropper() picks the color, which is stored in color and then applied.

5fill in blank

hard

Fill all three blanks to pick a color, check if a shape is selected, and apply the color.

Figma

async function pickAndApply() {
  if (figma.currentPage.selection.length === [1]) {
    const [2] = await figma.[3]();
    figma.currentPage.selection[0].fills = [{ type: 'SOLID', color: pickedColor }];
  }
}

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

A0

B1

CpickedColor

Deyedropper

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for zero selection instead of one.

Using wrong variable names.

Using wrong function names.

You check if exactly one shape is selected (1), then pick the color with eyedropper() and store it in pickedColor.