[{"data":1,"prerenderedAt":330},["ShallowReactive",2],{"help-\u002Fhelp\u002Ffigma-integration":3},{"id":4,"title":5,"body":6,"date":316,"description":319,"extension":320,"hidden":321,"meta":322,"navigation":286,"path":325,"seo":326,"sitemap":327,"stem":328,"__hash__":329},"help\u002Fhelp\u002Ffigma-integration.md","Import design from Figma to Foldwrap",{"type":7,"value":8,"toc":304},"minimark",[9,13,18,66,77,85,89,92,140,145,148,186,189,192,198,201,205,208,211,231,241,245,248,266,269,294,301],[10,11,12],"p",{},"Most Foldwrap campaigns start from approved Figma frames. The plugin brings them in\nas an editable, already-animated creative; copy and paste covers the single\nelements that change later.",[14,15,17],"h2",{"id":16},"import-frames-with-the-plugin","Import frames with the plugin",[19,20,21,30,53,56],"ol",{},[22,23,24,25,29],"li",{},"In Figma, select the frames to import — one frame, or every frame of every size.\nSeveral frames of the same size become ",[26,27,28],"strong",{},"scenes"," that play one after another.",[22,31,32,33,36,37,40,41,52],{},"Open ",[26,34,35],{},"Actions → Plugins & widgets"," and run ",[26,38,39],{},"Foldwrap — Animated HTML5 Banner\nAds",", or install it from the\n",[42,43,51],"a",{"href":44,"className":45,"target":47,"rel":48},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1386253956477384244\u002Ffoldwrap-banner-generator",[46],"external-link","_blank",[49,50],"noreferrer","noopener","Figma Community",".",[22,54,55],{},"Check the sizes the plugin lists and how many frames it found for each.",[22,57,58,59,62,63,52],{},"Click ",[26,60,61],{},"Import",", then ",[26,64,65],{},"Open in Foldwrap",[10,67,68,69,72,73,52],{},"Each size becomes a variant of one creative, with the layer names you gave it in\nFigma and automatic animation already applied. If the creative is not in a\ncampaign yet, the editor offers ",[26,70,71],{},"+ Add to campaign"," named after your Figma\ndocument — see ",[42,74,76],{"href":75},"\u002Fhelp\u002Fcampaigns","Campaigns",[10,78,79,80,84],{},"Want to see it first? The ",[42,81,83],{"href":82},"\u002Fblog\u002Fhow-to-use-figma-plugin","Figma plugin walkthrough","\nfollows one three-size campaign with a two-minute video.",[14,86,88],{"id":87},"before-you-import","Before you import",[10,90,91],{},"A few minutes in Figma saves cleanup on every size:",[93,94,95,101,107,134],"ul",{},[22,96,97,100],{},[26,98,99],{},"Import final or near-final frames."," Every correction after import has to be\nrepeated per size.",[22,102,103,106],{},[26,104,105],{},"Keep changing copy as live text."," Headlines, prices and CTAs you will edit\nlater should stay text, not outlines.",[22,108,109,112,113,117,118,117,121,124,125,128,129,133],{},[26,110,111],{},"Name the layers you will animate or reuse."," ",[114,115,116],"code",{},"CTA",", ",[114,119,120],{},"logo",[114,122,123],{},"price"," read better\non the timeline than ",[114,126,127],{},"Rectangle 12",", and consistent names across sizes let\n",[42,130,132],{"href":131},"\u002Fhelp\u002Fanimation#copy-motion-from-another-size","Copy motion from another size","\nmatch elements between them.",[22,135,136,139],{},[26,137,138],{},"Keep groups shallow."," Deeply nested groups and very large layer counts are\nthe most common cause of an inaccurate import.",[141,142,144],"h3",{"id":143},"warnings-in-the-plugin","Warnings in the plugin",[10,146,147],{},"The plugin checks the selection before import and says so when it finds:",[93,149,150,156,162,172],{},[22,151,152,155],{},[26,153,154],{},"Unsupported node types"," — the named Figma layer types may import inaccurately.",[22,157,158,161],{},[26,159,160],{},"Levels of nesting"," — groups nested more than a few levels deep. Flatten or\nungroup what does not need its own structure.",[22,163,164,167,168,171],{},[26,165,166],{},"Complex structure"," — a very large number of layers. Simplify, or flatten\ndecorative groups with the ",[114,169,170],{},"flat"," prefix below.",[22,173,174,177,178,182,183,52],{},[26,175,176],{},"Fonts"," — a font Foldwrap does not have. Upload it under\n",[42,179,181],{"href":180},"\u002Fuser\u002Ffonts","custom fonts",", or re-import with ",[26,184,185],{},"Freeze text appearance",[10,187,188],{},"You can still import with a warning; compare the result with the frame before\nyou build other sizes on it.",[14,190,185],{"id":191},"freeze-text-appearance",[10,193,194,195,197],{},"Leave ",[26,196,185],{}," off to keep text editable. Turn it on only when a\nfont must look pixel-identical and you do not need to change the words: text is\nexported as vector shapes, so it can no longer be edited as text.",[10,199,200],{},"Icon fonts are always exported as shapes, whatever the setting — as live text\nthey would render as blank boxes in a web banner.",[14,202,204],{"id":203},"control-how-groups-are-imported","Control how groups are imported",[10,206,207],{},"Vector logotypes usually arrive as a group of many shapes — letters, a symbol,\noutlines. The plugin detects such groups and flattens them into one SVG, which\nkeeps the banner's file count and weight down.",[10,209,210],{},"Rename a layer in Figma to override that decision. Start the name with:",[93,212,213,219,225],{},[22,214,215,218],{},[114,216,217],{},"flat …"," — always flatten the group into one shape. Useful for logos and\ndecorative clusters.",[22,220,221,224],{},[114,222,223],{},"keep …"," — keep the group structure, for example to animate its parts\nseparately.",[22,226,227,230],{},[114,228,229],{},"omit …"," — skip the layer entirely. Useful for guides, notes and\nplaceholders.",[10,232,233,234,236,237,240],{},"Renaming ",[114,235,120],{}," to ",[114,238,239],{},"keep logo"," is enough to keep its parts separate.",[14,242,244],{"id":243},"copy-individual-elements-from-figma","Copy individual elements from Figma",[10,246,247],{},"For quick revisions — a new product shot, a replaced logo — you do not need to\nre-import the frame.",[19,249,250,253,263],{},[22,251,252],{},"Select an object in Figma.",[22,254,255,256,259,260,52],{},"Right-click and choose ",[26,257,258],{},"Copy as SVG"," or ",[26,261,262],{},"Copy as PNG",[22,264,265],{},"Paste it into the Foldwrap editor.",[10,267,268],{},"Foldwrap places the element in the open creative, ready to position and\nanimate.",[270,271,281,282],"div",{"className":272},[273,274,275,276,277,278,279,280],"flex","justify-center","items-center","my-6","sw-full","md:w-full","md:m-auto","md:my-6","\n   ",[283,284,288,289,281],"video",{"loading":285,"controls":286,"autoPlay":286,"muted":286,"loop":286,"playsInline":286,"ariaLabel":287},"lazy",true,"Copy individual elements from Figma and paste into Foldwrap","\n      ",[290,291],"source",{"type":292,"src":293},"video\u002Fmp4","\u002Fgfx\u002Fhelp\u002Ffigma-integration\u002Fcopy_paste_from_figma.mp4",[270,295,300],{"className":296},[297,298,299],"text-center","text-sm","my-4","Video shows copying one element from Figma and pasting it into Foldwrap",[10,302,303],{},"Figma and Foldwrap are not kept in sync: changing the Figma file later does not\nupdate creatives you already imported. Make production edits in Foldwrap, and\npaste replacements for changed assets.",{"title":305,"searchDepth":306,"depth":306,"links":307},"",2,[308,309,313,314,315],{"id":16,"depth":306,"text":17},{"id":87,"depth":306,"text":88,"children":310},[311],{"id":143,"depth":312,"text":144},3,{"id":191,"depth":306,"text":185},{"id":203,"depth":306,"text":204},{"id":243,"depth":306,"text":244},{"published":317,"modified":318},"2025-06-25","2026-09-26","Import Figma frames with the Foldwrap plugin, prepare fonts and layers, control flattening with layer-name prefixes, and paste single elements as SVG or PNG for revisions.","md",false,{"layout":323,"h1":5,"keywords":324},"blog","figma to html5 banner, figma plugin import, freeze text appearance, copy from figma, svg paste, foldwrap help","\u002Fhelp\u002Ffigma-integration",{"title":5,"description":319},{"loc":325},"help\u002Ffigma-integration","K_avv7FZLmpYgk4dOw5r2Ogki83HipuKBPZ7oYXAoVM",1790456171358]