# AI Design Export Formats: What PNG, SVG, PDF and Code Mean

Source: https://chat2.design/reference/ai-design-export-formats/
Updated: November 6, 2026
Category: AI Design

> AI design tools return different kinds of output: flat images, vector shapes, fixed-layout documents, design tokens or code. The format decides what you can edit afterward. This reference explains each format in plain language, shows how Figma and Sketch treat it, and cites the official document behind every row with a checked-on date.

## 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 |
| --- | --- | --- | --- | --- | --- |
| 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. | [W3C: Portable Network Graphics (PNG) Specification, Third Edition](https://www.w3.org/TR/png/); [Figma Help: Export formats and settings for static designs](https://help.figma.com/hc/en-us/articles/13402894554519-Export-formats-and-settings-for-static-designs); [Figma Help: Add images and videos to designs](https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-designs); [Sketch documentation: Importing and exporting](https://go.sketch.com/docs/designing/importing-and-exporting.md) (checked 2026-10-29) |
| 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. | [Figma Help: Export formats and settings for static designs](https://help.figma.com/hc/en-us/articles/13402894554519-Export-formats-and-settings-for-static-designs); [Figma Help: Add images and videos to designs](https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-designs); [Sketch documentation: Importing and exporting](https://go.sketch.com/docs/designing/importing-and-exporting.md) (checked 2026-10-29) |
| 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. | [W3C: Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/); [Figma Help: Export formats and settings for static designs](https://help.figma.com/hc/en-us/articles/13402894554519-Export-formats-and-settings-for-static-designs); [Figma Help: Add images and videos to designs](https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-designs); [Sketch documentation: Importing and exporting](https://go.sketch.com/docs/designing/importing-and-exporting.md) (checked 2026-10-29) |
| PDF | 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. | [Figma Help: Export formats and settings for static designs](https://help.figma.com/hc/en-us/articles/13402894554519-Export-formats-and-settings-for-static-designs); [Sketch documentation: Importing and exporting](https://go.sketch.com/docs/designing/importing-and-exporting.md) (checked 2026-10-29) |
| 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. | [Design Tokens Technical Reports 2025.10](https://www.designtokens.org/tr/2025.10/); [Design Tokens Format Module 2025.10](https://www.designtokens.org/tr/2025.10/format/) (checked 2026-10-29) |
| 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. | [Figma blog: Introducing Figma Make (7 May 2025)](https://www.figma.com/blog/introducing-figma-make/); [Figma Help: Create a Figma Make file](https://help.figma.com/hc/en-us/articles/31304485164695-Create-a-Figma-Make-file) (checked 2026-10-29) |

## 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](/guides/ai-design-tools-vs-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](/guides/choose-an-ai-design-tool/). For the idea behind prompt-to-interface tools, read [text-to-UI design with AI](/guides/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](https://www.w3.org/TR/png/): PNG stores raster images without losing data (Recommendation, 24 June 2025).
- [W3C: Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/): SVG is an XML-based format for two-dimensional vector graphics (Candidate Recommendation Snapshot).
- [Figma Help: Export formats and settings for static designs](https://help.figma.com/hc/en-us/articles/13402894554519-Export-formats-and-settings-for-static-designs)
- [Figma Help: Add images and videos to designs](https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-designs)
- [Sketch documentation: Importing and exporting](https://go.sketch.com/docs/designing/importing-and-exporting.md)
- [Design Tokens Format Module 2025.10](https://www.designtokens.org/tr/2025.10/format/)
- [Figma blog: Introducing Figma Make](https://www.figma.com/blog/introducing-figma-make/)

All sources were checked on 29 October 2026. The data behind the table is available as [CSV](/data/export-formats.csv) and [JSON](/data/export-formats.json).

## Frequently asked questions

### Which export format keeps shapes editable?

Vector formats. Figma converts an imported SVG into editable vector layers, and Sketch can import SVG files. A PNG or JPG arrives as a flat image.

### Why does an exported SVG sometimes have uneditable text?

Figma exports text as outlines by default, so it is not editable text in the exported file unless the Outline text option is turned off.

### Can I scale an exported SVG or PDF?

Figma limits SVG and PDF exports to 1x. SVG is a vector format, so it stays sharp at any display size. For other pixel sizes, export PNG or JPG.

### Are design tokens an official standard?

The Design Tokens Community Group format 2025.10 is a stable report, but it is not a W3C Standard and is not on the W3C Standards Track. Tool support varies.