Figmabi_tool~8 mins

Image crop and fill modes in Figma - Dashboard Guide

Choose your learning style9 modes available

Learn Why Deep Sheet Try Challenge Scenario Recall Dash

Dashboard Mode - Image crop and fill modes

Goal

Understand how to use image crop and fill modes in Figma to create clear and visually balanced dashboards.

Sample Images

Image Name	Description	Original Size
Sales Chart	Bar chart showing monthly sales	800x600 px
Team Photo	Group photo of sales team	1200x800 px
Logo	Company logo with transparent background	400x400 px
Product Image	Photo of product on white background	1000x1000 px
Background Pattern	Abstract pattern for dashboard background	1920x1080 px

Dashboard Components

KPI Card with Cropped Image: Displays the Team Photo cropped to focus on faces. Crop mode trims edges to fit card size without distortion.
Logo with Fill Mode: The Logo uses fill mode to scale and fill the logo area fully, maintaining aspect ratio and centering the image.
Product Image with Crop Mode: Shows the Product Image cropped to highlight the product center, removing extra white space.
Background Pattern with Fill Mode: The Background Pattern fills the entire dashboard background area, scaling proportionally and cropping edges if needed.
Sales Chart Image: Placed without crop or fill to show original size for clarity.

Dashboard Layout

+--------------------------------------------------+
| Logo (Fill Mode)           | KPI Card (Crop Mode) |
|---------------------------+----------------------|
| Sales Chart (Original)                          |
|------------------------------------------------|
| Product Image (Crop Mode) | Background Pattern   |
|                           | (Fill Mode)          |
+--------------------------------------------------+

Interactivity

Users can toggle between crop and fill modes for images using a control panel. Changing modes updates the image display in KPI cards and product image areas instantly. The background pattern and logo remain fixed in fill mode for consistent branding.

Self Check

If you switch the Product Image from crop mode to fill mode, how does the image display change? Which dashboard components update?

Key Result

Dashboard demonstrating image crop and fill modes in Figma for clear visual presentation.