Image crop and fill modes in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the image fill mode to crop in Figma.

Figma

image.fillMode = '[1]'

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

Astretch

Bcrop

Ctile

Dfit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'stretch' which distorts the image.

Using 'tile' which repeats the image.

Using 'fit' which scales the image to fit without cropping.

Setting fillMode to crop ensures the image is cropped to fit the frame.

2fill in blank

medium

Complete the code to set the image fill mode to fill the frame without distortion.

Figma

image.fillMode = '[1]'

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

Afit

Btile

Ccrop

Dstretch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'crop' which cuts parts of the image.

Using 'stretch' which distorts the image.

Using 'tile' which repeats the image.

Setting fillMode to fit scales the image to fit inside the frame without distortion.

3fill in blank

hard

Fix the error in the code to correctly set the image fill mode to tile.

Figma

image.fillMode = '[1]'

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

Atile

Bstretch

Ccrop

Dfit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fit' which scales the image.

Using 'crop' which cuts the image.

Using 'stretch' which distorts the image.

The tile mode repeats the image to fill the frame.

4fill in blank

hard

Fill both blanks to set the image fill mode to stretch and set the opacity to 50%.

Figma

image.fillMode = '[1]'
image.opacity = [2]

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

Astretch

Bcrop

C0.5

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity value 1 which is fully opaque.

Using fillMode 'crop' or 'fit' instead of 'stretch'.

Setting fillMode to stretch distorts the image to fill the frame. Setting opacity to 0.5 makes the image 50% transparent.

5fill in blank

hard

Fill all three blanks to set the image fill mode to fit, set opacity to 75%, and set the image rotation to 90 degrees.

Figma

image.fillMode = '[1]'
image.opacity = [2]
image.rotation = [3]

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

Acrop

B0.75

C90

Dfit

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity values greater than 1 or less than 0.

Using rotation values other than degrees.

Confusing fill modes like crop and fit.

Setting fillMode to fit scales the image inside the frame without distortion. Opacity 0.75 means 75% visible. Rotation 90 rotates the image clockwise by 90 degrees.