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.
Watch the tutorial below to see how I prep files š
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.
