Quick Tips

Exporting Assets in Framer

Exporting Assets in Framer

Exporting Assets in Framer

Justin

·

3:09

·

2.9K views

·

Apr 1, 2026

About this lesson

In this video we'll cover how to export assets using the Framer Desktop App. Choose between PNG and JPG, adjust export sizes like 1x through 4x, and organize files for handoff or production. We also cover exporting multiple assets at once and how Framer handles frames, stacks, and individual layers during export.

0:00 Introduction

0:17 Download the Framer Desktop App

0:30 Selecting What to Export

0:54 The Export Section

1:04 Export Sizing

1:26 Naming & Organizing Exports

1:49 Choosing a File Format

2:11 Exporting Assets

2:48 Wrap Up

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00The ability [music] to export assets is 0:02an important part of any design 0:04workflow. [music] So, in this video,0:06we'll cover how to export assets from 0:08the Framer desktop app and how to choose 0:10the right size and format [music]0:12for the job.0:16Now, before we get started, I want to 0:18point out that this feature is only 0:21available in the Framer desktop app. So,0:24if you don't have it, head over to 0:26framer.com/d downloads to download and 0:29install it. Great. So, once that's 0:31ready, the first step is to select an 0:33item we want to export. This can be a 0:36single layer or even an entire page 0:39depending on what we need. And that's an 0:42important thing to keep in mind because 0:44exports always begin with selection.0:47Once we've made our selection, we can 0:50head over to the bottom of our 0:51properties panel to find the export 0:53section. From here, we'll click the plus 0:56icon to add our export settings. And 0:58Framer gives us a few options to control 1:01the resolution of our asset upon export.1:05A 1x export keeps the asset at its 1:08original size. 2x exports it at double 1:11the resolution, which is helpful when we 1:14want sharper visuals. and 3x and 4x give 1:17us even larger versions which can be 1:20useful when we need even more clarity or 1:22a little more flexibility after export.1:26We can also use a few additional 1:28settings here to help keep our exports 1:30organized. For example, we can add a 1:33suffix to label different file versions 1:35more clearly, which is helpful when 1:37exporting the same asset at multiple 1:40sizes. There's also a folder option 1:42which lets us organize exported assets 1:45into a specific folder structure which 1:47is great for batch exports. Lastly,1:51we'll choose the file format and framer 1:53gives us the option of a PNG or a JPEG.1:57PNG is great for assets like UI 1:59elements, icons, and logos when 2:01transparency is needed. and JPEG is a 2:04better fit for photographic assets or 2:06larger visuals where a smaller file size 2:09is preferred. Now, once everything looks 2:12good, we can click export and Framer 2:15will download the file directly to your 2:17computer. We can also export multiple 2:20files at once by selecting more than one 2:22individual element and then adding 2:25export settings. For example, if I 2:27select a few separate elements in the 2:29layers panel and add export settings,2:32we'll see an export to layers button 2:34appear. But it's worth noting that if we 2:37apply export settings to a stack or a 2:39frame, framer will export everything 2:41within that stacker frame as a single 2:44asset rather than as separate elements.2:48So whether you're exporting a single 2:50element or organizing multiple files for 2:52handoff, [music] Framer's export 2:54settings give us a flexible way to get 2:57assets out of Framer [music]2:58and ready to use. Thanks for watching 3:01and I'll see you in the next one.3:05[music]

TeachesImage Optimization

Also coversFrames Stacks

Watch on YouTube ↗

‹ Framer Update: Holo Shader

Framer Update: Auto Translate ›

More in this topic

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Replace component instances site-wide in Framer

Replace component instances site-wide in Framer

Layout & Design4K views · 4 months ago

Framer Update: Search for Pages, Layers, and Assets

Framer Update: Search for Pages, Layers, and Assets

Framer Update4K views · 11 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.