How to Export a Group in Figma?

Exporting a group in Figma is a straightforward process, similar to exporting individual layers, frames, or other selections. You simply select the group you want to export and add an export setting.

Step-by-Step Guide to Exporting a Figma Group

Here’s how you can quickly export a specific group from your Figma design:

1. Select the Group: In your canvas, click directly on the group you wish to export. Alternatively, you can select the group from the Layers panel on the left sidebar.
2. Locate the Export Section: Look at the right sidebar. Scroll down to the very bottom. You will find a section titled Export.
3. Add an Export Setting: Click the + button next to the Export section title. This adds a default export setting to your selected group.
4. Configure Export Settings: Once you've added a setting, you can configure its properties:
   • Scale: Choose the export size (e.g., 1x, 2x, 0.5x, or a specific width/height).
   • Format: Select the file type (e.g., PNG, JPG, SVG, PDF).
   • Suffix (Optional): Add a suffix to the filename (e.g., @2x for a 2x scale PNG).
5. Initiate Export: Click the Export [X] layers button at the bottom of the Export section (where [X] is the number of items being exported, usually 1 for a single group). A save dialog will appear.
6. Save the File: Choose where you want to save the file on your computer and confirm.

You can add multiple export settings to the same group to export it in different sizes or formats simultaneously.

Configuring Export Settings

Figma offers several options when configuring your export settings to ensure you get the output you need.

• Scale: Defines the size of the exported image relative to its original size in Figma. Common options include:
  • 0.5x (half size)
  • 1x (original size)
  • 2x, 3x, 4x (multiples of the original size)
  • W (export by width)
  • H (export by height)
• Format: Determines the file type. Each format has different uses:
  • PNG: Good for graphics with transparency (e.g., logos, icons).
  • JPG: Best for photographs and complex images (does not support transparency). Allows control over quality.
  • SVG: Ideal for vector graphics that need to be scalable without losing quality (e.g., icons, illustrations). Preserves vector paths.
  • PDF: Suitable for documents, printing, or multi-page exports (though typically used more with frames).
• Suffix: Automatically adds text to the end of the filename before the file extension (e.g., [email protected]). Useful for differentiating assets based on scale or format.

Exporting Other Elements and Related Options

While the steps above focus on groups, the process of selecting an element and adding export settings is how you export anything in Figma, including frames, components, or individual layers.

As highlighted in the reference, when exporting a frame with a fill, you have additional options available in the export settings. For example, you can exclude the frame's fill from the exported file. This specific setting demonstrates that export configurations can be tailored depending on the type of element you are exporting, offering flexibility beyond just scale and format. For a group, these frame-specific options like excluding fill will not be available, but the core principle of selecting and adding an export configuration remains the same.

By mastering the Export section in the right sidebar, you can efficiently prepare and save assets from your Figma designs.