Image import and placement in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business intelligence analyst creating a sales dashboard in Figma.

📋 Request: Your manager wants you to add the company logo and product images to the dashboard to make it visually appealing and easy to recognize.

📊 Data: You have access to the company logo file and several product images saved on your computer.

🎯 Deliverable: A Figma dashboard design with the company logo placed at the top left corner and product images arranged neatly below the sales charts.

Sample Data

Image Name	File Type	Suggested Placement
CompanyLogo.png	PNG	Top left corner of dashboard
ProductA.jpg	JPG	Below sales chart 1
ProductB.jpg	JPG	Below sales chart 2
ProductC.jpg	JPG	Below sales chart 3

1

Step 1: Open your Figma dashboard file where you want to add images.

No formula needed. Just open the Figma file.

Expected Result

Dashboard file is open and ready for editing.

2

Step 2: Import the company logo image into Figma.

Use the menu: File > Place Image, then select 'CompanyLogo.png' from your computer.

Expected Result

Company logo image appears on the canvas.

3

Step 3: Place the company logo at the top left corner of the dashboard frame.

Drag the logo image to the top left corner and align it with the frame edges.

Expected Result

Company logo is positioned neatly at the top left corner.

4

Step 4: Import product images into Figma.

Use File > Place Image, select 'ProductA.jpg', 'ProductB.jpg', and 'ProductC.jpg' files.

Expected Result

All three product images appear on the canvas.

5

Step 5: Arrange product images below their respective sales charts.

Drag each product image below the corresponding sales chart area, leaving equal spacing between images.

Expected Result

Product images are neatly placed below sales charts with consistent spacing.

6

Step 6: Resize images if needed to maintain dashboard balance and clarity.

Select each image and adjust size using corner handles, keeping aspect ratio locked.

Expected Result

Images are sized appropriately without distortion.

7

Step 7: Check alignment and spacing for visual balance and accessibility.

Use Figma alignment tools and grid to ensure images are aligned and spaced evenly.

Expected Result

Dashboard looks balanced and images are easy to see.

Final Result

Top Left

↓

ProductA Image

↓

ProductB Image

↓

ProductC Image

✓Company logo is clearly visible at the top left, reinforcing brand identity.

✓Product images below sales charts help viewers connect data with products.

✓Images are well sized and aligned, making the dashboard visually appealing and easy to understand.

Bonus Challenge

Add image descriptions as alt text or labels for accessibility.

Show Hint

Use Figma's accessibility features or add text labels near images describing their content.