What does each export format mean?
The table below describes the output formats you are most likely to meet when working with AI design tools. Each row has a plain-language meaning, how Figma and Sketch treat the format according to their own documentation, where it is useful, and the official sources behind it. If a source does not say something, the cell says “Not stated in the source” rather than guessing.
| Format | What it means | In Figma | In Sketch | Where it is useful | Sources (checked on) |
|---|---|---|---|---|---|
| PNG | A picture made of pixels, saved without losing any detail. It can have transparent areas. | Imports as an image. An uploaded asset becomes a rectangle layer with the image as its fill. | Imports as a bitmap image. | Graphics that mix images and text, such as logos, charts and illustrations, and any case where you need a flat reference to rebuild by hand. |
Checked |
| JPG | A picture made of pixels that is compressed with some loss of quality to keep files small. It has no transparency. | Imports as an image (same rectangle-with-fill behavior as PNG). | Imports as a bitmap image. | Photographic images and web use where small files matter more than exact fidelity. |
Checked |
| SVG | A vector format: shapes and paths described in XML that scale to any size without losing sharpness. It supports transparency. | Converted on import into editable vector layers, not kept as an image. On export, text becomes outlines by default and scale is limited to 1x. | SVG files and pasted SVG code can be imported. Sketch also exports SVG as a vector format. | Icons, logos and interface shapes you want to keep editable and sharp at any size. |
Checked |
| A fixed-layout document that keeps text, fonts, vectors and images together regardless of software or hardware. | Not stated in the source as an import format. On export, text is written as glyphs, so it cannot be edited in the file, though it can be selected and copied. Scale is limited to 1x. | PDFs can be imported, with each page becoming a frame. Sketch exports PDF as a vector format. | Sharing or printing a design exactly as laid out, rather than editing it. |
Checked | |
| Design tokens (JSON) | A plain JSON file of named design values such as colors and spacing. A token is any object with a $value, and $type says what kind of value it is. | Not stated in the source. | Not stated in the source. | Moving named values between design and code. The Design Tokens Community Group format 2025.10 is stable but is not a W3C Standard; tool support varies. | Checked |
| Code or an interactive prototype | Source code or a running prototype that renders the interface, produced from a prompt or from existing designs. | Figma describes Figma Make as a prompt-to-app tool that turns Figma designs into interactive prototypes and can produce code-level changes. | Not stated in the source. | Testing an idea in a browser. Treat the code as a draft that a developer reviews. | Checked |
Which format should I choose if I want to edit the result?
Use a vector format when you want to edit shapes afterward. Figma’s help center says SVG files are not kept as images on import: they become vector layers you can edit. Flat images behave differently: Figma accepts JPG, PNG and other bitmap types, and an uploaded asset becomes a rectangle layer with the image as its fill, so you rebuild rather than edit it.
Sketch’s documentation lists SVG files and pasted SVG code among the things it can import, and separates bitmap formats (PNG, JPG, HEIC, TIFF, WebP) from vector formats (SVG, PDF, EPS).
Why do vector exports sometimes lose editable text?
Figma exports SVG text as outlines by default, so the text becomes shapes and is not editable in the exported file unless you uncheck the Outline text option. Figma exports PDF text as glyphs: it can be selected and copied but not edited. Check the export settings before you hand a file to someone who needs to edit it.
What do design tokens have to do with this?
Tokens are not a picture of a design. They are a data file of named values, such as colors and spacing. The Design Tokens Community Group’s format uses plain JSON, with a $value for each token and a $type that says what kind of value it holds. Our guide on AI design tools and design systems explains how tokens fit with generated screens.
What does this page not cover?
It does not rank tools or say which product produces which format. Output formats differ by tool and change over time, so check the tool’s own documentation. For help choosing a category of tool, read how to choose an AI design tool. For the idea behind prompt-to-interface tools, read text-to-UI design with AI.
Sources
Every row in the table links its own sources. In summary:
- W3C: Portable Network Graphics (PNG) Specification, Third Edition: PNG stores raster images without losing data (Recommendation, 24 June 2025).
- W3C: Scalable Vector Graphics (SVG) 2: SVG is an XML-based format for two-dimensional vector graphics (Candidate Recommendation Snapshot).
- Figma Help: Export formats and settings for static designs
- Figma Help: Add images and videos to designs
- Sketch documentation: Importing and exporting
- Design Tokens Format Module 2025.10
- Figma blog: Introducing Figma Make
All sources were checked on 29 October 2026. The data behind the table is available as CSV and JSON.