Jitter

Jitter is a fast and simple animation tool on the web:

1. ✨ Animate all your interfaces (mobile apps, websites, landing pages, micro-interactions…) and content (social media, videos, ads…)
2. 🎬 Export as a video, GIF, or Lottie
3. 📐 Create your motion design system
4. 🤖 Hand off the animation specs to the developers
5. 🤝 Hand off your animated templates to the marketing team

It’s like Figma, but for motion design. 💫

How to use the plugin

1. Select a frame or layer in Figma, and click the “Copy” button on the plugin
2. Open a new Jitter file and hit ⌘V to paste
3. Animate ✨

Pro tip: Hit ⇧⌘V to update a layer in Jitter (use shift + ctrl + V on Windows): we’ll sync your changes from Figma and keep your animations in place.

Features

Pixel-perfect import

Import your designs in Jitter in 1 click: they look exactly like Figma. It feels like magic. ✨

Text animations

Animate the letters, words and lines of your titles and texts super easily.

Animation presets

Explore ideas faster with animation presets: add presets to your layers in one click, customize everything afterwards.

Customize everything

We give you full design control over the animation parameters. Your imagination is the limit.

Export to video, GIF and Lottie

Export your animated designs as videos (up to 4K and 60 fps in the .mp4, .mov and .webm formats), GIF, and Lottie. You can even export videos and GIFs with a transparent background.

Handoff your animation parameters to developers

Share your file URL with the developers so that they can inspect the animation parameters: they will get all the information they need to recreate your animations autonomously.

FAQ

What can I do with the plugin?

You can import your Figma files into Jitter, and animate them easily. To do so:

1. Select a frame or layer in Figma and click the “Copy” button on the plugin

2. From there, you can:

1. Create a new Jitter file → Click the “Open in Jitter” button in the plugin
2. Paste in Jitter → Open a Jitter file and hit ⌘V (use ctrl + V on Windows)
3. Sync your changes from Figma → In Jitter, select your layer and hit ⇧⌘V (use shift + ctrl + V on Windows): we’ll update it with the latest changes from Figma, and keep your animations in place

3. Animate ✨

What kind of animations can I do with Jitter?

You can animate anything with Jitter: whether you are designing an interface, an app, a website, an illustration, a presentation video, a social media post, an Instagram story, a YouTube intro, or anything else, you can import your design into Jitter in 1 click and animate right away. We are a design tool like Figma, so we give you total control over the parameters: your imagination is the limit.

Can I export to Lottie?

Yes, Jitter actually the best workflow to do that today: you can import your Figma designs in 1 click with this plugin, add your animations in Jitter, and export to the Lottie format. Then you can include your Lottie animations to your apps, websites, Webflow projects, LottieFiles workspace, or anything else.

Can I design micro-interactions?

Yes, you can animate all the basic properties of your layers, groups, and masks: position, size, rotation, scale, opacity, corner radius, shadow, stroke…

How are you different from other plugins?

We use a unique way to make animations: After Effects and most animations plugins (e.g. Motion, Figmotion, Aninix, SVG Motion, Bannerify and the other Figmatic plugins…) use the traditional keyframe system, which is complex to use.

Instead, we use an animation model where we give instructions to the layers (like “Slide in”, “Fade out”…): building an animation is more intuitive, and the timeline is easy to read.

In fact, creating animations in Jitter is as simple as building an animation in PowerPoint or Keynote, but you have total control over the parameters: Jitter is a modern alternative to After Effects, with no learning curve. It's fast, simple, and collaborative.

I found a bug, what should I do?

If you encounter any bugs, please reach out to us at support@jitter.video and we'll be able to fix it rapidly! ⚡️

Known limitations

Our priority is to make a pixel-perfect import. We support most Figma properties natively in Jitter. For layers with unsupported properties, we convert them to PNG or SVG so that you always get a pixel-perfect version in Jitter.

A layer will be exported as a PNG or SVG if it has one of these properties:

1. Rich text (different colors or font weights in the same text layer)
2. Variable font
3. Independent corner radius
4. Gradient fill on text layers
5. Multiple fills
6. Gradient stroke
7. Individual stroke
8. Multiple strokes
9. Multiple shadows

Here are the other known limitations:

1. You can only export 1 frame or layer at a time
2. Blend modes are not supported in Jitter
3. Only simple masks are supported in Jitter (when the masking layer is the last layer of the group) – in all other cases, mask groups are exported as images

Contact

If you want to share your feedback, please reach out to us at support@jitter.video.

📸 Instagram · 🎬 YouTube · 🐤 Twitter · 🧑‍💼 LinkedIn