Work with animations

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.

Animate source images in Studio

1. 01

   Select your source images

   Open a Studio workflow and select the image or frames you want to animate.
2. 02

   Choose Animate

   Choose Animate in the selection actions to open the animation setup.
3. 03

   Describe the motion

   Add directions for motion, transitions, reading time, and the final hold. Check the image order and canvas size.
4. 04

   Add the animation to Studio

   Check the setup, then choose Add animation to Studio. This adds the animation variant to your workflow.
5. 05

   Run and check the result

   Select the animation and choose Run selected. Watch the completed Result and check the full copy, timing, and warnings.

Import the animation

1. 01

   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.
2. 02

   Name each animation

   When adding multiple ZIPs, treat each ZIP as its own animation. Give them recognizable names and choose the intended project placement.
3. 03

   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.
4. 04

   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 (.zip) to save the selected animation.

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.

Keep going