[{"data":1,"prerenderedAt":304},["ShallowReactive",2],{"post-\u002Fblog\u002Fhow-to-use-figma-plugin":3,"blog_more":279},{"id":4,"title":5,"author_link":6,"author_name":7,"body":8,"date":260,"description":263,"extension":264,"h1":265,"hidden":266,"image":267,"meta":272,"navigation":57,"path":274,"seo":275,"sitemap":276,"stem":277,"__hash__":278},"blog\u002Fblog\u002Fhow-to-use-figma-plugin.md","How to Use the Foldwrap Figma Plugin to Create Animated HTML5 Banner Ads","https:\u002F\u002Fress.ws","Alex Antipov",{"type":9,"value":10,"toc":247},"minimark",[11,15,18,23,39,58,62,70,87,91,98,101,111,115,118,125,129,136,139,154,157,161,164,171,175,178,197,204,208,211,218,222,229,235,241],[12,13,14],"p",{},"If your ad workflow starts in Figma, you can move from approved static layouts to animated HTML5 banners in minutes.",[12,16,17],{},"This guide is for freelancers and agency teams that need faster delivery, cleaner revision cycles, and production-ready exports without manual animation work.",[19,20,22],"h2",{"id":21},"what-you-get-from-this-workflow","What You Get From This Workflow",[24,25,26,30,33,36],"ol",{},[27,28,29],"li",{},"Pixel-faithful import from Figma.",[27,31,32],{},"Automatic first-pass animation in Foldwrap.",[27,34,35],{},"Full timeline control for edits and client revisions.",[27,37,38],{},"Native HTML5 export ready for ad platform upload.",[40,41,47],"div",{"className":42},[43,44,45,46],"flex","justify-center","items-center","my-6",[48,49],"iframe",{"width":50,"height":51,"src":52,"title":53,"frameBorder":54,"allow":55,"referrerPolicy":56,"allowFullScreen":57},560,315,"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FDujjCYDWWf4?si=ISNpAYgiQN5Af1NA","How to use Foldwrap Figma plugin for animated HTML5 banner ads","0","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share","strict-origin-when-cross-origin",true,[19,59,61],{"id":60},"step-1-open-the-foldwrap-plugin-in-figma","Step 1: Open the Foldwrap Plugin in Figma",[12,63,64,65,69],{},"Open your design file in Figma and run the ",[66,67,68],"strong",{},"Foldwrap — Animated HTML5 Banner Ads"," plugin.",[12,71,72,73,76,77],{},"Find it in ",[66,74,75],{},"Plugins -> Manage plugins"," by searching for \"Foldwrap — Animated HTML5 Banner Ads\", or open it directly here:\n",[78,79,68],"a",{"href":80,"className":81,"target":83,"rel":84},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1386253956477384244\u002Ffoldwrap-banner-generator",[82],"external-link","_blank",[85,86],"noreferrer","noopener",[19,88,90],{"id":89},"step-2-select-the-frames-you-want-to-animate","Step 2: Select the Frames You Want to Animate",[12,92,93,94,97],{},"Select the frames you want to turn into ads, then click ",[66,95,96],{},"Import"," in the plugin window.",[12,99,100],{},"Tip: Import only final or near-final frames to reduce cleanup time in the editor.",[40,102,104,105],{"className":103},[43,44,45,46],"\n  ",[106,107],"img",{"src":108,"alt":109,"loading":110},"\u002Fgfx\u002Fblog\u002Fhow-to-use-figma-plugin\u002Fone.png","Foldwrap Figma plugin panel with selected ad frames ready to import","lazy",[19,112,114],{"id":113},"step-3-review-the-imported-result-in-foldwrap","Step 3: Review the Imported Result in Foldwrap",[12,116,117],{},"After import, Foldwrap recreates your design and applies automatic animation so you can start from a usable draft instead of a blank timeline.",[40,119,104,121],{"className":120},[43,44,45,46],[106,122],{"src":123,"alt":124,"loading":110},"\u002Fgfx\u002Fblog\u002Fhow-to-use-figma-plugin\u002Ftwo.png","Imported Figma banner automatically animated inside Foldwrap editor",[19,126,128],{"id":127},"step-4-refine-animation-and-content","Step 4: Refine Animation and Content",[12,130,131,132,135],{},"Click ",[66,133,134],{},"Open in Foldwrap"," to fine-tune motion, pacing, and visual hierarchy.",[12,137,138],{},"You can quickly:",[140,141,142,145,148,151],"ul",{},[27,143,144],{},"Adjust timing on the timeline",[27,146,147],{},"Reorder layers and scenes",[27,149,150],{},"Edit text and CTA wording",[27,152,153],{},"Tune animation style from subtle to dynamic",[12,155,156],{},"Foldwrap keeps your Figma structure and typography intact, so revisions stay predictable.",[19,158,160],{"id":159},"step-5-export-a-native-html5-banner-package","Step 5: Export a Native HTML5 Banner Package",[12,162,163],{},"When your banner is ready, export it as a native HTML5 bundle.",[12,165,166,167,170],{},"Use ",[66,168,169],{},"File -> Download as HTML"," to get a ZIP package you can upload to supported ad platforms.",[19,172,174],{"id":173},"need-to-move-single-elements-instead-of-full-frames","Need to Move Single Elements Instead of Full Frames?",[12,176,177],{},"You can copy individual objects from Figma and paste them into Foldwrap:",[24,179,180,183,194],{},[27,181,182],{},"Right-click an element in Figma.",[27,184,185,186,189,190,193],{},"Choose ",[66,187,188],{},"Copy as SVG"," or ",[66,191,192],{},"Copy as PNG",".",[27,195,196],{},"Paste directly into Foldwrap.",[12,198,199,200],{},"See the full guide here: ",[78,201,203],{"href":202},"\u002Fhelp\u002Ffigma-integration","Import design from Figma to Foldwrap",[19,205,207],{"id":206},"next-step-scale-variations-faster","Next Step: Scale Variations Faster",[12,209,210],{},"After your master creative is approved, scale it with spreadsheet data for localization, price updates, and multi-offer sets.",[12,212,213,214],{},"Read: ",[78,215,217],{"href":216},"\u002Fblog\u002Fscale-banner-ads","How to scale banner ads",[19,219,221],{"id":220},"faq","FAQ",[12,223,224,225,228],{},"Q. Do I need coding skills to use the Foldwrap Figma plugin?",[226,227],"br",{},"\nA. No. The workflow is no-code: design in Figma, import, refine motion, and export.",[12,230,231,232,234],{},"Q. Does Foldwrap preserve fonts and layout from Figma?",[226,233],{},"\nA. Yes, the import is designed to keep layout and typography consistent for production work.",[12,236,237,238,240],{},"Q. Is this workflow suitable for agencies with many banner sizes?",[226,239],{},"\nA. Yes. It is built for repeated production and revision cycles across multiple client deliverables.",[242,243],"callout-general",{"secondary":244,"secondarylink":245,"text":246},"Ask a question","\u002Fcontact","Create animated HTML5 banner ads from Figma with Foldwrap",{"title":248,"searchDepth":249,"depth":249,"links":250},"",2,[251,252,253,254,255,256,257,258,259],{"id":21,"depth":249,"text":22},{"id":60,"depth":249,"text":61},{"id":89,"depth":249,"text":90},{"id":113,"depth":249,"text":114},{"id":127,"depth":249,"text":128},{"id":159,"depth":249,"text":160},{"id":173,"depth":249,"text":174},{"id":206,"depth":249,"text":207},{"id":220,"depth":249,"text":221},{"published":261,"modified":262},"2024-06-30","2026-03-17","Learn how freelancers and agencies use the Foldwrap Figma plugin to turn static frames into animated HTML5 banner ads and export platform-ready ZIP files fast.","md","How to Use the Foldwrap Figma Plugin (Step-by-Step)",false,{"src":268,"alt":269,"width":270,"height":271},"\u002Fgfx\u002Fblog\u002Fhow-to-use-figma-plugin\u002Fcover_1920x1080.jpg","Designer importing Figma banner frames into Foldwrap to create animated HTML5 ads",1920,1080,{"layout":273},"blog","\u002Fblog\u002Fhow-to-use-figma-plugin",{"title":5,"description":263},{"loc":274},"blog\u002Fhow-to-use-figma-plugin","Keo6PehbPlfNqulalj-FaQhx9JBdmbtLlT_gkXhoZjE",[280,288,296],{"date":281,"path":283,"title":284,"image":285},{"published":282},"2026-09-06","\u002Fblog\u002Fproduct-update-2026-september","Foldwrap Product Update (September 2026): Campaigns, Version History, and a New Library",{"src":286,"alt":287,"width":270,"height":271},"\u002Fgfx\u002Fblog\u002Fproduct-update-2026-september\u002Fcover_1920x1080.jpg","September 2026 product update: banner cards in a campaign folder with a version history arrow on a yellow background",{"date":289,"path":291,"title":292,"image":293},{"published":290},"2026-09-03","\u002Fblog\u002Fbanner-campaign-delivery-workflow","Banner Ad Campaign Workflow: Track Sizes and Delivery",{"src":294,"alt":295,"width":270,"height":271},"\u002Fgfx\u002Fblog\u002Fbanner-campaign-delivery-workflow\u002Fcover_1920x1080.jpg","Coverage grid showing which required banner sizes in a campaign are built, exported, or still missing",{"date":297,"path":299,"title":300,"image":301},{"published":298},"2026-08-27","\u002Fblog\u002Flate-client-change-requests","Late Client Change Requests: A Faster Revision Workflow for Animated Ad Campaigns",{"src":302,"alt":303,"width":270,"height":271},"\u002Fgfx\u002Fblog\u002Flate-client-change-requests\u002Fcover_1920x1080.jpg","Creative team applying a late client revision across multiple animated ad sizes at once",1789408369050]