> 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/~/revisions/snASAvPxATZ9LLkzss64/generating-creative/images/creating-programmatic-template-figma.md).

# Creating Programmatic Template (Figma)

### Overview

Neon Blue supports dynamic text and image rendering through programmatic image templates. These templates are designed in Figma and allow Neon Blue to replace images and text at generation time while preserving layout, styling, and brand control. 

This guide outlines how to create and validate a dynamic image template in Figma for use in dynamic email hero banners, on-site banners, and other similar image placements.

#### Step 1: Create the Base Frame

Start by creating a Figma frame that matches the exact dimensions of the image you intend to generate.

For example:

* Square image: 1200 × 1200
* Landscape or portrait sizes should match your intended output exactly

This frame acts as the container Neon Blue will render into.

{% embed url="<https://www.loom.com/share/ccf5773014494307a381649f8b02affc>" %}

#### Step 2: Add a Replaceable Image Layer

Place an example image inside the frame to represent the image that will later be dynamically replaced.

Important notes:

* The image must be inside the main frame
* Neon Blue will replace this image with other images of the same aspect ratio at render time
* The example image is only a placeholder for layout and alignment

Rename the image layer using the following convention:

```
dyno.image
```

This naming signals to Neon Blue that the image should be dynamically replaced.

#### Step 3: Add Static (Non-Dynamic) Elements

Add any elements that should remain fixed, such as:

* Logos
* Decorative elements
* Background shapes
* Brand marks

These elements do not need special naming and will not be replaced.

#### Step 4: Create Dynamic Text Areas

To add dynamic text:

1. Draw a text box where the text should appear
2. Style the text exactly as you want it rendered (font, size, color, alignment)
3. Use example placeholder text that represents realistic content length

If needed for legibility, you may:

* Add a background rectangle or gradient behind the text
* Adjust padding or contrast

All text within this text box will be replaced dynamically, so ensure the layout can accommodate different text lengths.

Rename the text layer using the following convention:

```
dyno.h1
```

You may define multiple dynamic text fields (for example `dyno.h2`, `dyno.body`, etc.) as needed.

#### Step 5: Test the Template Using the Figma Plugin

To preview and validate the template:

1. Open **Figma → Plugins and widgets**
2. Search for **DINOGY Image Rendering API**
3. Run the plugin
4. Select the frame you want to test

If layers are named correctly (for example `dyno.image`, `dyno.h1`), the plugin will automatically detect them as dynamic parameters and preserve font and styling.

Use the **Template Preview** feature to:

* Randomize text
* Swap images
* Confirm layout stability and readability

This step is critical to ensure the template behaves correctly before handoff.

{% embed url="<https://www.loom.com/share/3fa23358de604103b83dc26af75d1a26>" %}

#### Step 6: Share the Template with Neon Blue

Once the template is complete and validated:

* Share the Figma file with the Neon Blue team
* Neon Blue will handle embedding and integration (for example, into Klaviyo or other channels)
* You will be notified if any adjustments are required before production use

Start with a single template first to validate the workflow before creating additional variations.

***