Getting Started with FrameSaver

Installation#

1. Open any Figma design file
2. Go to Menu → Plugins → Manage plugins
3. Search for "FrameSaver" or visit the Figma Community page
4. Click Install

After installation, access the plugin from Menu → Plugins → FrameSaver or use the search bar (Ctrl/Cmd + /).

Quick Start#

Step 1: Organize Your Frames#

FrameSaver works with sections in Figma. Each section becomes a folder in the exported ZIP archive.

Create sections in your file and place your frames inside them:

📁 Your Figma File
  📂 Homepage (Section)
    ├── Hero
    ├── Features
    └── Footer
  📂 Dashboard (Section)
    ├── Overview
    ├── Settings
    └── Profile

Step 2: Open the Plugin#

Launch FrameSaver from the Plugins menu. The plugin window will show:

• Format selector — PNG, JPG, or SVG
• Scale selector — 1x, 2x, 3x, or 4x
• Export button — starts the export process

Step 3: Configure and Export#

1. Select your desired format (PNG recommended for most uses)
2. Choose the scale (2x recommended for retina displays)
3. Click Export
4. Choose where to save the ZIP file

The plugin will process all frames in all sections and create an organized ZIP archive.

Export Formats#

Scale Options#

Troubleshooting#

No frames found#

Make sure your frames are inside sections. FrameSaver only exports frames that are direct children of sections.

Large file sizes#

• Use JPG format instead of PNG for photos
• Reduce the scale (1x instead of 2x)
• Check if any frames contain unnecessarily large embedded images

Export is slow#

• Large files with many frames may take a moment to process
• Close other Figma files to free up memory
• Try exporting sections one at a time for very large projects