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.

Practice

1. What does the scale option do when exporting an image in Figma?

easy

A. It compresses the image to reduce file size.

B. It changes the file format of the exported image.

C. It changes the image size by multiplying dimensions without losing quality.

D. It adds a suffix to the file name automatically.

Solution

1. Step 1: Understand scale in export context

   The scale option multiplies the width and height of the image by the chosen factor.

2. Step 2: Effect on image quality

   Scaling up or down keeps the image quality sharp by adjusting pixel density accordingly.

3. Final Answer:

   It changes the image size by multiplying dimensions without losing quality. -> Option C

4. Quick Check:

   Scale adjusts size, not format or compression [OK]

Hint: Scale multiplies size, not format or compression [OK]

Common Mistakes:

• Confusing scale with file format change
• Thinking scale compresses image
• Assuming scale adds suffix automatically

2. Which of the following is the correct way to set export scale to 2x in Figma's export settings?

easy

A. Set scale to 3

B. Set scale to 0.5

C. Set scale to 1

D. Set scale to 2

Solution

1. Step 1: Identify scale factor for 2x export

   2x means doubling the size, so scale must be set to 2.

2. Step 2: Verify other options

   0.5 halves size, 1 keeps original size, 3 triples size.

3. Final Answer:

   Set scale to 2 -> Option D

4. Quick Check:

   2x scale means scale = 2 [OK]

Hint: 2x scale means set scale value to 2 [OK]

Common Mistakes:

• Setting scale to 0.5 for 2x export
• Confusing scale 1 as 2x
• Using scale 3 instead of 2

3. If you export an image at scale 3 with suffix @3x, what will be the effect on the exported file?

medium

A. The image will be three times larger and file name will include '@3x'.

B. The image will be smaller and file name will include '@3x'.

C. The image size stays the same but file name changes to '@3x'.

D. The image will be three times larger but file name stays unchanged.

Solution

1. Step 1: Understand scale 3 effect

   Scale 3 multiplies image dimensions by 3, making it larger.

2. Step 2: Understand suffix usage

   Suffix '@3x' is added to the file name to indicate scale factor.

3. Final Answer:

   The image will be three times larger and file name will include '@3x'. -> Option A

4. Quick Check:

   Scale 3 enlarges image; suffix labels file [OK]

Hint: Scale changes size; suffix changes file name [OK]

Common Mistakes:

• Thinking suffix changes image size
• Assuming scale 3 shrinks image
• Ignoring suffix in file name

4. You set export scale to 2 and suffix to @2x but the exported file name does not include the suffix. What is the likely cause?

medium

A. Suffix field was left empty or not saved.

B. Scale must be set to 1 for suffix to appear.

C. File format does not support suffixes.

D. Export settings do not allow suffixes with scale.

Solution

1. Step 1: Check suffix field usage

   If suffix is empty or changes not saved, it won't appear in file name.

2. Step 2: Verify scale and format settings

   Scale 2 supports suffix; file formats support suffixes; export allows suffixes with scale.

3. Final Answer:

   Suffix field was left empty or not saved. -> Option A

4. Quick Check:

   Suffix must be entered and saved to appear [OK]

Hint: Always save suffix text to see it in file name [OK]

Common Mistakes:

• Thinking scale disables suffix
• Believing file format blocks suffix
• Not saving suffix after typing

5. You need to export icons for web at 1x, 2x, and 3x scales with clear file names. Which export settings combination is best?

hard

A. Export three times with scale 1 and suffixes '1x', '2x', '3x'.

B. Export three times with scales 1, 2, 3 and suffixes '', '@2x', '@3x' respectively.

C. Export once at scale 3 with suffix '@3x' and rename files manually.

D. Export once at scale 1 with no suffix and resize files later.

Solution

1. Step 1: Understand scale and suffix matching

   Each scale should have matching suffix to identify size clearly.

2. Step 2: Evaluate options

   Export three times with scales 1, 2, 3 and suffixes '', '@2x', '@3x' respectively, exports at correct scales with proper suffixes automatically. Others either skip scales or mismatch suffixes.

3. Final Answer:

   Export three times with scales 1, 2, 3 and suffixes '', '@2x', '@3x' respectively. -> Option B

4. Quick Check:

   Match scale and suffix for clarity [OK]

Hint: Match scale with suffix for clear file names [OK]

Common Mistakes:

• Exporting once and renaming manually
• Using wrong suffix for scale
• Exporting all at scale 1 only