To download a "preview" of a design element in Figma, you typically export the desired frame, slice, or object from your file. This process allows you to save an image or document file of the specific design element.
Here's how you can do it:
Step-by-Step Guide to Exporting a Preview
Follow these simple steps to download a preview of your design:
- Select the element you want to preview. Click on the specific frame, slice, group, or object you wish to download.
- Find the Export section. Look at the right-hand Design panel. Scroll down towards the bottom until you locate the "Export" section.
- Add an export setting. Click the + next to "Export." This is toward the bottom of the Design panel on the right side of Figma. This adds a new export setting for your selected element.
- Choose your file format. Select a format for your download. The default format is PNG, but you can click the menu to choose a different format. The other options are JPG, SVG (for vector images that can be resized without warping), and PDF.
- (Optional) Adjust export settings like scale (e.g., 1x, 2x) or suffix.
- Click the "Export" button. Once you have selected the format and any desired settings, click the "Export" button (which will appear in the Export section after adding a setting) to download the file to your computer.
Available Export Formats
Figma offers several formats for exporting your designs, each suitable for different purposes:
- PNG (Portable Network Graphics):
- Great for web graphics, icons, and elements that require transparency.
- Supports different scales (1x, 2x, 3x, 4x).
- JPG (Joint Photographic Experts Group):
- Ideal for photographs and complex images.
- Does not support transparency but generally results in smaller file sizes compared to PNG for photos.
- SVG (Scalable Vector Graphics):
- Best for logos, icons, and illustrations that need to maintain crispness and quality when scaled to any size.
- Vector format, resolution-independent.
- PDF (Portable Document Format):
- Useful for sharing multi-page documents, reports, or designs intended for print.
- Can preserve vector elements, text, and layout accurately.
Here’s a quick overview of the formats:
| Format | Type | Transparency | Scalability | Best Use Case |
|---|---|---|---|---|
| PNG | Raster | Yes | No | Web graphics, icons, elements with transparency |
| JPG | Raster | No | No | Photographs, complex images |
| SVG | Vector | Yes | Yes | Logos, icons, illustrations (scalable) |
| Document | Yes (for vectors/layers) | Yes (for vectors/layers) | Documents, print designs |
Tips for Exporting Effective Previews
- Use Slices: For exporting specific, irregular areas that aren't neatly contained within a frame, use the Slice tool (
S) to define the export area. - Set Appropriate Scale: When exporting raster formats (PNG, JPG), consider the final usage. Exporting at 2x or 3x (@2x, @3x) is common for high-resolution displays.
- Organize Your Layers: Ensure the elements you want to export are within a frame or easily selectable to make the process smoother.
By following these steps, you can effectively download a preview of your Figma designs in the format you need.
