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 learn how to export graphics for use in webpages.

Opening or Uploading the File

1. If you still have Pulse - Prototyping Done.fig open from the previous exercise, skip the next section (about exporting). Otherwise open it as follows:

   In Figma, if you’re not on the homescreen (file browser), do the following:

   • 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 have not uploaded the file, click Import file (may be an icon near the top right). Then navigate into Desktop > Class Files > Figma Class > Pulse and double–click on Pulse - Prototyping Done.fig to open it.

Exporting Vector Graphics as SVG

1. At the top of the Home Page frame, select the black navbar.
2. Zoom to the selection by hitting Shift–2.
3. We want to select the logo.
4. In the Layers panel, click on Pulse logo (in the Home Page frame).
5. The layer name is used for the exported file name, so let’s rename this. Double–click on the Pulse logo name.
6. Rename it to pulse-logo and hit Return (Mac) or Enter (Windows) to apply it.
7. Make sure the logo is still selected.
8. In the Design panel, to the right of Export click the Plus(+) button (you may have to scroll down to see Export).
9. Click on the file format menu (which currently says PNG) and choose SVG.

10. Just below that click the Export pulse-logo button.

    • If you’re using the figma.com website, the file will go to your Downloads folder.
    • If you’re using the Desktop app, you’ll be asked where to save the file. Navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets and click Save.

    TIP: When you have multiple elements selected, each will be are exported separately (using the layer names for the file names.)

Exporting Pixel-Based Graphics as JPEG

1. Select the photo below the black navbar (behind New Autumn Attire).
2. In the Layers panel double–click on the feature photo name to edit it.
3. Web filenames can’t have spaces in them. Change the space into a dash to make it feature-photo (Hit Return (Mac) or Enter (Windows) to apply the change.)
4. In the Design panel, to the right of Export click the Plus(+) button.
5. Click on the file format menu (which currently says PNG) and choose JPG.
6. To the right of Export click the Plus(+) button again.

7. A 2x has been added, but change its format to JPG.

   NOTE: If you only want 2x (not both 1x and 2x), you can change the 1x to 2x on the single export (without adding another export).

8. Just below that click the Export feature-photo button.

   • If you’re using the figma.com website, the file will go to your Downloads folder.
   • If you’re using the Desktop app, you’ll be asked where to save the file. Navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets and click Save.

9. Let’s look at the final exported files. Keep Figma open, but switch to the Desktop (the Finder on Mac or Windows Explorer on Windows).

   • If you’re using the figma.com website, navigate to your Downloads folder.
   • If you’re using the Desktop app, navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets.

10. Notice the following:

    • The feature-photo was exported at 1x and 2x sizes.
    • The pulse-logo is vector and rendered at the full resolution of the screen, so there’s no need for 1x or 2x sizes.

Exporting Pixel-Based Graphics as PNG

1. Switch back to the Figma app or website (whichever you were using).

2. In Figma, go to the homescreen (file browser) as follows:

   • 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.

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

   If you do not have that file, do the following:

   • To open a local file, click Import file (may be an icon near the top right).
   • Navigate into Desktop > Class Files > Figma Class and double–click on iTastify Design Done.sketch to open it (yes Figma can open Sketch files).
   • Once the file has uploaded, click Done and double–click on the file to open it.
   • If you get a message about missing fonts, choose Arial for the replacement (or don’t worry about it as we’ll only be focusing on graphics).

4. Near the top of the frame, there’s a hand holding an iPhone. It requires a transparent background, so it can be composited onto the background pattern in the final webpage. JPEG is best for compressing photos, but it doesn’t support transparency. We’ll have to make this a PNG.

   The photo is nested in several groups, so hold Cmd (Mac) or Ctrl (Windows) and click on the hand holding an iPhone.

5. With the photo selected, in the Design panel, to the right of Export click the Plus(+).
6. The file format menu should currently say PNG which is what we want.
7. To the right of Export click the Plus(+) button again to add a 2x size.

8. Just below that click the Export iphone-hand-mockup button.

   • If you’re using the figma.com website, the file will go to your Downloads folder.
   • If you’re using the Desktop app, you’ll be asked where to save the file. Navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets and click Save.

9. Close this file.

Optional Bonus: Exporting Frames (Artboards) as PDF

When sending the entire design (all the frames) to a client or developer, the best method is using Figma’s online sharing which we’ll cover in the next exercise. You can also export a multiple page PDF file, as follows.

1. If you closed the Pulse - Prototyping Done file, reopen it now.
2. Click onto an empty part of the canvas to make sure nothing is selected.

3. At the top left click the Main menu and choose File > Export frames to PDF (Mac users can choose File > Export frames to PDF from the top menu bar).

   • If you’re using the figma.com website, the file will go to your Downloads folder.
   • If you’re using the Desktop app, it will ask where to save the file. Navigate to Desktop > Class Files > Figma Class > Pulse > Web Assets and click Save.
4. Switch back to the Web Assets folder open on your Desktop.
5. Double–click on PDF file to open it.
6. Scroll through the PDF file to see that each frame is a different page.
7. Close the PDF file.
8. Switch back to Figma.

9. Close the Figma file.