> ## 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.

# Slot Marking

> Tag layers as dynamic placeholders — user photo, user text, or brand logo — so Creator Studio knows what content to prompt the user to provide.

## What are slots?

A **slot** is a marker on a layer that says *"this layer will be replaced by user-provided content"*. When a user personalises a template in GoalGen, slots tell the app which layers to swap out and what kind of content to ask for.

<CardGroup cols={3}>
  <Card title="userImage" icon="image" iconType="solid" color="#7b61ff">
    User's personal photo — profile picture, team headshot, event photo, etc.
  </Card>

  <Card title="userText" icon="text-size" iconType="solid" color="#ff9f43">
    User-editable text — name, headline, quote, caption, etc.
  </Card>

  <Card title="brandLogo" icon="building" iconType="solid" color="#00DB65">
    Brand or organisation logo image.
  </Card>
</CardGroup>

***

## Marking slots in the plugin

In the plugin's layer list, each row has a **slot button** on the right side of the layer name.

Click it to cycle through roles:

```
[no slot] → userImage → userText → brandLogo → [no slot] → …
```

The button displays a coloured badge when a role is active:

| Badge      | Role        | Colour           |
| ---------- | ----------- | ---------------- |
| `📷 Photo` | `userImage` | Purple `#7b61ff` |
| `T Text`   | `userText`  | Orange `#ff9f43` |
| `◆ Logo`   | `brandLogo` | Green `#00DB65`  |

When no slot is assigned the button shows a neutral grey `＋ Slot`.

***

## How slots appear in the manifest

Slots are serialised into the `slots[]` array of `manifest.json`:

```json theme={null}
"slots": [
  {
    "slotId": "slot-0",
    "targetLayerId": "2:46",
    "role": "userImage"
  },
  {
    "slotId": "slot-1",
    "targetLayerId": "3:12",
    "role": "userText"
  }
]
```

* `slotId` is auto-generated sequentially (`slot-0`, `slot-1`, …)
* `targetLayerId` matches the Figma node ID in `layers[]`
* The `slots` key is **omitted entirely** if no slots are marked

***

## Creator Studio behaviour

When a template with slots is loaded into Creator Studio:

1. **userImage** slots render a dashed placeholder with an upload icon. When the user taps it, the image picker opens.
2. **userText** slots render an editable text input overlaid on the canvas layer.
3. **brandLogo** slots behave like `userImage` but are pre-populated from the user's saved brand kit.

<Info>
  Slots are additive — they don't change how a layer is exported (PNG, SVG, or manifest geometry). A `userImage` slot on an SVG layer simply means the SVG will be replaced at personalisation time.
</Info>

***

## Best practices

<Tip>
  **Name your layers clearly before exporting.** Slot assignments are tied to Figma node IDs, which are stable, but the `name` field in the manifest is what Creator Studio shows in its layer inspector. Good names (`profile-photo`, `headline-text`) make templates easier to manage.
</Tip>

<Tip>
  **One slot per layer.** A single layer can have one role at a time. If a layer serves multiple purposes, duplicate it in Figma and assign roles to each copy.
</Tip>

<Warning>
  Slots are currently assigned manually in the plugin. Future versions will support auto-detection from Figma layer naming conventions (e.g. layers prefixed with `[photo]`, `[text]`, `[logo]`).
</Warning>

***

## Planned: auto-slot detection

The roadmap includes automatic slot detection based on layer name conventions:

| Layer name prefix | Auto-assigned role |
| ----------------- | ------------------ |
| `[photo]`         | `userImage`        |
| `[text]`          | `userText`         |
| `[logo]`          | `brandLogo`        |

This will be opt-in and overridable via the slot button in the UI.