Back to Playbook

Asset Export

Prepare and export all necessary graphical assets in the required formats and resolutions.

Why it matters

Delivering the right assets ensures your design looks crisp on all devices without bloating the application size. Choosing the wrong format can lead to blurry icons, slow load times, or missing transparency.

Export Playground

Compare different file formats and scales to understand their best use cases.

icon.svg
Vector • Infinite Resolution

Format Guide

SVG

Best for icons, logos, and simple illustrations. Infinite scalability, small file size, and editable code.

PNG

Best for images requiring transparency or complex illustrations with flat colors. Lossless compression.

JPG

Best for photographs. No transparency. Lossy compression allows for smaller file sizes.

WebP

Modern format for web. Superior compression for both lossy and lossless images. Supports transparency.

Export Checklist

  1. Correct Format

    Are you using SVG for icons and JPG/WebP for photos?

  2. Resolution

    Did you export @2x and @3x versions for raster images to support high-density screens?

  3. Optimization

    Have you run assets through an optimizer (like ImageOptim or TinyPNG) to reduce file size?

Previous: Version Control Next: Figma Plugins