Image import and placement in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import an image into Figma using the menu option.

Figma

Go to the [1] menu and select 'Place Image' to import a picture.

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

AFile

BEdit

CView

DHelp

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing the 'Edit' menu which is for undo/redo actions.

Selecting 'View' which controls the canvas display.

In Figma, images are imported by going to the File menu and choosing 'Place Image'.

2fill in blank

medium

Complete the step to place the imported image onto the canvas.

Figma

After selecting the image, click on the [1] to place it.

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

Atoolbar

Blayers panel

Ccanvas

Dmenu bar

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to place the image in the toolbar or menu bar which are not for placing objects.

Clicking the layers panel which shows object hierarchy but is not for placement.

The canvas is the main area where you place and arrange images and shapes in Figma.

3fill in blank

hard

Fix the error in the instruction to resize the image proportionally.

Figma

Hold the [1] key while dragging a corner handle to keep the image's aspect ratio.

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

ATab

BShift

CAlt

DCtrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using Ctrl or Alt which have different functions in Figma.

Using Tab which switches focus between UI elements.

Holding the Shift key while resizing keeps the image's proportions locked in Figma.

4fill in blank

hard

Fill both blanks to correctly align the image to the center of the frame.

Figma

Select the image, then click the [1] button and the [2] button in the alignment panel.

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

AAlign horizontal centers

BAlign vertical centers

CDistribute horizontal spacing

DDistribute vertical spacing

Attempts:

3 left

💡 Hint

Common Mistakes

Using distribute spacing buttons which space objects evenly but do not center.

Aligning only horizontally or only vertically.

To center an image inside a frame, use Align horizontal centers and Align vertical centers buttons.

5fill in blank

hard

Fill the blank to create a mask from the image and a shape.

Figma

Select the image and shape (shape on top), then right-click the shape and choose [1].

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

AUse as Mask

BMask

CMask with Shape

DMask Group

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing options that do not exist in the right-click menu.

Confusing mask commands with grouping or flattening.

Not ensuring the shape is on top of the image.

In Figma, to create a mask, select the image and shape with the shape on top, right-click the shape and choose Use as Mask.

Practice

1.

What is the first step to add an image to your Figma design?

Choose the correct option.

easy

A. Draw a rectangle and fill it with color

B. Use the 'Place Image' option from the File menu

C. Copy and paste an image from the internet

D. Use the Text tool to write 'Image here'

Solution

1. Step 1: Locate the image import option

   In Figma, images are imported using the 'Place Image' option found in the File menu.

2. Step 2: Use the 'Place Image' option

   Selecting this option allows you to browse and choose an image file to add to your design.

3. Final Answer:

   Use the 'Place Image' option from the File menu -> Option B

4. Quick Check:

   Image import starts with 'Place Image' [OK]

Hint: Always start with 'Place Image' in File menu to import images [OK]

Common Mistakes:

• Trying to paste images directly without importing
• Using shape tools instead of image import
• Assuming text tool can add images

2.

Which of the following is the correct way to place an image on the canvas after importing it in Figma?

easy

A. Double-click the image file in your computer folder

B. Drag the image from the layers panel to the canvas

C. Click anywhere on the canvas to place the image

D. Right-click the canvas and select 'Paste Image'

Solution

1. Step 1: Import the image using 'Place Image'

   After selecting the image file, Figma lets you place it by clicking on the canvas.

2. Step 2: Click on the canvas to place

   Clicking once places the image at that point; you can then move or resize it.

3. Final Answer:

   Click anywhere on the canvas to place the image -> Option C

4. Quick Check:

   Place image by clicking canvas [OK]

Hint: Click on canvas after import to place image quickly [OK]

Common Mistakes:

• Trying to drag images from layers panel before placing
• Double-clicking image files outside Figma
• Using paste option without copying image

3.

After importing and placing an image in Figma, you want to resize it proportionally. Which key should you hold while dragging a corner handle?

medium

A. Shift key

B. Ctrl key

C. Alt key

D. Spacebar

Solution

1. Step 1: Understand resizing behavior

   Dragging a corner handle resizes the image but may distort it if proportions are not locked.

2. Step 2: Hold Shift to keep proportions

   Holding the Shift key while dragging keeps the width and height ratio fixed, resizing proportionally.

3. Final Answer:

   Shift key -> Option A

4. Quick Check:

   Shift locks aspect ratio during resize [OK]

Hint: Hold Shift while resizing to keep image proportions [OK]

Common Mistakes:

• Using Ctrl or Alt which do other actions
• Not holding any key and distorting image
• Pressing Spacebar which moves the canvas

4.

You imported an image but it does not appear on the canvas after clicking to place it. What is the most likely reason?

medium

A. The image was placed outside the visible canvas area

B. The image file format is unsupported

C. You forgot to select the image file before placing

D. The canvas is locked and cannot accept images

Solution

1. Step 1: Check placement location

   If the image is placed outside the visible canvas, it won't be seen even though it exists in the file.

2. Step 2: Verify canvas view and move image

   Zoom out or pan to find the image, then move it inside the visible area.

3. Final Answer:

   The image was placed outside the visible canvas area -> Option A

4. Quick Check:

   Image off-canvas causes invisibility [OK]

Hint: Zoom out to find images placed off-canvas [OK]

Common Mistakes:

• Assuming unsupported format without checking
• Thinking image must be selected again after import
• Believing canvas lock prevents image placement

5.

You want to add a company logo to your BI report in Figma and ensure it fits perfectly inside a 200x100 pixel frame without distortion. What is the best way to do this?

hard

A. Draw a rectangle 200x100 and fill it with the image as a pattern fill

B. Place the image and stretch it to 200x100 pixels without holding any key

C. Place the image and crop it manually without resizing

D. Place the image, resize it holding Shift, then mask it with the 200x100 frame

Solution

1. Step 1: Place and resize image proportionally

   Import the logo and resize it holding Shift to keep proportions within the frame size.

2. Step 2: Use masking with the 200x100 frame

   Create a frame of 200x100 pixels and mask the resized image to fit perfectly without distortion.

3. Final Answer:

   Place the image, resize it holding Shift, then mask it with the 200x100 frame -> Option D

4. Quick Check:

   Resize with Shift + mask for perfect fit [OK]

Hint: Resize with Shift and mask inside frame for perfect fit [OK]

Common Mistakes:

• Stretching image distorts logo
• Using pattern fill which may tile image
• Cropping without resizing causes cut-off