Export Formats & Options

Supported Formats#

FrameSaver supports three export formats, each optimized for different use cases.

PNG (Portable Network Graphics)#

PNG is the most versatile format for UI design work:

• Lossless compression — no quality degradation
• Transparency support — alpha channel preserved
• Wide compatibility — works everywhere

Best for: UI screenshots, design handoff, assets with transparent backgrounds.

JPG (JPEG)#

JPG offers smaller file sizes at the cost of some quality:

• Lossy compression — slight quality reduction
• No transparency — transparent areas become white
• Smallest files — great for batch sharing

Best for: Client presentations, quick reviews, portfolio sharing.

SVG (Scalable Vector Graphics)#

SVG preserves vector data for unlimited scaling:

• Vector format — infinitely scalable without quality loss
• Editable — can be modified with code or vector editors
• Tiny file sizes — for simple vector artwork

Best for: Icons, logos, illustrations, design system components.

Scale Options#

Understanding Scale#

Scale multiplies the pixel dimensions of your export:

• A 1920×1080 frame at 1x = 1920×1080 pixels
• A 1920×1080 frame at 2x = 3840×2160 pixels
• A 1920×1080 frame at 3x = 5760×3240 pixels

Recommended Settings#

File Organization#

ZIP Structure#

The exported ZIP file mirrors your Figma section structure:

export.zip
├── Homepage/
│   ├── Hero.png
│   ├── Features.png
│   └── Footer.png
├── Dashboard/
│   ├── Overview.png
│   ├── Settings.png
│   └── Profile.png
└── Mobile/
    ├── Home.png
    └── Menu.png

Naming Conventions#

Exported files use your Figma frame names. For the best organization:

• Use descriptive, consistent names
• Avoid special characters (/ \ : * ? " < > |)
• Consider prefixing with numbers for ordering: 01-Hero, 02-Features