Image import and placement in Figma - Dashboard Guide

Dashboard Mode - Image import and placement

Dashboard Goal

This dashboard answers: How to import and place images effectively in a BI dashboard design using Figma?

Sample Data

Image Name	File Type	Size (KB)	Placement Area
Company Logo	PNG	120	Top Left Header
Product Icon	SVG	45	Sidebar
Background Pattern	JPG	350	Dashboard Background
Profile Picture	PNG	80	User Info Card
Chart Icon	SVG	30	Chart Title

Dashboard Components

• KPI Card - Company Logo: Imported PNG image placed at the top left corner of the header frame. Use File > Place Image or drag-drop. Resize to 100x40 px maintaining aspect ratio.
• Sidebar Icon - Product Icon: SVG icon imported and placed in the sidebar menu. Use Import then Vector tools to adjust size to 24x24 px.
• Background Image - Pattern: JPG image imported and set as background fill of the main dashboard frame. Use Fill > Image and set opacity to 10% for subtle effect.
• User Info Card - Profile Picture: PNG image imported and masked into a circle shape of 60x60 px. Use Mask feature for neat placement.
• Chart Title Icon: SVG icon imported and placed left of the chart title text. Sized at 20x20 px for visual balance.

Dashboard Layout

+--------------------------------------------------+
| [Company Logo]                       [User Info] |
|                                                  |
|  +----------------+  +------------------------+  |
|  | Sidebar        |  |      Main Dashboard      |  |
|  | [Product Icon] |  |  [Background Pattern]    |  |
|  |                |  |  +--------------------+  |  |
|  |                |  |  | [Chart Icon] Title  |  |  |
|  +----------------+  |  |                    |  |  |
|                      |  |      Chart Area     |  |  |
|                      |  |                    |  |  |
|                      |  +--------------------+  |  |
+--------------------------------------------------+

Interactivity

Image placement is static but can be adjusted by selecting the image layer in Figma. Users can resize, move, or replace images. The background image opacity can be changed to affect dashboard readability. Masked images maintain shape when resized. Icons in sidebar and chart update visually when the dashboard frame is resized to keep alignment.

Self Check

If you replace the Product Icon SVG with a new image, which components update visually? Answer: The sidebar icon updates immediately. Other images remain unchanged.

Key Result

A Figma dashboard showing how to import and place images like logos, icons, and backgrounds for a clean BI dashboard design.