[{"data":1,"prerenderedAt":341},["ShallowReactive",2],{"help-\u002Fhelp\u002Fsymbols":3},{"id":4,"title":5,"body":6,"date":326,"description":328,"extension":329,"hidden":330,"meta":331,"navigation":335,"path":336,"seo":337,"sitemap":338,"stem":339,"__hash__":340},"help\u002Fhelp\u002Fsymbols.md","Symbols: Reusable Animated Groups for HTML5 Banners",{"type":7,"value":8,"toc":312},"minimark",[9,18,21,26,45,48,51,55,62,77,80,108,112,115,158,162,165,179,182,186,208,211,214,218,229,236,239,244,248,265,268,271,275,287,291],[10,11,12,13,17],"p",{},"A ",[14,15,16],"strong",{},"symbol"," is a group with its own timeline. The motion inside it is timed from the symbol's\nown start, so you can move it to another moment, loop it, or copy it to another size without\nretiming its contents. If you know symbols from Adobe Animate, these work like Graphic symbols:\ntheir time always follows the main timeline, so preview, export and video stay in step.",[10,19,20],{},"Every copy of a symbol stays linked, in every size of the campaign: change the symbol once and\nall its copies change with it, like a Figma main component and its instances.",[22,23,25],"h2",{"id":24},"convert-a-selection-to-a-symbol","Convert a selection to a symbol",[10,27,28,29,33,34,37,38,40,41,44],{},"Select one or more elements that share a parent, then press ",[30,31,32],"code",{},"F8"," or choose\n",[14,35,36],{},"Convert to Symbol"," from the canvas or Layers menu. On a Mac, ",[30,39,32],{}," may need ",[30,42,43],{},"Fn","\nunless your F-keys are set as standard function keys.",[10,46,47],{},"Nothing moves. The new symbol starts where the earliest of its elements started, and its\nelements keep their timing inside it. Symbols show a ◈ mark in Layers and on the timeline.",[10,49,50],{},"Video and GIF can't go inside a symbol yet: they keep their own clock. Convert refuses them\nand says why.",[22,52,54],{"id":53},"edit-a-symbol","Edit a symbol",[10,56,57,58,61],{},"Double-click the symbol on the canvas, in Layers or on its timeline row. The breadcrumb shows\nwhere you are (",[30,59,60],{},"300x250 › Badge","); the rest of the artwork is dimmed and paused.",[10,63,64,65,68,69,72,73,76],{},"What you change inside reaches every copy, in every size, as you make each change: there is no\nupdate step. The symbol's settings show how far that goes, for example ",[14,66,67],{},"12 uses in 4 sizes",".\nOne ",[30,70,71],{},"Ctrl+Z"," (",[30,74,75],{},"⌘Z"," on Mac) undoes a change in every size at once.",[10,78,79],{},"Outside a symbol, its contents move as one piece. Clicking one of its layers in Layers selects\nthe whole symbol, and double-clicking the layer opens the symbol with that layer selected.",[81,82,83,87,90,97],"ul",{},[84,85,86],"li",{},"The timeline shows the symbol's own elements, from 0 to the symbol's end.",[84,88,89],{},"Space plays the symbol on its own.",[84,91,92,93,96],{},"Drag the purple ",[14,94,95],{},"end marker"," to add a pause before it repeats. It can't go below the\nend of the content.",[84,98,99,100,103,104,107],{},"Press ",[30,101,102],{},"Esc"," or click ",[14,105,106],{},"Done"," to go back. Symbols can nest up to four levels deep, and the\nbreadcrumb takes you back one level at a time.",[22,109,111],{"id":110},"what-each-copy-keeps","What each copy keeps",[10,113,114],{},"Each copy keeps its own place in the design, and everything inside comes from the symbol:",[116,117,118,131],"table",{},[119,120,121],"thead",{},[122,123,124,128],"tr",{},[125,126,127],"th",{},"Each copy's own",[125,129,130],{},"Shared by every copy",[132,133,134,143,151],"tbody",{},[122,135,136,140],{},[137,138,139],"td",{},"Position and scale",[137,141,142],{},"Every element inside: styles, text, images, motion, and their click destinations",[122,144,145,148],{},[137,146,147],{},"When it appears and how long it stays, its own entrance and exit",[137,149,150],{},"The symbol's length",[122,152,153,156],{},[137,154,155],{},"Repeat while visible, Start offset, name, lock, its own click destination",[137,157],{},[22,159,161],{"id":160},"instance-settings","Instance settings",[10,163,164],{},"Select a symbol to see its settings in the parameters panel:",[81,166,167,173],{},[84,168,169,172],{},[14,170,171],{},"Repeat while visible",": off plays the symbol once and holds its last frame; on repeats it\nfor as long as the symbol is on screen. On a banner that ends, it loops right to the end, so\nthe last frame can land mid-loop.",[84,174,175,178],{},[14,176,177],{},"Start offset",": where the symbol's own timeline starts when it appears. Give three copies\nof a sparkle offsets of 0, 0.2 and 0.4 s and they twinkle out of step.",[10,180,181],{},"On the main timeline, a symbol's bar is how long it stays on screen. Loop boundaries show as\nticks, and a striped stretch shows where its last frame holds. Drag the bar's ends to change\nhow long it stays.",[22,183,185],{"id":184},"scale-a-copy","Scale a copy",[10,187,188,189,72,192,195,196,199,200,203,204,207],{},"A copy can be bigger or smaller than the symbol and still stay linked. Select it and drag a\ncorner with the ",[14,190,191],{},"Scale tool",[30,193,194],{},"K","), or use ",[14,197,198],{},"Scale…"," next to ",[14,201,202],{},"Dimensions"," and type a\npercentage. Everything inside scales with it: text, borders, corners, shadows and motion\ndistances. The settings then show the scale, for example ",[14,205,206],{},"Scaled to 150% of the symbol",".",[10,209,210],{},"A scaled copy keeps following the symbol at its own scale. If you open it and make a change,\nevery other copy gets that change at its own scale. To make the symbol itself bigger for every\ncopy, open the symbol and scale its contents inside.",[10,212,213],{},"The plain resize handles of the Move tool change only the copy's box, not what's inside.",[22,215,217],{"id":216},"copy-symbols-to-other-sizes","Copy symbols to other sizes",[10,219,220,221,224,225,228],{},"Copy and paste, ",[14,222,223],{},"Duplicate"," and ",[14,226,227],{},"Copy motion from…"," all keep a symbol a symbol, still\nlinked. Because its timing is local, a pasted symbol plays the same wherever you put it.\nMotion copy also brings over its Repeat, Start offset and length.",[10,230,231,232,235],{},"The contents are the same in every size. When one size needs a different version, use\n",[14,233,234],{},"Make unique"," on that copy, or scale the copy if it only needs to be bigger or smaller.",[22,237,234],{"id":238},"make-unique",[10,240,241,243],{},[14,242,234],{}," unlinks one copy: it becomes a symbol of its own, with the same contents and\nscale, and changes to the original no longer reach it. Its own copies, if you paste or\nduplicate it, are linked to it instead.",[22,245,247],{"id":246},"what-doesnt-go-through-symbols-yet","What doesn't go through symbols yet",[10,249,250,251,254,255,254,258,224,261,264],{},"A few tools still change one copy's contents directly instead of changing the symbol:\n",[14,252,253],{},"Find & replace",", ",[14,256,257],{},"Multiply with data",[14,259,260],{},"AI resize",[14,262,263],{},"Edit with AI",". The symbol wins:\nsuch a change shows only in that copy, and it's undone the next time the creative opens. To\nchange what's inside a symbol, open the symbol and edit it there.",[10,266,267],{},"The AI tools can still move a symbol and change how long it stays on screen, and the timing\ninside a symbol is always restored after an AI edit.",[10,269,270],{},"A creative made before copies were linked is brought up to date when it opens. A copy whose\ncontents had been changed by hand becomes a symbol of its own, so nothing you made is lost,\nand a notice says which symbols this happened to.",[22,272,274],{"id":273},"break-apart","Break apart",[10,276,277,72,279,282,283,286],{},[14,278,274],{},[30,280,281],{},"⌥⌘B"," on Mac, ",[30,284,285],{},"Ctrl+Alt+B"," on Windows) moves a symbol's contents onto the\nparent timeline, played once: preset motion becomes custom timing, Repeat is dropped, and\nthe symbol's own entrance and exit go away. Set Start offset to 0 first. A symbol inside a\nplain group can't be broken apart, because elements in a plain group have no timeline of\ntheir own. A scaled copy breaks apart at the size you see.",[22,288,290],{"id":289},"related-guides","Related guides",[81,292,293,300,306],{},[84,294,295],{},[296,297,299],"a",{"href":298},"\u002Fhelp\u002Ftimeline","Timeline editing",[84,301,302],{},[296,303,305],{"href":304},"\u002Fhelp\u002Fanimation","Animation modes: auto, custom, keyframes",[84,307,308],{},[296,309,311],{"href":310},"\u002Fhelp\u002Fkeyboard-shortcuts","Keyboard shortcuts",{"title":313,"searchDepth":314,"depth":314,"links":315},"",2,[316,317,318,319,320,321,322,323,324,325],{"id":24,"depth":314,"text":25},{"id":53,"depth":314,"text":54},{"id":110,"depth":314,"text":111},{"id":160,"depth":314,"text":161},{"id":184,"depth":314,"text":185},{"id":216,"depth":314,"text":217},{"id":238,"depth":314,"text":234},{"id":246,"depth":314,"text":247},{"id":273,"depth":314,"text":274},{"id":289,"depth":314,"text":290},{"published":327,"modified":327},"2026-09-27","Turn a selection into a symbol with its own timeline, reuse it across banner sizes with every copy kept in sync, scale a copy, loop it and phase-shift copies in Foldwrap.","md",false,{"layout":332,"h1":333,"keywords":334},"blog","Symbols: Groups with Their Own Timeline","symbol, nested timeline, reusable animation, linked copies, component, scale symbol, looping animation, banner badge, foldwrap help",true,"\u002Fhelp\u002Fsymbols",{"title":5,"description":328},{"loc":336},"help\u002Fsymbols","KSbOuqnJWJybrlfAlIQBK6stVpGELZn6BQW5jq5YFvU",1790622533489]