Export settings and scales in Figma - Dashboard Guide

Dashboard Mode - Export settings and scales

Goal

Understand how to export design assets from Figma using different settings and scales to get the right size and quality for your project.

Sample Data: Export Settings

Asset Name	Format	Scale	Suffix	Export Size (px)
Logo	PNG	1x	_1x	100 x 100
Logo	PNG	2x	_2x	200 x 200
Icon	SVG	1x		64 x 64
Button	JPG	1x		150 x 50
Button	JPG	3x	_3x	450 x 150

Dashboard Components

• KPI Card: Shows total number of assets to export (5 assets).
• Table: Lists assets with their export format, scale, suffix, and pixel size.
• Bar Chart: Visualizes export sizes by asset and scale (width in pixels).

Dashboard Layout

+----------------------+-----------------------+
|      KPI Card        |       Bar Chart       |
|  (Total Assets: 5)   |  (Width in Pixels)    |
+----------------------+-----------------------+
|                  Export Settings Table           |
|                  (Asset details)                  |
+--------------------------------------------------+

Interactivity

Filter by asset name (Logo, Icon, Button) updates the table and bar chart to show only selected assets. Changing format filter updates the table and chart to show only that format's exports.

Self Check

If you add a filter for Format = PNG, which components update and what do they show?

• The table updates to show only Logo assets with PNG format at 1x and 2x scales.
• The bar chart updates to show bars for Logo PNG export sizes (100px and 200px widths).
• The KPI card updates to show total assets as 2.

Key Result

Dashboard showing Figma export assets with formats, scales, and pixel sizes for design export planning.