Exporting Assets for Web: SVG, JPEG, & PNG

Topics Covered in This Figma Tutorial:

Exporting Individual Assets, Exporting Frames (artboards)

Exercise Preview

Exercise Overview

In this exercise, you'll master the essential skill of exporting graphics from Figma for web implementation. Understanding proper export workflows is crucial for maintaining design fidelity when your designs transition from concept to production. You'll learn to optimize different asset types using the most appropriate formats, ensuring your designs perform seamlessly across various devices and screen densities.

Opening or Uploading the File

1. If you still have Pulse—Prototyping Done.fig open from the previous exercise, you can skip ahead to the export section. Otherwise, follow these steps to open the file:

   Navigate to Figma's home screen (file browser) using the method appropriate for your platform:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: Click the Main menu button and choose Back to files.

2. If you previously uploaded the file, double–click on Pulse—Prototyping Done to open it.

   If you haven't uploaded the file yet, click Import file (located near the top right). Then navigate to Desktop > Class Files > Figma Class > Pulse and double–click on Pulse—Prototyping Done.fig to open it.

Exporting Vector Graphics As SVG

Vector graphics like logos and icons should always be exported as SVG files when possible. SVG format maintains crisp edges at any scale and typically produces smaller file sizes than raster alternatives, making them ideal for modern responsive web design.

1. At the top of the Home Page frame, select the black navbar to begin isolating the logo element.
2. Zoom to the selection by pressing Shift–2 for better precision in your selection.
3. Now we'll target the specific logo element within the navbar structure.
4. In the Layers panel, click on Pulse logo (nested within the Home Page frame).
5. The layer name becomes your exported filename, so proper naming is essential for organized asset management. Double–click on the Pulse logo name to edit it.
6. Rename it to pulse-logo using web-friendly naming conventions (lowercase with hyphens), then press Return (Mac) or Enter (Windows) to confirm.
7. Ensure the logo remains selected before proceeding to export settings.
8. In the Design panel, locate the Export section and click the Plus(+) button (scroll down if the Export section isn't immediately visible).
9. Click the file format dropdown menu (currently displaying PNG) and select SVG for optimal vector output.

10. Click the Export pulse-logo button to generate your file.

    • Web app users: The file downloads automatically to your Downloads folder.
    • Desktop app users: You'll be prompted to choose a save location. Navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets and click Save.

    Professional Tip: When multiple elements are selected simultaneously, Figma exports each as a separate file using their respective layer names. This batch export capability can significantly streamline your workflow when preparing multiple assets.

Exporting Pixel-Based Graphics As JPEG

Photographs and complex imagery with many colors compress most efficiently as JPEG files. However, JPEG doesn't support transparency, so reserve this format for images with solid backgrounds or those that will be cropped to rectangular bounds.

1. Select the hero image positioned below the black navbar (the background photo behind the New Autumn Attire text).
2. In the Layers panel, double–click the feature photo layer name to edit it.
3. Web-optimized filenames require consistent formatting. Change the space to a hyphen, making it feature-photo, then press Return (Mac) or Enter (Windows) to apply the change.
4. In the Design panel's Export section, click the Plus(+) button to add an export option.
5. Change the file format from the default PNG to JPG using the format dropdown.
6. Click the Plus(+) button again to add a second export option for high-density displays.

7. The system adds a 2x export automatically, but you'll need to manually change its format to JPG to match your first export.

   Note: If you only need the 2x version, you can modify the single export from 1x to 2x instead of creating multiple exports. Many modern workflows skip 1x entirely, as 2x provides excellent quality across all devices.

8. Click the Export feature-photo button to generate both resolution variants.

   • Web app: Files download to your Downloads folder.
   • Desktop app: Choose your save location, ideally Desktop > Class Files > Figma Class > Pulse > Web Assets, then click Save.

9. Let's examine the exported results. Keep Figma open but switch to your file system (Finder on Mac or Windows Explorer on Windows).

   • Web app users: Navigate to your Downloads folder.
   • Desktop app users: Go to Desktop > Class Files > Figma Class > Pulse > Web Assets.

10. Observe these important distinctions in your exported files:

    • The feature-photo exported in both 1x and 2x resolutions to accommodate different screen densities.
    • The pulse-logo SVG renders at full screen resolution automatically, eliminating the need for multiple size variants—one of the key advantages of vector graphics.

Exporting Pixel-Based Graphics As PNG

PNG format excels when you need to preserve transparency or when working with graphics that have sharp edges and limited color palettes. Unlike JPEG, PNG uses lossless compression, making it ideal for screenshots, UI elements, and any image requiring a transparent background.

1. Switch back to the Figma application or browser tab.

2. Return to Figma's home screen using your platform's appropriate method:

   • Desktop app: Click the Home tab (Mac users can also access via File > Open File Browser).
   • Web app: Click the Main menu button and select Back to files.

3. If you have iTastify Design Done available from a previous exercise, double–click to open it.

   If the file isn't available, follow these steps to import it:

   • Click Import file (typically located near the top-right corner).
   • Navigate to Desktop > Class Files > Figma Class and double–click iTastify Design Done.sketch. Note that Figma seamlessly imports Sketch files, maintaining most design elements and layer structures.
   • After the upload completes, click Done and double–click the file to open it.
   • If prompted about missing fonts, select Arial as a replacement, or continue without font substitution since we're focusing solely on graphic elements.

4. Locate the hand holding an iPhone near the top of the frame. This image requires transparency preservation for proper integration with the webpage's background pattern. Since JPEG doesn't support transparency, PNG is the only viable option for this asset type.

   The image is nested within multiple groups. Hold Cmd (Mac) or Ctrl (Windows) while clicking directly on the hand holding the iPhone to select through the group hierarchy.

5. With the photo selected, navigate to the Design panel's Export section and click the Plus(+) button.
6. Confirm that the file format dropdown displays PNG—this is the default and correct format for transparent graphics.
7. Add a high-resolution variant by clicking the Plus(+) button again, creating the essential 2x export for Retina and high-DPI displays.

8. Click the Export iphone-hand-mockup button to generate both resolution variants.

   • Web app: Files automatically download to your Downloads folder.
   • Desktop app: When prompted, navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets and click Save to maintain organized asset management.
9. Close this file to return to the main workspace, keeping your project organized and preventing confusion between different design files.

Optional Bonus: Exporting Frames (Artboards) As PDF

While Figma's collaborative sharing features represent the modern standard for design handoffs, PDF exports remain valuable for client presentations, design documentation, and offline reviews. Multi-page PDFs provide a comprehensive view of your design system that stakeholders can review without requiring Figma access.

1. If you closed the Pulse—Prototyping Done file, reopen it to access the complete frame structure.
2. Click on an empty area of the canvas to ensure no individual elements are selected—this ensures all frames are included in the PDF export.

3. Access the PDF export function by clicking the Main menu and selecting File > Export frames to PDF (Mac users can access this via the menu bar's File > Export frames to PDF).

   • Web app: The PDF generates automatically and downloads to your Downloads folder.
   • Desktop app: You'll be prompted to choose a save location. Navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets and click Save to keep your project assets organized.
4. Return to the Web Assets folder on your Desktop to examine the exported PDF.
5. Double–click the PDF file to open it in your default PDF viewer and explore its structure.
6. Navigate through the PDF pages to verify that each Figma frame has been converted to a separate page, maintaining the logical flow of your design sequence.
7. Close the PDF viewer when you've finished reviewing the export quality and page organization.
8. Return to Figma to continue with your next design tasks.
9. Close the Figma file to maintain workspace organization and optimize application performance.