One frame, a whole campaign (with sound)

Why now

Three Figma releases landed within three weeks of each other, and together they close the gap between "the key visual is approved" and "here are all 14 deliverables":

• Sep 17, 2026: Figma Weave got a Figma node. You paste a Figma frame into a Weave workflow, wire its text and image layers to inputs, and Weave pushes the results back to a Figma file. (release notes, Figma node guide)
• Sep 30, 2026: Figma Motion (open beta) added audio on the timeline, text animation, reusable animation styles and Lottie export. (release notes, add audio)
• Oct 6, 2026: the Figma agent in Figma Design is generally available. It can follow library guidelines you write in markdown, and it now uses AI credits. (Figma blog, AI credit FAQ)

Add Eleven Music for a short, commercially licensed sting, and the whole loop, from layout to variants to motion to sound, stays on one canvas with one source frame.

Who it's for

Designers, creative directors and brand or social leads at studios, agencies and in-house teams. It helps most when one approved hero has to become a dozen sizes and a few headline tests, and you'd rather spend the afternoon on the idea than on resizing.

What you get

• A master key-visual frame with clean, named layers, plus four format siblings (1:1, 4:5, 9:16, 16:9) built by the Figma agent within your library's rules.
• A reusable Weave workflow that swaps headline copy and hero imagery into those frames and pushes every variant back into a Figma file you can review.
• A 10-second sound-on motion cut of the 9:16 frame, exported as MP4 with audio, plus a silent Lottie for web.
• A review page in Figma that lays out every variant with labels, ready for a crit or a client.

You'll need

Setup

1. Build the master frame (Figma, 10 min)

Make one frame called KV / Master with auto layout and exactly these layer names. Every later step depends on them:

• headline (text)
• subhead (text)
• hero-image (rectangle with an image fill)
• cta (text inside a component, if you have a button component)
• logo (instance from your library)

Use library text and color styles only. Don't detach anything.

2. Give the agent your brand rules (Figma, 10 min, optional but worth it)

If you own the design library, upload a guidelines markdown file to it. The Figma agent reads library guidelines every time someone prompts with that library enabled. A starting point:

# Campaign layout guidelines
- Only use text and color styles from this library. Never introduce new hex values or fonts.
- Headline: max 2 lines at every format. If it doesn't fit, reduce size by one step in the type scale; never below "Display S".
- Logo: always bottom-left, 64px safe area at 1080px width (scale proportionally).
- CTA: always present on 4:5 and 9:16, optional on 1:1 and 16:9.
- Hero image fills the frame; crop focal point stays inside the central 60%.
- Antipatterns: drop shadows on text, centered body copy, more than one CTA.

3. Generate the format siblings (Figma agent, 5 min)

Select KV / Master, open the agent, and paste:

Using the selected frame as the master, create four sibling frames to its right named
"KV / 1x1" (1080×1080), "KV / 4x5" (1080×1350), "KV / 9x16" (1080×1920) and "KV / 16x9" (1920×1080).
Keep every layer name identical to the master (headline, subhead, hero-image, cta, logo).
Reflow with auto layout rather than scaling. Follow the library guidelines. Do not add,
remove or rename layers, and do not introduce new styles. When done, list anything you
couldn't fit and why.

Check the list it gives back. That's where it tells you which format broke a rule.

4. Wire one format into Weave (Figma Weave, 15 min)

1. In Figma, select KV / 4x5 and copy it (⌘C / Ctrl+C).
2. In Figma Weave, create a workflow named DC001 – Campaign variants and paste. The frame becomes a Figma node. You need edit access to the file. If your Figma account isn't linked yet, Weave prompts you once (Settings → Profile → Linked accounts).
3. On the node, click Add Input → Text and connect it to the headline layer. Click Add Input → Image and connect it to hero-image.
4. Add a Text node with your first alternate headline, for example Made for the second draft., and wire it to the headline input. Duplicate it for each headline you want to test (start with three).
5. Add an image model node (Weave has image models from Google, Recraft, Bria, Stable Diffusion and others; any of them works here) and wire its output to the hero-image input. Use a prompt like this:

Editorial product-lifestyle photograph for a {CAMPAIGN} campaign. {SUBJECT} on a
{SURFACE}, soft directional window light from the left, warm neutral palette that
matches #F3EEE3 paper and #2F5D3A green accents, shallow depth of field, generous
negative space in the upper third for a headline, no text, no logos, no hands.
Vertical 4:5 composition.

If you have approved photography, wire an image input with the brand photo instead of generating one, and use the model only for extensions or relighting. Your art director will thank you.

5. Push variants back to Figma (Weave, 5 min)

Press Connect on the Figma node and choose create a new file (call it DC001 – Variants) rather than the original. Weave changes then push to that file automatically, and connected frames show a Weave indicator in Figma's layers and properties panels.

Repeat steps 4–5 for the other three formats, or duplicate the workflow and re-paste a different frame.

6. Score the sting (Eleven Music, 10 min)

In ElevenLabs, open Music and prompt:

Instrumental only, no vocals. 96 BPM. Warm analog synth pad with a soft plucked
arpeggio and light brushed percussion. Optimistic, calm, unhurried. Builds gently
for 6 seconds, resolves on a clean final hit at 0:09, then a short natural tail
to 0:10.

Don't put artist names, song titles, album titles or labels in the prompt. Eleven Music's terms prohibit it. Generate two or three, pick one, and download it as MP3 or WAV. Downloading needs a paid plan.

7. Animate the 9:16 (Figma Motion, 15 min)

In DC001 – Variants, select the 9:16 frame and open Motion:

1. Hero image: scale 106% → 100% over 0.0–1.4s, ease-out.
2. Headline: a word-by-word text animation starting at 0.4s, 80ms stagger, fade + 12px rise.
3. Subhead: fade in at 1.6s over 0.4s.
4. CTA + logo: fade in at 6.0s.
5. Save the easing and duration you like as an animation style (e.g. DC / Soft rise) and publish it to your library, so the next campaign starts from it.
6. Drag your music file onto the timeline. To trim, move the playhead and Split audio at playhead (Option+K on Mac, Alt+K on Windows), then delete the extra region.
7. Export MP4 for social (audio is documented for MP4 and WebM exports). Export Lottie / dotLottie for the website version. Treat it as silent and check it in a Lottie player before you hand it off.

8. Build the review board (Figma agent, 5 min)

Create a new page called "Review". Insert every frame from this file whose name
starts with "KV /" into a grid: one row per headline variant, one column per format,
48px gaps. Above each row add a label with the headline text; above each column add
the format name. Add a sticky note at the top that says "Variants generated in Figma
Weave from KV / Master. Imagery is AI-generated unless marked 'Photo'."

Time to set up

About 60–90 minutes the first time (estimate, not timed). Most of that is naming layers and tuning the image prompt. After that, a new campaign is: swap the master, re-paste into Weave, update the inputs, re-score.

Cost

• Already on Figma Professional: Weave Free ($0) + Eleven Music Starter ($6/mo) = about $6/mo, plus whatever Figma AI credits the agent uses from your monthly allowance.
• Starting from zero: Figma Professional at $20/mo monthly + Weave Free + Eleven Music Starter = about $26/mo. Weave Starter (+$24/mo) if you outgrow 150 credits or want video models.

Prices are list prices as of Oct 14, 2026. ElevenLabs was showing a first-month promo on its pricing page that day. Don't rely on it.

Gotchas

• Two credit pools. Weave tools used inside Figma Design draw on your Figma AI credits. The Figma Weave app has its own plan and credits, billed separately from Figma. Budget for both.
• Sync goes one way automatically. Weave → Figma pushes automatically once connected. If you edit the design in Figma, press Update on the Figma node in Weave to pull those changes in.
• Weave Free has no video models and caps you at 5 workflows. That's fine for this drop, because the motion happens in Figma Motion.
• Eleven Music licensing depends on who you are, not just what you pay. Per the music terms, Starter, Creator and Pro are "for individual use only". Companies with fewer than 10 employees need Scale ($299/mo); fewer than 50 need Business. Film, TV, radio and big studio games are excluded below Enterprise. If you're producing for a client as a company, check this before the sting ships.
• Free Eleven Music can't download and requires attribution. Use it to audition prompts, not for delivery.
• Figma Motion is in open beta. Expect rough edges. Don't make it the only path for a hard deadline.
• AI imagery and brand claims. Don't generate product shots where the product has to look accurate, and label AI-generated imagery in reviews (the sticky note in step 8 does this).
• Agent on Starter is limited. For the agent steps you want a Full seat on Professional or above.

Remix

• Localize instead of A/B: feed the headline input from a list of translated lines (one Text node per locale) and push each to its own page.
• Stay all-in-Weave: on a Weave paid plan, swap step 7 for one of Weave's video models (Runway, Kling, Luma, Google) and Eleven Music for a Weave audio model.
• Hand off to code: export the motion style and let a coding agent apply it through Figma's MCP or skills, which the Sep 30 Motion release says now support animation styles.

Freshness log

• Oct 14, 2026: First published. Desk-checked against Figma release notes (Sep 17, Sep 30 and Oct 6 entries), Weave pricing and Figma node guide, Figma Motion help docs, and ElevenLabs pricing and music terms.

Last verified: Oct 2026 (desk-checked, not run end-to-end). We checked every step, setting and price against the vendors' current docs. We have not yet run this chain live. If a step doesn't match what you see, reply and tell us. It'll be fixed in the next refresh.