{
  "name": "AI design output formats reference",
  "description": "Common output formats of AI design tools (PNG, JPG, SVG, PDF, design tokens, code), what each means in plain language, how Figma and Sketch treat it, and the official source for each row.",
  "checkedOn": "2026-10-29",
  "page": "/reference/ai-design-export-formats/",
  "rows": [
    {
      "format": "PNG",
      "meaning": "A picture made of pixels, saved without losing any detail. It can have transparent areas.",
      "figma": "Imports as an image. An uploaded asset becomes a rectangle layer with the image as its fill.",
      "sketch": "Imports as a bitmap image.",
      "useful": "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.",
      "sources": "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_on": "2026-10-29"
    },
    {
      "format": "JPG",
      "meaning": "A picture made of pixels that is compressed with some loss of quality to keep files small. It has no transparency.",
      "figma": "Imports as an image (same rectangle-with-fill behavior as PNG).",
      "sketch": "Imports as a bitmap image.",
      "useful": "Photographic images and web use where small files matter more than exact fidelity.",
      "sources": "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_on": "2026-10-29"
    },
    {
      "format": "SVG",
      "meaning": "A vector format: shapes and paths described in XML that scale to any size without losing sharpness. It supports transparency.",
      "figma": "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.",
      "sketch": "SVG files and pasted SVG code can be imported. Sketch also exports SVG as a vector format.",
      "useful": "Icons, logos and interface shapes you want to keep editable and sharp at any size.",
      "sources": "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_on": "2026-10-29"
    },
    {
      "format": "PDF",
      "meaning": "A fixed-layout document that keeps text, fonts, vectors and images together regardless of software or hardware.",
      "figma": "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.",
      "sketch": "PDFs can be imported, with each page becoming a frame. Sketch exports PDF as a vector format.",
      "useful": "Sharing or printing a design exactly as laid out, rather than editing it.",
      "sources": "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_on": "2026-10-29"
    },
    {
      "format": "Design tokens (JSON)",
      "meaning": "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.",
      "figma": "Not stated in the source.",
      "sketch": "Not stated in the source.",
      "useful": "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.",
      "sources": "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_on": "2026-10-29"
    },
    {
      "format": "Code or an interactive prototype",
      "meaning": "Source code or a running prototype that renders the interface, produced from a prompt or from existing designs.",
      "figma": "Figma describes Figma Make as a prompt-to-app tool that turns Figma designs into interactive prototypes and can produce code-level changes.",
      "sketch": "Not stated in the source.",
      "useful": "Testing an idea in a browser. Treat the code as a draft that a developer reviews.",
      "sources": "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_on": "2026-10-29"
    }
  ]
}