Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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:

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):

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:

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

PreviousImages
NextSetting Image Variables in Email Templates

Last updated