Export settings and scales in Figma - Deep Dive

Overview - Export settings and scales

What is it?

Export settings and scales in Figma let you save your designs as image files or other formats with specific sizes and quality. You can choose the file type, resolution scale, and other options to control how your design looks outside Figma. This helps you prepare images for websites, apps, or presentations exactly as needed.

Why it matters

Without export settings and scales, your designs might be saved at the wrong size or quality, causing blurry images or files too large to use efficiently. Proper export controls ensure your visuals look sharp and load fast, improving user experience and saving time in design handoffs.

Where it fits

Before learning export settings, you should understand basic Figma design and layers. After mastering export options, you can explore advanced image optimization and integration with development workflows.

Mental Model

Core Idea

Export settings and scales control how your design is saved as an image, adjusting size and quality to fit different uses.

Think of it like...

It's like printing a photo: you choose the paper size and print quality to get the best result for a small wallet photo or a large poster.

┌─────────────────────────────┐
│       Figma Design          │
├─────────────┬───────────────┤
│ Export Type │ PNG, JPG, SVG  │
│ Scale       │ 1x, 2x, 3x     │
│ Quality     │ Low to High    │
└─────────────┴───────────────┘
         ↓ Exported Image
  (Sized and formatted file)

Build-Up - 6 Steps

1

Foundation

Understanding basic export options

Concept: Learn what export settings are and the common file types available.

In Figma, you can export your design frames or layers as PNG, JPG, SVG, or PDF. Each format suits different needs: PNG for transparent images, JPG for photos, SVG for scalable vectors, and PDF for documents. You select what to export by clicking the Export button in the right panel.

Result

You get a file saved on your computer in the chosen format.

Knowing the basic export formats helps you pick the right file type for your project’s needs.

2

Foundation

Choosing export scale factors

Concept: Understand how scale affects the size and resolution of exported images.

Figma lets you export images at different scales like 1x, 2x, or 3x. A 2x scale means the image is twice as large in pixels, making it sharper on high-resolution screens. You can type custom scales too, like 0.5x for smaller images.

Result

Your exported image has the pixel dimensions multiplied by the scale factor.

Scale controls image sharpness and file size, balancing quality and performance.

3

Intermediate

Using multiple export settings simultaneously

🤔Before reading on: do you think you can export one design in several sizes at once? Commit to yes or no.

Concept: Learn how to set multiple export options for one design to get different files in one step.

You can add multiple export settings to a single layer or frame. For example, export the same design at 1x, 2x, and 3x scales simultaneously. When you export, Figma creates all these files at once, saving time and ensuring consistency.

Result

You receive multiple files with different sizes from one export action.

Exporting multiple scales at once streamlines preparing assets for different devices.

4

Intermediate

Adjusting export quality for JPG images

🤔Before reading on: does lowering JPG quality always reduce file size significantly? Commit to yes or no.

Concept: Explore how JPG quality settings affect image appearance and file size.

When exporting JPGs, you can set quality from 0% to 100%. Lower quality reduces file size but can cause visible blur or artifacts. Higher quality keeps details but creates larger files. Choose the right balance based on where the image will be used.

Result

The exported JPG file varies in size and clarity depending on quality setting.

Understanding JPG quality helps optimize images for web speed without losing too much detail.

5

Advanced

Exporting SVG with or without outlines

🤔Before reading on: do you think SVG exports always keep text editable? Commit to yes or no.

Concept: Learn how SVG export options affect vector shapes and text handling.

When exporting SVGs, you can choose to outline text, converting it to shapes. Outlined text looks consistent everywhere but is no longer editable as text. Leaving text unoutlined keeps it selectable but may render differently on some devices.

Result

SVG files differ in editability and appearance depending on outline choice.

Knowing SVG export details ensures your vectors behave correctly in different environments.

6

Expert

Automating export scales with plugins and APIs

🤔Before reading on: can Figma export scales be fully automated without manual clicks? Commit to yes or no.

Concept: Discover how to use Figma plugins and API to automate exporting multiple scales and formats.

Advanced users use Figma plugins or the Figma API to script exports. This allows batch exporting many files with custom scales and settings automatically, integrating with development pipelines. It saves time and reduces human error in large projects.

Result

Exports happen automatically with precise control, improving workflow efficiency.

Automation of exports is key for scaling design handoffs in professional environments.

Under the Hood

Figma stores designs as vector and raster data internally. When exporting, it rasterizes vector layers at the chosen scale by multiplying pixel dimensions. For raster images, it resamples pixels to match scale and quality settings. Export formats encode this data differently: PNG and JPG compress pixels, SVG exports vector instructions, and PDF packages pages. The export engine balances file size and fidelity based on user settings.

Why designed this way?

Figma’s export system was designed to support multiple device resolutions and use cases, from web to print. Allowing scale factors and quality settings gives designers control over sharpness and file size. Supporting multiple formats meets diverse needs. Automation options evolved to handle growing project complexity and team workflows.

┌───────────────┐
│  Figma Design │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Export Engine │
├───────────────┤
│ Rasterize at  │
│ chosen scale  │
│ Compress/Save │
│ in format     │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Exported File │
│ PNG/JPG/SVG   │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does exporting at 2x scale always double the file size? Commit to yes or no.

Common Belief: Exporting at 2x scale doubles the file size exactly.

Reality: File size increases but not always exactly double; it depends on image complexity and compression.

Why it matters: Expecting exact file size doubling can mislead storage and bandwidth planning.

Quick: Does exporting SVG always keep text editable? Commit to yes or no.

Common Belief: SVG exports always keep text as editable text.

Reality: Text can be converted to outlines, making it uneditable but more consistent visually.

Why it matters: Not knowing this can cause problems if text needs editing after export.

Quick: Does lowering JPG quality always make images look bad? Commit to yes or no.

Common Belief: Lower JPG quality always causes noticeable image degradation.

Reality: Small quality reductions can reduce file size significantly with minimal visible loss.

Why it matters: Avoiding quality adjustments wastes opportunities to optimize file size.

Quick: Can you export multiple scales in one step? Commit to yes or no.

Common Belief: You must export each scale separately, one at a time.

Reality: Figma allows multiple export scales set on one layer and exports all at once.

Why it matters: Not using this feature wastes time and risks inconsistent exports.

Expert Zone

1

Export scales affect not just pixel size but also how effects like shadows and strokes render, impacting visual sharpness.

2

SVG exports can include hidden metadata that affects file size and compatibility; cleaning SVGs post-export is common in production.

3

Automated export workflows often integrate with version control and CI/CD pipelines to keep design assets synchronized with code.

When NOT to use

Export settings and scales are not suitable when you need fully editable source files; in that case, share Figma files or use design tokens. For complex animations or interactive prototypes, use specialized export tools or code exports instead.

Production Patterns

Design teams set standardized export presets for consistent asset delivery. Developers use automated scripts to pull exports from Figma API, ensuring up-to-date assets in apps. Designers export multiple scales for responsive design and test on various devices.

Connections

Responsive Web Design

Builds-on

Understanding export scales helps create images that look sharp on different screen sizes and resolutions in responsive websites.

Image Compression Algorithms

Same pattern

Export quality settings relate directly to compression techniques that balance file size and visual quality.

Printing and Publishing

Builds-on

Export scales in digital design mirror print resolution choices, linking screen and print workflows.

Common Pitfalls

#1 Exporting images only at 1x scale for high-resolution screens.

Wrong approach:

Export settings: Format=PNG, Scale=1x

Correct approach:

Export settings: Format=PNG, Scale=2x or 3x

Root cause:

Not understanding that higher scale exports are needed for sharpness on modern devices.

#2 Exporting JPG images at 100% quality unnecessarily increasing file size.

Wrong approach:

Export settings: Format=JPG, Quality=100%

Correct approach:

Export settings: Format=JPG, Quality=80%

Root cause:

Assuming maximum quality is always best without considering file size tradeoffs.

#3 Exporting SVG with text unoutlined causing inconsistent rendering.

Wrong approach:

Export settings: Format=SVG, Outline Text=No

Correct approach:

Export settings: Format=SVG, Outline Text=Yes

Root cause:

Not knowing that outlining text ensures consistent appearance across platforms.

Key Takeaways

Export settings and scales let you control the size, quality, and format of your design files for different uses.

Choosing the right scale ensures images look sharp on all devices without wasting storage or bandwidth.

Multiple export settings can be applied at once to save time and maintain consistency across assets.

Understanding format-specific options like JPG quality and SVG text outlining helps optimize visuals and compatibility.

Advanced users automate exports with plugins and APIs to streamline workflows and reduce errors in production.