Using the Plugin

From installing Typpo to rendering your first video. Here's the whole flow, step by step. We'll cover getting the plugin, crafting your template in Figma, and running it to turn your design into animated video.

Setup

Install the plugin

Typpo is live on the Figma Community. Open its plugin page and run it in any Figma file. Save it and it stays under Plugins → Typpo Template Export for next time.

Get Typpo on Figma Community

Approved and ready — run it right in Figma.

→

Install Typpo from the Figma Community, then run it from Plugins anytime.

Design first

Craft your template

Before running the plugin, build your template in Figma: the layouts, backgrounds, text, and overlays that define how your video looks. New to how templates work? Start here:

What is a Template?

How layouts, backgrounds, text, and overlays fit together.

→

Import

Select your frames & run the plugin

In Figma, select the frame you want to turn into a template, along with any additional background assets you want available. Then run the Typpo plugin from Plugins → Typpo Template Export. It reads everything in your selection.

Select the frame plus any extra backgrounds, then run the plugin.

Export

Download your template

When everything's set, download your template from the plugin. Typpo packages up your layouts, backgrounds, overlays, and animations into a single template, ready to bring into the app.

Export your finished template straight from the plugin.

In Typpo

Drop it into Typpo

Open Typpo and drop in your template. That's it. It's ready to generate video from your transcript, with your text animating word-by-word inside the safe zone.

Drop your downloaded template into Typpo to start creating.

Good to Know

The canvas

Group your backgrounds in `bg`

Anything that should be treated as a background (the images, videos, or colors that sit behind your text) must live inside a group named bg. The plugin imports everything in that group as a background layer and cycles through them.

If it's not in bg, you can end up with unwanted results.

Figma layers panel showing backgrounds grouped inside a bg group

Backgrounds go inside the bg group. Text and overlays stay outside it.

The layers

Keep overlays outside `bg`

Overlays (logos, decorations, watermarks) are elements that float on top of the background. To be treated as overlays, they must live outside the bg group in your layer structure.

Overlays can be ◆ Layout scope or ◆ Template scope, and can have entrance & exit animations. See What is a Template? for how scope works.

Figma layers panel showing an overlay layer outside the bg group

Example overlay

This image sits outside the bg group, so the plugin imports it as an overlay that floats above the background.

The safe zone

Set the text bounding box

The bounding box of your text layer in Figma is the safe zone: the area Typpo fills with text. It keeps your font size and styling consistent and never shrinks the text to cram a long script in. It's also how you keep words clear of logos, watermarks, and frame edges they shouldn't touch.

So the box controls how much text fits, not how big it looks. If a script runs longer than the safe zone can hold at that size, Typpo keeps what fits and drops the rest (only 6 of 12 words might land). Two things to get right: make the safe zone big enough for your longest line, and curate new scripts knowing they're capped to what fits.

Logo

Safe zone Catch the wave before the sun dips below the horizon and the whole sky turns gold

Big safe zone → the whole script fits

Logo

Safe zone Catch the wave

Dropped before the sun dips below the horizon and the whole sky turns gold

Small safe zone → the overflow is dropped

Same font size in both. The box only changes how many words fit and keeps text clear of restricted areas, so size it for your longest line and curate scripts to match.

In the plugin

Add animations to text & overlays

Inside the plugin, select any text or overlay and choose how it animates on screen as the video plays. Each layer gets its own animation, so you can mix and match across your layouts.

Text animation

Overlay animation

That's it

Five steps from install to Typpo. With your backgrounds grouped, overlays floating, safe zone set, and animations chosen, your template's ready to generate video, with your transcript animating word-by-word as the audio plays.