4 min read · Step-by-step guide
Work with animations
Keep an animation’s source files together, resolve the resources it uses, then preview or transform its editable source in Studio.
What you’ll accomplishAn animation source in Library and a clear route to a resized or localized output.
Before you start
- Library access and an animation package you can use.
- The original HTML/ZIP or supported native animation files with their media and optional fonts.
- Studio access for Relayout or Localize.
Import the animation
Open Train / Upload in Library
Choose the animation upload flow and add your package or source files. Keep the original folder structure so references to images, fonts, and other files can be matched.Name each animation
When adding multiple ZIPs, treat each ZIP as its own animation. Give them recognizable names and choose the intended project placement.Review file resolution
Choose the editable entry when requested. Match missing media to the correct uploads and review repeated references. Missing fonts can be added later; they do not necessarily prevent the initial import.Finish and inspect the source
Follow processing in the job details, then open the source in Library. To attach more files later, open that existing source’s file controls so the update goes to the intended animation.
Understand the previews
Library uses posters and short, muted previews of the first 12 seconds. A poster or short clip does not show every moment of the animation. Native authoring previews are labeled separately from verified playback.
A missing passive preview does not necessarily prevent transforming an available editable HTML entry. Missing resources or actual playback failures still need attention.
Relayout or localize in Studio
Add the animation from Studio’s Assets panel as a base. Select Relayout for size changes or Localize for language variants. Provide copy and layout directions, create the variants, and run them.
On completion, open Result → Open preview to watch the result. Review the timing, complete copy, transitions, fonts, and warnings. Use Download animation for playback and Download source files when that separate editable package is available.
Use Figma for static storyboard frames
If you need stills from an HTML animation on your Figma canvas, use Convert → HTML → Figma. That flow inserts selected timestamped frames; it does not recreate an editable animation timeline in Figma.