--- url: "/emailify/design/ai-designer.md" description: "Use the AI Designer beta to copy a structured prompt from Emailify, generate JSON with your preferred LLM, and create one or more Emailify templates in Figma." --- # Creating emails with AI Designer > Use the AI Designer beta to copy a structured prompt from Emailify, generate JSON with your preferred LLM, and create one or more Emailify templates in Figma. 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 currently 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. > **Warning:** 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. 7. Paste the raw JSON response into Emailify. 8. Click **Create Email Template**. Emailify creates a new Emailify frame in Figma, inserts the selected component instances, and applies supported text, link, image, alt text, and hidden-layer overrides. ## Step 1: 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. 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, you can keep **Fallback to built-in presets** enabled. This lets the LLM use built-in Emailify presets only when no branded component is a good fit. > **Note:** 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: Brief + Draft Copy 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. ## Example brief ```md # 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: JSON Response 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. If the JSON is not valid, Emailify shows **The JSON could not be parsed.** ## Example JSON response ```json { "name": "AI Designer Launch", "subject": "Build branded emails faster with AI Designer", "preheader": "Turn approved Emailify components into ready-to-review templates.", "components": [ { "role": "header", "componentId": "", "componentName": "Logo Center", "presetKey": "headerLogoCenter", "overrides": { "text": {}, "links": {}, "images": {}, "altText": {}, "hidden": [] } }, { "role": "hero", "componentId": "", "componentName": "Title, Paragraph, Button", "presetKey": "contentTextParagraphTitleButton", "overrides": { "text": { "title": "Create on-brand emails from your approved components", "body": "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.", "button": "Try AI Designer" }, "links": { "button": "https://www.hypermatic.com/emailify/" }, "images": {}, "altText": {}, "hidden": [] } }, { "role": "footer", "componentId": "", "componentName": "Footer Social Logo Center", "presetKey": "footerSocialLogoCenter", "overrides": { "text": {}, "links": {}, "images": {}, "altText": {}, "hidden": [] } } ] } ``` ## JSON fields Each email draft can include: - `name`: the Figma frame name for the generated email. - `subject`: the email subject line. - `preheader`: the email preheader text. - `components`: the ordered list of Emailify components to insert. Each component can include: - `role`: a simple layout role such as `header`, `hero`, `content`, `cta`, `disclaimer`, or `footer`. - `componentId`: the Figma component ID for a component from the current file. - `componentName`: the exact component name from the selected catalog. - `presetKey`: the built-in Emailify preset key, when using default presets. - `fallbackPresetKey`: an optional built-in preset key to use when a Figma component is unavailable. - `overrides.text`: text layer replacements. - `overrides.links`: link replacements using plain `http` or `https` URLs. - `overrides.images`: image replacements with `url`, `alt`, and optional `href`. - `overrides.altText`: alt text replacements for image slots. - `overrides.hidden`: exact layer or slot names to hide when a component has unused placeholder content. ## 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. - 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, ask the LLM to use only component names, IDs, preset keys, and slot names from the copied prompt. - 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.