Skip to main content

​
Step-by-step

1

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
2

Configure layer formats

Each layer has a format toggle group: M · PNG · SVG
ToggleMeaning
M (Manifest)Layer is encoded as geometry data in manifest.json. No separate file is exported. Best for solid rectangles and simple paths.
PNGLayer is rasterised and saved as a PNG file. Best for complex vector art, images, or anything with gradients/effects.
SVGLayer 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
3

Mark slots (optional)

See Slot Marking for details. Slots label which layers are dynamic user/brand content.
4

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
5

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

​
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)
  • Format toggles — active format is highlighted
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.

​
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

All direct children are listed and exported individually. This is the standard workflow.
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.