> ## Documentation Index
> Fetch the complete documentation index at: https://docs.goalgen.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Exporting Templates

> Select a frame, configure layer formats, and download a Studio-ready ZIP package.

## Step-by-step

<Steps>
  <Step title="Select a frame">
    Click any top-level **Frame** on the Figma canvas. The plugin panel updates immediately, showing:

    * A **full-width preview** of the frame (up to 320 px wide)
    * A **layer list** with every visible child layer
  </Step>

  <Step title="Configure layer formats">
    Each layer has a format toggle group: **`M`** · **`PNG`** · **`SVG`**

    | Toggle         | Meaning                                                                                                                         |
    | -------------- | ------------------------------------------------------------------------------------------------------------------------------- |
    | `M` (Manifest) | Layer is encoded as geometry data in `manifest.json`. No separate file is exported. Best for solid rectangles and simple paths. |
    | `PNG`          | Layer is rasterised and saved as a PNG file. Best for complex vector art, images, or anything with gradients/effects.           |
    | `SVG`          | Layer is exported as an SVG file. Best for icons, logos, and crisp vector shapes.                                               |

    The plugin picks sensible defaults automatically:

    * **Simple rectangles** → `M`
    * **Vector paths & groups** → `SVG`
    * **Images / rasters** → `PNG`
  </Step>

  <Step title="Mark slots (optional)">
    See [Slot Marking](/figma-plugin/slots) for details. Slots label which layers are dynamic user/brand content.
  </Step>

  <Step title="Export">
    Click **Export Frame**. The plugin:

    1. Exports each layer according to its format setting
    2. Builds the `StudioTemplateManifestV1` JSON
    3. Captures a `thumbnail.png` of the full frame
    4. Packages everything into a STORE-mode ZIP (no compression)
    5. Triggers a browser download of `<frame-name>.zip`
  </Step>

  <Step title="Import into Creator Studio">
    In Creator Studio → **Templates** → **New Template** → **Import ZIP**, upload the downloaded file. Studio will:

    1. Extract the ZIP
    2. Upload all asset files to the CDN
    3. Patch `manifest.json` with real CDN URLs
    4. Place layers on the canvas at the correct positions and sizes
  </Step>
</Steps>

***

## Layer list

The layer list shows every direct child of the selected frame. Each row displays:

```
[type icon]  Layer name          [slot button]  [M] [PNG] [SVG]
```

* **Type icon** — 🖼 image, 📐 vector, ▭ rect, T text
* **Slot button** — cycles through slot roles (see [Slots](/figma-plugin/slots))
* **Format toggles** — active format is highlighted

<Info>
  Layers nested deeper than one level are flattened into their parent's export. If you need a sub-layer exported separately, flatten the layer hierarchy in Figma first.
</Info>

***

## The export ZIP

```
my-template.zip
├── manifest.json       ← StudioTemplateManifestV1
├── thumbnail.png       ← 320 px frame preview
├── background.svg      ← per-layer assets (name = layer slug)
├── logo.svg
├── photo.png
└── headline-text.png   ← (if PNG format selected)
```

Filenames are derived from the Figma layer name, slugified to lowercase-hyphenated ASCII. Duplicate names get a numeric suffix (`vector.svg`, `vector-2.svg`, …).

***

## Exporting groups vs individual layers

<Tabs>
  <Tab title="Frame selected">
    All direct children are listed and exported individually. This is the standard workflow.
  </Tab>

  <Tab title="Group selected">
    The group is treated as a single layer and exported as one file (PNG or SVG). Its children are **not** listed separately.
  </Tab>
</Tabs>

<Tip>
  For best results, keep your template as a flat frame with named direct-child layers rather than deeply nested groups. This gives you the most granular control over slot assignment and per-layer formats.
</Tip>