Exporting a Figma design allows you to save your frames, slices, or specific layers as image files (like PNG, JPG, SVG) or other formats, making it easy to share your work or use assets in other applications.
Here's a simple breakdown of how to export your design elements from Figma:
- Select the Layers or Frames to Export: Choose the specific frames, groups, layers, or slices you want to export. You can select multiple elements simultaneously.
- Locate the Export Section: The location of the Export section depends on your access level to the Figma file.
- If you have
can editaccess to a file, the Export section is located toward the bottom of the right sidebar in Design Mode. - If you have
can viewaccess to a file, the Export section is located under the Properties tab in the right sidebar.
- If you have
- Add Export Settings: In the Export section, click the "+" icon to add export settings for your selected items.
- Configure Export Settings:
- Choose the desired Format (e.g., PNG, JPG, SVG, PDF).
- Set the desired Scale (e.g., 1x, 2x, 0.5x, or a specific width/height). You can add multiple scale settings for different output sizes.
- (Optional) Configure format-specific settings (like background color for JPG, or 'Include Id' for SVG).
- Preview and Export: Figma provides a preview of your asset(s). Once satisfied with the settings, click the "Export" button (which will show the number of items selected, like "Export 1 layer").
Your design assets will be downloaded to your computer based on your browser or application download settings.
Common Export Formats in Figma
Figma supports several standard file formats for exporting your designs:
| Format | Description | Common Use Cases |
|---|---|---|
| PNG | High-quality raster image with transparency | Web graphics, icons, images requiring transparency |
| JPG | Compressed raster image | Photos, images where transparency isn't needed |
| SVG | Scalable Vector Graphic | Logos, icons, illustrations that need to scale |
| Portable Document Format | Documents, presentations, printable files |
By following these steps, you can efficiently export individual assets or entire frames from your Figma project.
