What are Motion templates?
Motion templates extend your static templates with lightweight animation capabilities. Instead of relying on motion design tools or external agencies, brand and performance teams can create animated campaign assets directly in Frontify.
With Motion templates, Template admins can:
Import a static design from Figma
Apply simple animation presets to text and image layers
Publish an animated template to a Template Library
End users can:
Customize content (text, logos, images, etc. Same as with static Figma templates)
Preview the animation
Export the final asset as:
GIF
MP4
HTML5
Note: Motion templates only works with Figma files.
Who is it for?
Motion Templates are designed for
Template admins and designers who want to create rich, animated content and scale them with Templates across their business
Non-designers who need to produce animated versions of existing brand assets, such as social ads and display banners, while staying perfectly on brand.
Motion template file setup
Motion templates are currently only compatible with Figma designs. Please follow the same procedure in Setting up a Figma file. Please note: we only support one scene (one page) in a design.
Importing to Frontify
1. Copy the Figma frame URL
To import a design, you can copy a frame URL by either:
Right click on a Frame and "Copy link to selection"
Use the shortcut ⌘/cntrl+L while the frame is selected
The file link can also be used. Either copy the URL from the address bar or in the upper right corner, open the Share window and copy the file link. Make sure the file has only one frame.
2. Open your template library on Frontify
Go to the template library that you want to import into.
3. Press "New" > "Figma frame URL" under Motion Template
4. Paste the Figma file URL
5. Press "Create template"
6. You're done!
Motion templates display a distinctive icon in template libraries, making them easy to identify. Check that the template has imported as expected. The Motion tab will automatically open when you click on the template.
Note: The source file will also be linked to the Template. You can access the Figma file by clicking the "View source" in the context menu in the upper right corner.
Motion mode and Layout mode
Once inside a motion template, you'll see two modes in the top navigation: Motion and Layout.
Layout mode works the same way as a static template. Use it to manage and lock individual content layers — text, images, logos — and control what end users can and can't edit, and which download formats are available to them.
Motion mode is where you add and configure animations. Select a layer from the timeline, choose an animation type, and adjust settings like speed, direction, and easing. Changes made in Motion mode affect how the template animates on export.
Switch between the two modes freely as you build your template.
Adding animations
Once imported, select a layer in the timeline to start animating. For each layer you can:
Choose an animation type (entry, emphasis, or exit)
Configure settings like direction, speed, easing and more.
Animate layers independently of one another
Scenes
A Scene represents a single animated canvas.
Each Motion template supports one scene
A scene is created from one Figma frame
All animations happen within that single scene
Layers
A layer is the individual element inside your scene that can be animated (same as in a static template).
Examples of layers:
Text
Images
Logos
Shapes or backgrounds
Each layer can:
Have its own animation
Animate independently of other layers
Be locked or editable for end users (content only)
Animation types
There are three animation types, each controlling a different phase of the animation.
Type | What it does | Use it when |
Entry | Controls how a layer appears | You want content to appear progressively or guide attention to a specific element |
Emphasis | Adds motion while the layer is visible | You want to draw attention to a headline or call to action without removing the element |
Exit | Controls how a layer leaves the scene | You want to transition away from content or prepare the viewer for a loop or end frame |
Available entrance animations: fade in, flip in, slide in, scale in
Available emphasis animations: bounce, float, pulse, spin, wiggle
Available exit animations: fade out, flip out, slide out, scale out
Animation settings apply per layer:
Direction — controls which way the animation moves (applies to slide, flip, and scale)
Speed — controls how fast the animation plays
Easing — controls how the animation accelerates and decelerates
And more, depending on the animation chosen.
Export presets
GIF
Best for: display ads, social feeds, email
Looping — choose whether the animation plays once or loops continuously
Frame rate — controls smoothness vs. file size. 12–15 fps gives lighter files; 24 fps gives smoother motion
Gifs tend to take the longest to render and produce the heaviest file sizes
MP4
Best for: social platforms, video placements
Quality — higher quality gives better clarity but a larger file; lower quality reduces file size and load time
Frame rate — 24–30 fps is recommended for social and video platforms
HTML5
Best for: programmatic display, Google Ads campaigns
Image quality — controls compression of image assets within the HTML bundle
JPG image fallback — a static image shown if the animation fails to load or the browser doesn't support HTML5. Best practice: use the final frame or a clear branded visual
Ad network — specifies where the HTML5 ad will run; currently Google Ads only
clickTag URL — defines the destination URL when a user clicks the ad. Required for ad network compatibility and click tracking
Noteworthy limitations
Currently, only Template admins can set and edit animations in the Template. End-users will be able to change static content and export animated design in desired format (GIF, .MP4, HTML).
Motion templates are currently only supported for Figma files
Only one scene is supported. If the Figma design contains multiple frames, we either import the one you copied the URL from, or the first if it's the generic design URL.
We offer a selection of preset animations; currently no custom animations are supported
Templates can be created from static design files, with animation added on top; we currently do not support video embedding nor video editing
External data sources for templates do not work for Motion templates.
Sample template for testing
To help you get started with creating Motion templates in Frontify, we've provided these sample files that you can duplicate or download and use as a reference.
Simply duplicate or download one of the files to your workspace, and make any adjustments you'd like. You can then follow the outlined steps above to import the template into your Frontify Template library.
Troubleshooting & Support
Please reach out to Customer Support with any issues you encounter.