- Not In The Brief
- Posts
- How to Use Jitter to Communicate with Developers
How to Use Jitter to Communicate with Developers
Forget static mockups or learning complex tools just to prototype your designs. Use Jitter to save time and communicate clearly. ✌🏼 Jitter file included!
Brittany Steiner
August 07, 2025
Table of Contents
01 // Behind the Brief
02 // Inside the Build
03 // Browseworthy
04 // Prompt & Play
01 // Behind the Brief
Static websites are becoming a thing of the past, and I’m all for it. 👏🏼
Motion is now an expected part of the web experience, not just a nice-to-have.
I’ve always loved motion design, but for a long time I didn’t think it was a skill I could actually develop. The learning curve felt steep, and I had to prioritize other skillsets. The designers I looked up to, like Louis Paquet, whose sites always seem to win awards, were working in After Effects.
But if you’ve read my post My After Effects Rebellion, you know I’ve taken a different path and steered clear of that tool.
So what does a designer do when you want motion in your work, but don’t want to spend weeks learning something complex? Most would point to Figma prototyping. I’ve tried that. It works. But it’s limited.
Luckily, I found Jitter. Once I realized how easy it was to animate with, it completely changed my workflow.
Now I use it to add motion into client projects, even when it wasn’t part of the original scope, thanks to how quickly I can animate in it. 🎉
Keep reading for the full breakdown of my process and a hidden gem at the end of the newsletter 👀
02 // Inside the Build
Communicating clearly with developers can make or break the handoff in web design projects. I’ve learned it’s better to over-communicate when leaving annotations in Figma, and that includes adding visuals or examples.
💡 Interested in watching this workflow? Scroll down to access the tutorial.
1. Design the layout in Figma | During the design phase, I’m already thinking about how sections might animate. That helps streamline the next steps. Once the design is approved, I prep the sections I want to animate before transferring to Jitter. |
2. Paste into Jitter | I use the Jitter Figma plugin to move everything over. It’s worked flawlessly for me and saves the hassle of rebuilding layouts from scratch. |
3. Animate key elements | This is where the fun begins. Depending on the complexity, I either use Jitter’s presets or go the custom route. If you’re still learning motion, I recommend looking for reference examples and using those as a guide. |
4. Export and share with devs | I always take a collaborative approach. Before exporting, I run the animation by my team for feedback and get client approval to avoid extra dev revisions. Once it’s signed off, I export the file, save it to Google Drive, and link it directly in my Figma annotations. From there, I help answer any questions the developer might have. |
Want to see how it came together?
That was a lot, and there are pieces of valuable information that wasn’t included so I recorded my process for you to follow along!
03 // Browseworthy
Tools to Check Out 🛠️
Figma to Jitter Widget: The only and best way to transfer Figma design to Jitter
Articles Worth Reading 📖
Motion branding's moment: Why brands need to catch up by Creative Bloom
How designers and brands are morphing the next era of motion design by It’s Nice That
04 // Prompt & Play
This week, I’m sharing my full animation and Jitter file so you can remix, reuse, or reverse-engineer it:
Feel free to use the same layout and add your own spin, maybe a new location, design concept or different motion behavior.
Tag it with #notinthebrief or tag me personally @bsteinerdesign if you share it!
Let’s connect on the internet
Not in the Brief ✌🏼Twitter: @notinthebrief | Brittany Steiner 👋🏼LinkedIn: @bsteinerdesign |
Reply