Export settings and scales in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI report designer using Figma to create visuals for your team.

📋 Request: Your manager wants you to export dashboard visuals in different sizes and formats for presentations and web use.

📊 Data: You have several dashboard frames in Figma with charts and KPIs. Each frame needs to be exported in PNG and PDF formats at 1x, 2x, and 3x scales.

🎯 Deliverable: Exported files of each dashboard frame in PNG and PDF formats at the specified scales, named clearly for easy identification.

Sample Data

Frame Name	Content	Required Formats	Scales
Sales Overview	Bar chart, KPIs	PNG, PDF	1x, 2x, 3x
Monthly Trends	Line chart	PNG, PDF	1x, 2x, 3x
Region Comparison	Map, Pie chart	PNG, PDF	1x, 2x, 3x

1

Step 1: Select the first dashboard frame named 'Sales Overview' in Figma.

Click on the frame in the layers panel or canvas.

Expected Result

'Sales Overview' frame is highlighted and ready for export.

2

Step 2: Open the export settings panel for the selected frame.

In the right sidebar, scroll to the 'Export' section and click the '+' button to add export settings.

Expected Result

Export options appear with default 1x scale and PNG format.

3

Step 3: Set export formats and scales for 'Sales Overview'.

Add export settings for PNG at 1x, 2x, and 3x scales. Then add export settings for PDF at 1x, 2x, and 3x scales.

Expected Result

Six export settings listed: PNG @1x, PNG @2x, PNG @3x, PDF @1x, PDF @2x, PDF @3x.

4

Step 4: Export the 'Sales Overview' frame with all settings.

Click the 'Export Sales Overview' button at the bottom of the export panel.

Expected Result

Six files exported with names like 'Sales [e-mail]', 'Sales [e-mail]'.

5

Step 5: Repeat steps 1-4 for the 'Monthly Trends' frame.

Select 'Monthly Trends' frame, set export formats and scales as before, then export.

Expected Result

Six files exported for 'Monthly Trends' frame with correct naming and formats.

6

Step 6: Repeat steps 1-4 for the 'Region Comparison' frame.

Select 'Region Comparison' frame, set export formats and scales as before, then export.

Expected Result

Six files exported for 'Region Comparison' frame with correct naming and formats.

7

Step 7: Verify all exported files are correctly named and sized.

Check the export folder for files named with frame name, scale, and format.

Expected Result

All 18 files (3 frames x 6 exports each) are present with correct names and sizes.

Final Result

Dashboard Export Summary
-------------------------
| Frame Name       | Format | Scale |
|------------------|--------|-------|
| Sales Overview   | PNG    | 1x    |
| Sales Overview   | PNG    | 2x    |
| Sales Overview   | PNG    | 3x    |
| Sales Overview   | PDF    | 1x    |
| Sales Overview   | PDF    | 2x    |
| Sales Overview   | PDF    | 3x    |
| Monthly Trends   | PNG    | 1x    |
| Monthly Trends   | PNG    | 2x    |
| Monthly Trends   | PNG    | 3x    |
| Monthly Trends   | PDF    | 1x    |
| Monthly Trends   | PDF    | 2x    |
| Monthly Trends   | PDF    | 3x    |
| Region Comparison| PNG    | 1x    |
| Region Comparison| PNG    | 2x    |
| Region Comparison| PNG    | 3x    |
| Region Comparison| PDF    | 1x    |
| Region Comparison| PDF    | 2x    |
| Region Comparison| PDF    | 3x    |

✓Exporting at multiple scales ensures visuals look sharp on different screen resolutions.

✓Using both PNG and PDF formats covers needs for presentations and print/web use.

✓Consistent naming helps quickly identify files for each dashboard frame and scale.

Bonus Challenge

Automate the export process using Figma plugins or API to export all frames with required settings in one click.

Show Hint

Explore Figma plugins like 'Batch Export' or use Figma's REST API to script exports.