> For the complete documentation index, see [llms.txt](https://docs.neonblue.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.neonblue.ai/generating-creative/images/creating-programmatic-templates-figma.md).

# Creating Programmatic Templates (Figma)

## Creating Programmatic Templates (Figma)

### Overview

Programmatic templates let you create dynamic images — images where text, colors, or other elements change per variant. This is useful for hero images with headlines, banners with personalized copy, or any image that needs to render different text at send time.

This workflow applies to **images with rendered text**. If your images are purely static (e.g., product photos, icons), you don't need this — just use standard image variables.

***

### How It Works

1. Design a Figma frame with dynamic text layers
2. Use the Neon Blue Figma plugin to generate a dynamic image URL
3. Reference that URL in your email template — text is passed as a query parameter and rendered into the image at send time

***

### Figma Setup

#### 1. Create the Frame

Build a Figma frame at the **exact output dimensions** of the final image (e.g., the hero image size in your email template).

#### 2. Name Dynamic Layers

Use the `nb.*` prefix to mark layers the plugin should treat as replaceable:

| Layer Name | Purpose                            |
| ---------- | ---------------------------------- |
| `nb.image` | The dynamic background/image layer |
| `nb.h1`    | Primary dynamic text               |
| `nb.h2`    | Secondary dynamic text             |
| `nb.body`  | Body text                          |

The plugin detects these named layers automatically and preserves their styling (font, size, color, position) during rendering.

#### 3. Add Static Elements

Logos, shapes, backgrounds, and other non-dynamic elements can be added normally — they remain constant across all variants.

#### 4. Design for Variable Text Length

Leave padding around text layers and avoid fixed line breaks. The text content will change per variant, so the layout needs to accommodate different lengths.

***

### Figma Plugin

The plugin is called **Neon Blue Dynamic Creative** (currently available as a development build — Figma approval pending).

#### Installation

1. Download the plugin archive
2. Open the archive — it creates a `publish` folder
3. In Figma's **desktop app**: Plugins > Development > Import plugin from manifest…
4. Select `publish/manifest.json`
5. Access via Cmd+K and search for "Dynamic Creative"

#### Template Preview

Use the plugin's Template Preview to test:

* Text randomization (different copy lengths)
* Image swapping
* Layout stability at different text sizes

***

### Dynamic Image URLs

The plugin generates a CDN URL for your Figma frame:

```
https://cdn.aws.neonblue.ai/v1/dc/{ORG_ID}/{TEMPLATE_ID}.png
```

To render dynamic text into the image, pass it as a query parameter. The parameter name matches the Figma layer name (without the `nb.` prefix):

```
https://cdn.aws.neonblue.ai/v1/dc/{ORG_ID}/{TEMPLATE_ID}.png?text=Hello+World!
```

#### Using in Email Templates

To connect the dynamic image to a Neon Blue variable in your email template, use the template variable as the query parameter value:

```liquid
https://cdn.aws.neonblue.ai/v1/dc/{ORG_ID}/{TEMPLATE_ID}.png?text={{ nb.h1 | url_param_escape }}
```

The `url_param_escape` Liquid filter ensures special characters are passed correctly.

***

### Best Practices

* **Design at exact output dimensions** — the image renders at the frame size, so match your email layout
* **Test with varied text lengths** — use the plugin's preview to catch overflow or layout issues
* **Use `url_param_escape`** on all template variables passed as URL parameters
* **Keep text layers simple** — the renderer preserves Figma styling but complex effects may not translate