Exporting your design work as PNGs in Figma is quick and simple—perfect for sharing assets with stakeholders, creating marketing previews, or uploading elements to websites and apps. This guide walks you through exporting any frame in your Figma file as a crisp, high-quality PNG image.
🧭 Step 1: Select the Frame
Open your Figma file and click to select the frame you want to export. You can do this either by clicking on it directly on the canvas or selecting it from the Layers panel on the left. Ensure that you’re selecting the entire frame, not an individual element inside it.
💡 Pro tip: You can also use the keyboard shortcut
Shift + Enterto quickly select the parent frame when an inner object is selected.
🎛 Step 2: Locate the Export Panel
With the frame selected, look to the right-hand panel. Scroll all the way down until you reach the Export section. If it’s collapsed, click the small arrow to expand it.
➕ Step 3: Add an Export Setting
Click the “+” (plus) button next to “Export”. This tells Figma that you want to generate an exportable asset.
You’ll now see export options like:
- File type (choose PNG)
- Size (1x, 2x, 3x, or enter a custom size)
- Suffix (e.g., @2x for retina screens)
For most cases, the default settings (PNG at 1x) work perfectly.
🔍 Need transparency? PNG files automatically include transparent backgrounds if your frame doesn’t have a background fill.
💾 Step 4: Export the Frame
Click the Export [Frame Name] button that appears below the settings. Figma will generate and download the PNG file directly to your computer.
You’re done!
🎯 Bonus: Batch Export Multiple Frames
You can select multiple frames by holding Shift and clicking each one. When selected, Figma will apply the same export settings to all of them, allowing you to export them in one click—great for UI kits or icon sets.
🧹 Troubleshooting Tips
- Export button not appearing? Double-check that you’ve selected a frame, not just a group or shape.
- Low resolution? Increase the export scale to 2x or 3x in the Export settings.
- Wrong background? Make sure your frame has the right fill color—or leave it transparent if needed.
Exporting frames as PNGs in Figma is a basic yet essential skill, whether you’re handing off designs to a dev team or preparing assets for your next product launch. Mastering this process ensures your visuals are always pixel-perfect and ready to share.
Designilo 