Help / Symbols: Reusable Animated Groups for HTML5 Banners
A symbol is a group with its own timeline. The motion inside it is timed from the symbol's own start, so you can move it to another moment, loop it, or copy it to another size without retiming its contents. If you know symbols from Adobe Animate, these work like Graphic symbols: their time always follows the main timeline, so preview, export and video stay in step.
Every copy of a symbol stays linked, in every size of the campaign: change the symbol once and all its copies change with it, like a Figma main component and its instances.
Convert a selection to a symbol
Select one or more elements that share a parent, then press F8 or choose
Convert to Symbol from the canvas or Layers menu. On a Mac, F8 may need Fn
unless your F-keys are set as standard function keys.
Nothing moves. The new symbol starts where the earliest of its elements started, and its elements keep their timing inside it. Symbols show a ◈ mark in Layers and on the timeline.
Video and GIF can't go inside a symbol yet: they keep their own clock. Convert refuses them and says why.
Edit a symbol
Double-click the symbol on the canvas, in Layers or on its timeline row. The breadcrumb shows
where you are (300x250 › Badge); the rest of the artwork is dimmed and paused.
What you change inside reaches every copy, in every size, as you make each change: there is no
update step. The symbol's settings show how far that goes, for example 12 uses in 4 sizes.
One Ctrl+Z (⌘Z on Mac) undoes a change in every size at once.
Outside a symbol, its contents move as one piece. Clicking one of its layers in Layers selects the whole symbol, and double-clicking the layer opens the symbol with that layer selected.
- The timeline shows the symbol's own elements, from 0 to the symbol's end.
- Space plays the symbol on its own.
- Drag the purple end marker to add a pause before it repeats. It can't go below the end of the content.
- Press
Escor click Done to go back. Symbols can nest up to four levels deep, and the breadcrumb takes you back one level at a time.
What each copy keeps
Each copy keeps its own place in the design, and everything inside comes from the symbol:
| Each copy's own | Shared by every copy |
|---|---|
| Position and scale | Every element inside: styles, text, images, motion, and their click destinations |
| When it appears and how long it stays, its own entrance and exit | The symbol's length |
| Repeat while visible, Start offset, name, lock, its own click destination |
Instance settings
Select a symbol to see its settings in the parameters panel:
- Repeat while visible: off plays the symbol once and holds its last frame; on repeats it for as long as the symbol is on screen. On a banner that ends, it loops right to the end, so the last frame can land mid-loop.
- Start offset: where the symbol's own timeline starts when it appears. Give three copies of a sparkle offsets of 0, 0.2 and 0.4 s and they twinkle out of step.
On the main timeline, a symbol's bar is how long it stays on screen. Loop boundaries show as ticks, and a striped stretch shows where its last frame holds. Drag the bar's ends to change how long it stays.
Scale a copy
A copy can be bigger or smaller than the symbol and still stay linked. Select it and drag a
corner with the Scale tool (K), or use Scale… next to Dimensions and type a
percentage. Everything inside scales with it: text, borders, corners, shadows and motion
distances. The settings then show the scale, for example Scaled to 150% of the symbol.
A scaled copy keeps following the symbol at its own scale. If you open it and make a change, every other copy gets that change at its own scale. To make the symbol itself bigger for every copy, open the symbol and scale its contents inside.
The plain resize handles of the Move tool change only the copy's box, not what's inside.
Copy symbols to other sizes
Copy and paste, Duplicate and Copy motion from… all keep a symbol a symbol, still linked. Because its timing is local, a pasted symbol plays the same wherever you put it. Motion copy also brings over its Repeat, Start offset and length.
The contents are the same in every size. When one size needs a different version, use Make unique on that copy, or scale the copy if it only needs to be bigger or smaller.
Make unique
Make unique unlinks one copy: it becomes a symbol of its own, with the same contents and scale, and changes to the original no longer reach it. Its own copies, if you paste or duplicate it, are linked to it instead.
What doesn't go through symbols yet
A few tools still change one copy's contents directly instead of changing the symbol: Find & replace, Multiply with data, AI resize and Edit with AI. The symbol wins: such a change shows only in that copy, and it's undone the next time the creative opens. To change what's inside a symbol, open the symbol and edit it there.
The AI tools can still move a symbol and change how long it stays on screen, and the timing inside a symbol is always restored after an AI edit.
A creative made before copies were linked is brought up to date when it opens. A copy whose contents had been changed by hand becomes a symbol of its own, so nothing you made is lost, and a notice says which symbols this happened to.
Break apart
Break apart (⌥⌘B on Mac, Ctrl+Alt+B on Windows) moves a symbol's contents onto the
parent timeline, played once: preset motion becomes custom timing, Repeat is dropped, and
the symbol's own entrance and exit go away. Set Start offset to 0 first. A symbol inside a
plain group can't be broken apart, because elements in a plain group have no timeline of
their own. A scaled copy breaks apart at the size you see.