The AI Designer (BETA) tab helps you turn a campaign brief, draft copy, and your Emailify component library into one or more ready-to-review Emailify templates in Figma.

AI Designer uses a manual LLM workflow. Emailify prepares a structured prompt from your selected component source, you paste that prompt into an AI tool such as Claude, ChatGPT, or Gemini, then you paste the JSON response back into Emailify.

AI Designer does not send your brief to an AI model from inside the plugin. You choose which AI tool to use and where to paste the generated prompt.

How it works

1. Open Emailify in Figma.
2. Click the + icon in the plugin header to open the New Email modal.
3. Select the AI Designer (BETA) tab.
4. Choose your component source.
5. Paste your campaign brief and draft copy.
6. Click Copy Prompt, then paste the prompt into your preferred LLM as the message to run.
7. Paste the raw JSON response into Emailify.
8. Click Create Email Template.

Emailify validates the response, creates a new Emailify frame in Figma, inserts the selected component instances in the returned order, and applies supported text, link, image, alt text, and hidden-layer overrides. Branded components remain linked instances after their content is updated.

Step 1: Select Component Source

Choose which components the LLM should use when planning the email.

• Current Figma Emailify Library uses Emailify components found in the current Figma file, including local components and design-system component instances already used in the file. This is best when you already have approved branded components.
• Default Emailify Presets uses Emailify's included preset components. If the current Figma file does not contain any Emailify components, AI Designer selects this source automatically.

When Current Figma Emailify Library is selected, Fallback to Emailify presets is off by default. This keeps the generated email in strict branded mode and prevents the LLM from switching to default Emailify presets.

Turn Fallback to Emailify presets on only when you want the LLM to use built-in Emailify presets for modules that do not exist in your branded component library.

For the most branded result, keep reusable headers, footers, hero rows, CTA rows, disclaimers, product rows, and content blocks in the same Figma file before generating the prompt.

Step 2: Add Email Brief and Copy Prompt

Paste everything the AI tool needs to design the email:

• Campaign goal, audience, lifecycle stage, timing, and offer.
• Subject line and preheader.
• Approved draft copy, CTA copy, links, image URLs, and alt text.
• Brand guidance, legal requirements, disclaimer copy, ESP requirements, and merge tags.
• Any preferred module order or exact Emailify component names.

Click Copy Prompt after pasting the brief. The copied prompt is generated from the latest text in the brief field, so edits or re-pasted content are included the next time you copy it.

If you upload the prompt as a text file instead of pasting it into the chat box, send a short message with it, such as: Please follow the attached Emailify prompt and return the JSON now.

For large component libraries, AI Designer analyzes the current email brief and includes a small ranked set of exact matches and best-fit components. Each included component and editable slot receives a compact reference that Emailify resolves locally when you paste the JSON response back into the plugin. This avoids copying the complete Figma library into every prompt while keeping the exact component and slot mapping required for reliable insertion.

If a brief uses clear headings such as Email 1, Email 2, or 1) Email, Emailify separates the campaign into focused prompts automatically. Copy Prompt and Create Email Template show the current email number, such as (1 of 3). After you create that template, Emailify keeps the modal open and advances both actions to the next email. Shared campaign context before the first email heading is included in every focused prompt.

If Emailify cannot confidently identify separate email sections, it keeps the brief intact. The prompt still tells the AI tool to return complete emails only and to prefer one complete email over partial JSON when the response would be too large.

You can optionally make component matching more explicit by adding lines such as AI role: hero, AI intent: product launch, AI usage: use when an image and CTA are required, or AI notes: preserve the secondary legal line to a Figma component description. These hints are optional; AI Designer also infers component roles and capacity from names, descriptions, editable layers, and Emailify metadata.

Example brief

# Product Launch Email - Brief + Draft Copy

Audience: Trial users who created an account but have not exported an email.
Goal: Announce the new AI Designer beta and drive users to create a test template.
Tone: Practical, confident, helpful.

Subject: Build branded emails faster with AI Designer
Preheader: Turn approved Emailify components into ready-to-review templates.

Module order:
- Header: use the standard logo header.
- Hero: introduce AI Designer and the main value proposition.
- Content: explain that the workflow uses approved Emailify components first.
- CTA: button linking to https://www.hypermatic.com/emailify/
- Footer: keep the standard footer unchanged.

Hero copy:
Create on-brand emails from your approved components.

Body copy:
Brief your campaign, copy a structured prompt into your preferred AI tool, and let Emailify assemble the response in Figma using your reusable branded components.

CTA:
Try AI Designer

Compliance:
Do not invent claims, discounts, testimonials, or legal copy.

Step 3: Paste JSON Response from your LLM

Ask your AI tool to return strict JSON only, then paste the raw JSON into the JSON Response field.

AI Designer accepts:

• One email draft as a single JSON object.
• Multiple email drafts in an emails array.
• Multiple email drafts in a templates array.

New prompts include a schema version, component-catalog fingerprint, and brief fingerprint. Emailify blocks stale JSON if the selected component library or brief changed after the prompt was copied. It also checks component references, editable slots, URLs, image alt text, placeholder content, header/footer placement, and fallback usage before enabling Create Email Template.

If the JSON is not valid, Emailify shows The JSON could not be parsed. You can copy a compact repair prompt and run it in your preferred LLM.

Example JSON response

{
  "schemaVersion": 1,
  "catalogFingerprint": "a1-example",
  "requestFingerprint": "r-example",
  "emails": [
    {
      "name": "AI Designer Launch",
      "subject": "Build branded emails faster with AI Designer",
      "preheader": "Turn approved Emailify components into ready-to-review templates.",
      "timing": "",
      "job": "Introduce the feature and drive a test template",
      "components": [
        {
          "role": "hero",
          "componentRef": "c-example",
          "overrides": {
            "text": [
              {
                "slotRef": "t-example-title",
                "value": "Create on-brand emails from your approved components"
              },
              {
                "slotRef": "t-example-body",
                "value": "Brief your campaign, copy a structured prompt into your preferred AI tool, and let Emailify assemble the response in Figma using your reusable branded components."
              },
              {
                "slotRef": "t-example-button",
                "value": "Try AI Designer"
              }
            ],
            "links": [
              {
                "slotRef": "l-example-button",
                "value": "https://www.hypermatic.com/emailify/"
              }
            ],
            "images": [],
            "hidden": []
          }
        }
      ]
    }
  ]
}

The component and slot references above are illustrative. Always use the references included in the prompt copied from your current Emailify file.

JSON fields

The top-level response includes:

• schemaVersion: the AI Designer response contract version.
• catalogFingerprint: identifies the selected component library used to generate the prompt.
• requestFingerprint: identifies the exact brief or campaign email used to generate the prompt.
• emails: one or more complete email drafts. Focused multi-email prompts contain one email.

Each email draft includes:

• name: the Figma frame name for the generated email.
• subject: the email subject line.
• preheader: the email preheader text.
• timing: optional send timing from the brief, or an empty string.
• job: optional objective from the brief, or an empty string.
• components: the ordered list of Emailify components to insert.

Each component includes:

• role: a simple layout role such as header, hero, content, cta, disclaimer, or footer.
• componentRef: the compact component reference copied in the prompt. Emailify resolves it to the exact Figma component or built-in preset locally.
• overrides.text: an array of {slotRef, value} text replacements.
• overrides.links: an array of {slotRef, value} link replacements using plain http or https URLs.
• overrides.images: an array of {slotRef, url, alt, href} image replacements.
• overrides.hidden: slot references to hide when a component has unused optional or placeholder content.

Older responses using exact componentId, componentName, presetKey, and named override objects remain supported for compatibility.

Best practices

• Use exact component names from your Emailify component library when you want specific branded modules.
• Keep header components first and footer components last unless your brief says otherwise.
• Use a hero or feature component near the top when the campaign needs a strong opening message.
• Use one clear CTA per email unless the brief specifically asks for multiple CTAs.
• Use plain absolute URLs, not markdown-formatted links.
• Include useful alt text for every image URL.
• Preserve legal, compliance, discount, timing, merge tag, and disclaimer copy exactly where required.
• For multi-email campaigns, use a clear heading for each email so Emailify can create focused prompts and advance through them automatically.
• Review the generated Figma template before exporting it to your ESP.

Troubleshooting

• If Emailify says The JSON could not be parsed, remove markdown fences, comments, trailing commas, or any text before or after the JSON.
• If a component does not match, copy a fresh prompt and make sure the LLM uses only the componentRef and slotRef values included in it.
• If placeholder content remains visible, add the unused layer or slot name to overrides.hidden, or choose a simpler component.
• If the output feels generic, switch to Current Figma Emailify Library and make sure your branded Emailify components are in the current file.
• If Emailify says the library or brief changed, copy a fresh prompt. This prevents JSON generated from an older catalog or earlier version of the brief from being inserted accidentally.
• If a multi-email brief is not separated automatically, add headings such as Email 1 - Welcome, Email 2 - Follow-up, and Email 3 - Offer, then copy the prompt again.