# Creating Programmatic Templates (Figma)

### Overview

This guide is intended for **designers, or lifecycle marketers working with a designer,** who need to create images where **text is rendered directly on the image**. 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.

{% hint style="info" %}
You only need to follow this guide **if your image includes text rendered on the image.** If your images do not include text, you do not need a programmatic image template.
{% endhint %}

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. 

### What a Programmatic Image Template Does

A programmatic image template allows Neon Blue to:

* Swap images dynamically
* Replace text dynamically
* Preserve fonts, styling, alignment, and layout

This ensures text-on-image designs remain readable and brand-safe even when content varies per user.

#### 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 the intended output exactly

This frame acts as the container Neon Blue will render into. The output image will always match these dimensions.

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

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

Inside the frame, place an example image 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 at render time with other images of the same aspect ratio
* The example image is only a placeholder for layout and alignment

Rename the image layer using the following required naming convention:

```
dyno.image
```

This name is required. If the layer is missing or incorrectly named, the image will not be replaced dynamically.

#### 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 by Neon Blue.

#### 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 a **realistic content length**

All text within this text box will be replaced dynamically at render time.

Rename the text layer using the following convention:

```
dyno.h1
```

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

#### Designing for Variable Text Length

Because text is dynamic:

* Avoid designs that rely on exact line breaks
* Ensure sufficient padding around text
* Expect text length to vary across users

If needed for legibility, you may:

* Add a background rectangle or gradient behind the text
* Increase contrast between text and imagery

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

Before sharing the template, you must validate it using Neon Blue’s official Figma plugin.

To test the template:

1. Open **Figma → Plugins and widgets**
2. Search for **DINOGY Image Rendering API.** This is Neon Blue’s preferred Figma plugin used only for preview and validation.
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
* Test image text lengths
* Confirm layout stability and readability

This validation 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 adjustments are required before production use. Common reasons for revisions include:

* Missing or incorrect layer names
* Insufficient padding for variable text
* Text readability or contrast issues

We recommend starting with a **single template** to validate the workflow before creating additional variations.

####

***