How to export files from Figma

Key Takeaways

• Choose your layers or frames directly from the canvas and let the export panel in the bottom-right corner fine-tune your options. Don’t forget to check your selected layers in the layers panel to make sure you’re not exporting more than you need or too little!
• Select the file format depending on your requirements, for example, PNG or JPG for raster images and SVG for scalable vector graphics. Use PDF if you want to export multi-page documents or presentation layouts.
• Set your scale factor and suffix accordingly in the export menu so that your assets are optimized for different screen densities and sorted by name. Good naming conventions in your file will naturally carry over into tidier and more professional export filenames.
• Switch between Developer Mode and Design Mode to transition between technical handoff and visual asset production workflows. Dev Mode gives developers efficient access to code snippets and exact layout metrics without any guesswork.
• Slice tool – gives manual control for any design areas that are outside the standard frame bounds. This method is handy for grabbing overlapping elements or sections of the screen that need to be exact sizes.
• Enable bulk exporting by selecting several items to export a compressed ZIP file to your team. Save export presets or style guides for consistent project assets and easier handoffs.

===

Exporting Figma files refers to the process of saving your design frames as common file types such as PNG, JPG, SVG, or PDF to use outside of Figma. You select particular layers or frames before choosing your file type in the Export panel.

These files are still available for developers, clients, or print production. We take advantage of the high-resolution settings to make sure your assets look great everywhere.

The subsequent sections cover preparing your design assets for easy sharing and project handoff.

The fundamental figma export process

Figma makes it easy to transfer design work from your design canvas to your local copy. This workflow depends on the right sidebar’s export section, where you can prepare assets using various export configurations for web projects, print, or other design tools.

1. Selecting assets

You select elements by clicking frames or groups on the canvas. To select several at a time, hold Shift and click in the layers panel. If you require everything inside a certain container, simply pick the parent frame.

Make sure you have just the things you really need. This will keep your file size low.

2. Accessing settings

Find the export block in the bottom-right corner of the sidebar. Press the ‘+’ to create a new setting. Figma defaults to 1x PNG, but you can open the menu to see additional options.

This menu allows you to polish the appearance of your work. You then have the option to change the scale or select your preferred file type.

3. Choosing formats

Use the dropdown box to choose between raster, vector, or document types. Choose PNG or JPG for normal web pictures.

Select SVG if you require scalable icons or logos. Choose PDF for presentations or full-page prints.

4. Applying options

Set your scale factor to 2x or 3x (retina), which generates higher DPI. You can append a suffix to your file name to keep things tidy.

For example, a frame named HomePage with a ‘draft’ suffix becomes HomePagedraft.png. Keep in mind, Figma is downsampling those pixel values.

You can set custom sizes by using ‘w’ or ‘h’ suffixes to define width or height. ALWAYS check your color profile because assets will be the same as the Figma file settings, such as Display P3.

5. Finalizing export

Then, click the “Export” button to download your files. Inspect your local folder to verify they came in properly.

Review the images to make sure they’re transparent and colored as intended. Remember that if you import back into the interface, 2x exports do not make it visually larger.

It gets your work prepped for development or the outside world.

Exporting from different modes

Figma offers two different modes to export your assets, including the slice tool for selecting specific portions. Switch between Design Mode and Dev Mode via the toggle in the right sidebar, where Design Mode focuses on visual exports for graphics, while Dev Mode facilitates handoff with code snippets and measurements.

Design mode

Stay in Design Mode to control export parameters such as scale, format, and suffix effectively. This mode enables you to prototype visual elements before exporting a definitive file. Set up component-level exports here to ensure consistent branding across your entire figma design file.

For production-ready assets, utilize the export configurations available in the standard options at the bottom right panel. If exporting for retina or other high-density screens, choose a larger scale to enhance resolution. For instance, a 2x export would yield 144 DPI, while a 3x export could reach up to 216 DPI.

Keep in mind that the visual size of an image remains unchanged when re-imported into the tool. You can modify file names by entering a string in the export field, which will be appended to the original name. Selecting text layers will automatically activate certain settings for you.

When exporting from different modes, the color profile of your exported file will match your original design, such as Display P3. Essentially, it represents a weighted average of surrounding pixels, ensuring high-quality output.

Dev mode

Switch to Dev Mode to get specialized tools for exploring code references and measurement data. Exports appear on the right sidebar only if you select an object. This view tailors your workflow for developer handoff by exporting exact code snippets.

Download code to export CSS, Swift, or Android code for select frames for exporting from various modes. You can export design reference values into your terminal or documentation. This removes manual guesswork and accelerates integration.

Use the Inspect panel to export precise properties to your team. That way, each gauge is calibrated and production ready.

Choosing the right file format

Selecting the appropriate file format in Figma design is crucial for effective communication and speedy online delivery, as the right choice depends on your needs: resolution, transparency, or size.

For raster

PNG is your best option whenever you require sharp edges or a transparent background for your layers. This format maintains the quality at a high level, but the file sizes can be larger.

If you’re uploading hero images or social posts, opt for JPG to maintain a small file size. You can tweak the quality slider on Figma to get that sweet spot between crisp visuals and fast loading.

For retina or other high-density screens, export at a larger scale to increase resolution. Most users hate to adjust export settings by hand for each and every file. A default export would save a lot of time, particularly if you’re working with hundreds of assets at a time.

Selecting the proper file format is important.

For vector

SVG is the web standard because it remains crisp at any screen size. Before export, make sure to ‘outline stroke’ your shapes so they appear the same in every browser.

Getting rid of unnecessary layers or hidden nodes makes your SVG code less bulky and tidy. This is crucial for intricate charts or data diagrams where you want the text to remain selectable and readable.

For documents

PDF is still the king when it comes to sharing multi-page designs or mockups with your clients! This format secures your margins and fonts, so the layout appears right on any device.

Make sure your frames are arranged in proper order prior to exporting. For text-heavy content management or professional XLIFF export, give the Copydoc plugin a try.

This tool streamlines your approach to managing text overload in various projects.

Advanced export strategies

Handling intricate workflows in UX design calls for more than just saving files. For projects to stay clean, group top-level frames into folders using the slice tool. This helps maintain a master file as an export hub, allowing developers to access the original content and export configurations without hassle.

Bulk exporting

• Select all the frames you want to export.
• Open the export settings in the right sidebar.
• Click Export once to download a ZIP file.
• Use the assets panel to find main components.
• Batch your exports by category like icons or logos.

Bulk exporting items in Figma design makes your handoff simpler. When you select more than one frame, the application bundles them into one compressed ZIP file. Using the slice tool, you can create a local copy of the export content for better organization.

The slice tool

The slice tool, located under the region tools menu, allows you to designate particular regions for export. Hit ‘S’ to open. This tool is excellent for capturing details of a design that don’t fit within one frame. You can manually pull the box to expose or conceal pixels on the canvas.

Always group your slices into layers. That way, it’s easy to update them later should the design veer. Keep in mind, Figma applies a weighted average of four adjacent pixels to maintain the clarity of your output.

Export presets

• PNG at 2x scale for standard retina displays.
• SVG for vector icons to ensure crisp edges.
• JPG at 1x for smaller web images.
• WebP for faster load times on modern sites.

Export these settings as templates to accelerate your work. You can use plug-ins to randomly apply these presets to multiple layers simultaneously. If you export for high-density screens, that is retina, use a 2x or 3x multiplier to boost resolution.

For instance, a 2x export gives you 144 DPI, while 3x provides 216 DPI. You can define hard widths or heights by specifying ‘w’ or ‘h’ suffixes. Always maintain a list of these approved settings in your team style guide to prevent errors at handoff.

This keeps your final assets consistent, and Figma will maintain your original color profiles such as Display P3 throughout.

Optimizing your exported assets

Optimizing your exported assets in Figma design ensures neat files, reducing load times and facilitating painless development handoffs to worldwide teams.

File size

By lowering the percentage in Figma settings, you can control if your file is too heavy for high-resolution exports. You can flatten complex vector shapes to paths to keep SVGs light.

If Figma’s default export options are still too heavy, use third-party tools to strip metadata. These tools can typically reduce files quite a bit without any visual degradation.

Resolution

Set your scale to 2x or 3x for new age, high density screens. A 2x export is 144 DPI, while a 3x export is 216 DPI. This guarantees assets look crisp on retina displays.

Applying the same ratio throughout your design system keeps everything consistent. Don’t export at low resolutions unless you require tiny placeholders for documentation.

Just increase pixel density when your unique end-use context requires uber-sharp images. Keep in mind, 2x exports do not alter the size visually when imported back into Figma. You can enter custom dimensions using ‘w’ or ‘h’ to get the width or height in the export field.

Naming conventions

• Do: Use page-component-state structure.
• Do: Include variant info in filenames.
• Don’t: Use spaces or special characters.
• Don’t: Forget to update layer names before exporting.

Rename your layers directly in Figma for them to auto-populate proper filenames on export. By adding a suffix such as draft in the export field, you’ll end up with neatly differentiated versions, such as HomePage-draft.png.

This specificity keeps you from getting confused when dealing with a bulk of similar things. Just remember to always match your naming structure to the project hierarchy so your folders remain organized and intuitive for the entire team.

Keeping in mind the device color profile, like Display P3, is key for even results. Figma performs resampling using a weighted average of surrounding pixels. These small steps really do add up over time.

Beyond the export panel

Figma’s native export panel caters to rudimentary demands, but professional workflows require more advanced features for effective UX design. Utilizing the slice tool for selecting specific regions can enhance the export configurations, allowing for streamlined collaboration with external tools like Zeplin. Additionally, writing a “Design Readme” file with instructions for implementing the assets will ensure all team members have access to the original files.

Proactive exporting

Frame your work or crop the input appropriately. This makes files natural for programmers. Organize similar objects to export together as components.

For some reason, always double-check that objects lie within the frame in the Layers panel or they will be skipped. If ‘Clip Content’ is turned on, layers outside the bounds are clipped. Layers that are hidden or have 0% opacity sometimes do not export.

Don’t forget to update assets if your designs change! Utilize the ‘Slice’ tool for certain elements. Append x to a value to set a high-density multiplier. Use ‘w’ or ‘h’ for fixed dimensions. To prevent rendering errors in PDFs, always align to whole pixels.

Component structure

Away from the export panel, this comes in handy when you have to update styles across a project. Bundle different icon versions using component variants. You can export these in bulk.

Don’t forget to have instances link back to components so they’re consistent. Use the assets panel to discover and export variants across multiple frames in seconds. This is a huge timesaver over manual exports of dozens of frames.

Handoff philosophy

Configure a developer hand-off page. Add notes beside design layers to explain your intent. Promote Dev Mode. This allows developers to extract values themselves and minimizes manual requests.

Here’s where this really gets interesting. It creates a superior workflow. It closes the circle from design vision to technical requirements. It fosters a zone of collaboration between the two teams.

Conclusion

Exporting files the right way saves you and your team time. You select the option that is best for your project. High quality assets enable developers to create apps or websites effortlessly. You prepare layers to make the handoff seamless. You preview your files to test that they render correctly on various screens. These little things stop you from making mistakes in the build phase. You clean up your work by naming frames nicely. A great workflow keeps us all on track. Now you have the means to spread your work with pride. Exporting figma files allows you to transition from design to code seamlessly. Initiate your upcoming export now to experience how these techniques benefit your process. Leave a comment and let others learn from you!

See also: Figma Help Center.

Frequently Asked Questions

How do I export a single layer or frame in Figma?

To export your design content, click on the layer or frame you wish to export. Then, navigate to the ‘Export’ section in the right sidebar. By clicking the plus icon, you can add export configurations, choose your desired file formats, and click the Export button to download the file.

Which file format should I use for web graphics?

Export Figma files as PNG for transparent images, and utilize JPEG for photos or detailed images, ensuring optimal export configurations and file formats.

Can I export multiple assets at once?

Yes. Select all the layers or frames you would like to export using the slice tool. Open the Export section in the right sidebar, configure your export settings, and upon clicking ‘Export,’ Figma will output all selected items as separate files in a single folder.

How do I change the resolution of my exported images?

In the Export settings panel of the Figma design interface, find the scale dropdown to select options like 2x or 3x, ensuring higher resolution images that are crisp everywhere, especially on Retina displays.

What is the purpose of the “Export” panel?

The “Export” panel serves as a one-stop shop for handing off assets for developers and stakeholders, allowing you to configure file types and export configurations. This ensures your Figma design assets are consistently production-ready and implementation-ready across various platforms.

Do I need a plugin to export Figma files?

No, Figma has native export capabilities that are good for most needs, including exporting content in various file formats. While plugins can be useful for specialized tasks such as bulk renaming or exporting assets directly to a third-party tool, the Figma desktop app provides essential features like the slice tool for precise selection and export configurations.