Format
Design programs enable you to export in common image formats, such as jpg, png, svg, and pdf. Each has its own purpose; see the chart below. The main differentiation in image formats is raster vs. vector.
Raster images (also known as bitmap images) are made up of a grid of individual pixels of color. When enlarged from their original dimensions, they become pixelated.
Vector images are made up of mathematical formulas that define points, lines, curves, and paths. This makes them infinitely scalable without a reduction in quality. Their file size is typically much smaller than raster images, resulting in faster load times too.
| Name | Type | Good for… | Scale |
|---|---|---|---|
| jpg | raster | Images without transparency. | 0.75x |
| png | raster | Images with (or without) transparency. | 1x |
| svg | vector | Icons and illustrations. | 1.5x |
| vector, although raster images can be included too | Presentations and documents. | 2x |
Vector graphics are great because you can export at whichever multiplier you need, without worrying about a loss in image quality. SVGs are a common format used for vector graphics, and you can save assets as SVG using the Export panel in Figma.
Performance
When exporting raster images, keep in mind the file size. The file size exported by Figma can always be reduced by using an image compression tool such as TinyPNG. Image compression simplifies images to have a smaller file size. Despite the name, the website compresses JPGs as well as PNGs. It does a great job of reducing the file size without a noticeable reduction of image quality. While developers can compress images as part of their workflow, it’s best for designers to do it so they can spot overcompression artifacts, pixelation, or color shifts. It’s a careful balance of compressing as much as you can without making too much of a noticeable difference.
For times when you can’t reduce a large file size enough, consider making a note to serve lower quality images for slower internet connections or less performant phones.
Exporting
Apply Export Settings to assets your Developers may need during development. We’ll be exporting these assets to a folder. Note: There’s no need to add export settings for every instance of an icon; you’ll just need to do it once to download the asset.
In the project file, we’re designing a desktop app. Some users will be viewing it with retina screens, so let’s prepare trip images for multiple screen densities. Now, in reality, these images will be uploaded by users, but let’s export them for practice. From the Export panel, add a 1x JPG and a 2x JPG with an “@2x” prefix.
Exporting SVGs
When exporting an SVG with text, be sure the text is outlined. If you export an SVG with a live text field, the SVG on other peoples’ computers will appear with a default system font if they don’t have the specified font installed. Luckily, there’s a simple fix for this. When exporting SVG, click the three-dot menu icon and make sure Outline Text is checked. This keeps the live text intact in your design and exports an outlined text version.
Asset Folder
While developers can export assets in Figma, many developers prefer having a folder of assets. This just makes it easier to have all of the assets in one spot. For clarity, organize assets into folders based on asset type and screen density.
✨ Project Check-in:
In the project file, export the trip images as JPGs at 1x and 2x scale. Then export the chevron icon (in the trip title) as an SVG.
New terms:
- Raster images: Images made up of a grid of individual pixels of color. Also known as bitmap images.
- Vector images: Images made up of mathematical formulas that define points, lines, curves, and paths.
- Image compression: A way of optimizing and simplifying images to have a smaller file size.
Resources:
✨ Exercise: Assets – Format, Performance, and Exporting
Task summary:
- Prepare the trip image’s export settings for 1x and 2x JPGs.
- Prepare the chevron icon’s export settings for SVG (vector)
- Export assets into an asset folder