Motion Is Not Just Movement. It’s Time As A Design Tool.

How to make ideas come alive — lessons from 3 Figma motion designers, explained simply for designers, founders, and students.

Why Motion Matters More Than Ever

Across marketing pages, social assets, brand videos, and presentations, motion is how ideas come to life. That is the opening line from Figma’s article, and it is true for every product today.

Think about your favourite app. When you swipe to delete, the card doesn’t just disappear. It slides, it has weight, it makes a soft sound in your head. When a new feature is launched, Figma doesn’t just show a screenshot. It shows a story that unfolds.

We are all seeing more motion because brands know one truth: Motion cuts through. It explains what words can’t.

But most of us were taught graphic design, not motion. We know how to make one frame look good. We don’t know how to make frames feel good over time.

I read the full Figma interview with three motion designers — Chad, Ben, and Gilles — who work on Figma’s own launch videos. This article is my simple, no-jargon breakdown of what they shared. If you are a student who has never opened After Effects, a founder making your first pitch deck, or a designer who wants to add life to your work — this is for you.

The Real Difference Between Graphic Design and Motion Design

Ben Hill explains it best: In graphic design, everything’s communicated through frozen moments in time. Motion removes that constraint.

In graphic design, you have one chance. One poster must have color, type, layout, hierarchy, and message all at once. It is like taking one photo that must tell the whole story.

In motion design, you have time. You can break the story. First this, then that. Gilles says: We think more in multiple frames. Instead of trying to condense every element of the story into a single image, we break it up — first this, then that — so it’s easier to digest.

Here is a simple example. You want to explain Figma’s new code layers feature.

Graphic Design Approach

One big image with 10 arrows, 10 labels. Crowded. Hard to read.

Motion Design Approach

Frame 1 — show design canvas.
Frame 2 — one layer turns into code.
Frame 3 — code connects back.
Each step has time to breathe. Viewer understands.

Chad adds the third element we forget: Sound. He says, “It’s really about how you use that element of time in motion to tell a story. How do you use easing and timing to evoke a feeling? There’s a deep connection to the way it syncs up with sound, too. When you think about music, the way beats are structured — it’s all timing, just like motion.”

That is why when they present work, they don’t say “move from left to right.” They say “It will go whoop!” Sound sells the idea. Your brain makes connections you didn’t plan.

Ben says it beautifully: “I’m always in awe of how well sound and image come together to create something bigger than the sum of its parts. Your brain makes connections you couldn’t have planned out. That is pretty foundational in the way that I approach things: leaving some things to chance and being open to those happy accidents.”

So if graphic design is a photo, motion design is a short film. Same foundations — clarity and intent — but with rhythm, pacing, and sound.

Where Do Good Ideas For Motion Come From?

This is the most important part for students. Where do you find references?

Most beginners search Dribbble or Behance for “cool motion.” The Figma team says don’t.

Gilles: “I think the foundational thing is understanding physics. Motion is rooted in how things move in the real world.”

He gives the bouncing ball example. It starts really fast, springs back up, then slows as it reaches the top. Then it falls again, and each bounce gets lower. Being able to capture that feeling is really important.

If you understand physics, you can animate anything — a button, a card, a page — so it feels real.

Ben adds: “If you’re finding your inspiration solely from other motion work, then you’ll likely fall into the expected trends — bouncy balls and rectangles only go so far. If you’re drawing from movement in nature, the storytelling devices and editing tricks from film, or even gestural forms in art and design, that will set you apart.”

Look at nature. How does a leaf fall? How does water ripple? How does a cat jump? That is better reference than another SaaS dashboard animation.

And film. How does a director use a match cut — where you go from one shot to another but connect them through same movement? Gilles explains: You might go from slow, to fast, to slow again, and do a hard cut at the fastest point, and it ends up feeling like a seamless transition.

That is how Figma connects multiple use cases in one launch video and still feels like one continuous experience. Transitions are the glue.

For founders: Your pitch deck doesn’t need 20 different animations. It needs one good transition that keeps momentum.

The 6 Principles That Make Motion Feel Human

Figma shared a mini glossary. These are not complex words. They are things your body already knows. This is the main visual for your article.

1. Ease In/Ease Out

This is how motion speeds up and slows down over time. Nothing in real life moves at constant speed. A train starts slow, goes fast, then slows to stop. If you make a button pop in at constant speed, it feels like a robot. If you add ease — start slow, end slow — it feels natural.

Practical tip: In Figma, never use Linear easing. Use Ease In Out for 200–300ms for UI. That alone fixes 50% of bad motion.

2. Anticipation

A small move before the big move. Like bending your knees before you jump. Or pulling your hand back before throwing a ball. It tells viewer: Get ready, something is about to happen.

In product: A card squeezes a little before it expands. A menu icon moves back a pixel before opening. Without anticipation, motion feels sudden and cheap.

3. Overshoot

Moving slightly past the final position before settling back. Like when you close a drawer too hard and it bounces back a little. It adds energy.

Use overshoot for playful brands, for success states, for celebrating. Don’t use it for serious error messages. Overshoot says “we are alive.”

4. Follow-Through

This is secondary motion that continues after main stops. Your head stops, but hair keeps moving. A car stops, but antenna wobbles.

In UI: When a sheet slides up, the content inside moves a little later. When a character jumps, the backpack follows. It adds life and weight.

5. Hold

A pause that gives viewer time to register what just happened. Without hold, your animation is a run-on sentence. With hold, it is a paragraph with full stops.

In Figma launch videos, they hold on the final frame for 800ms before cutting. That hold is where understanding happens.

6. Settle

The final, subtle motion as something comes to rest. The tiny shake. The dust settling. Without settle, things feel like they hit a wall and died. With settle, they feel like they landed softly.

These six have held up for 100 years, from Disney animation to Figma motion. As Gilles says: People will recognize when motion is good even if they can’t explain why.

How Real Teams Talk About Motion

Figma’s team doesn’t use technical terms in reviews. They use human words. You can use these tomorrow with your team or clients:

  • Zippy: Fast, energetic movement. “This loading feels too slow, make it zippy.”
  • Make it dreamy: Softer, more atmospheric. Less hard cuts, more blur, slower ease.
  • Chunky: Deliberate, less-elegant movement, as if physically handled by hands. Good for real, tactile products.
  • Make it snappier: Needs quicker timing and sharper easing. From 500ms to 200ms.
  • Feels floaty: Lacks weight. This is the most common problem for beginners. Fix with better easing and follow-through.
  • Too linear: Moves at constant speed — feels mechanical. Add ease in/out.
  • Dead on arrival: Lacks energy, intent, or clarity. Start over and ask: what is this trying to say?

If you are a founder, use these words instead of “make it pop.” Your designer will instantly understand.

The Big Shift — Design and Motion On Same Canvas

For years, workflow was broken. You designed in Figma. Then exported to After Effects. Then rendered. Then sent video back. Feedback was slow.

Chad says: The idea that you can be on the canvas, working on a design and testing animation, seeing what’s working and what’s not in real time — that’s a big shift. Before, you had to move between different tools and platforms. Now everything can happen on the multiplayer canvas.

Ben adds: Motion cuts through. It explains what words can’t, and brands know it — which is why appetite for great motion work keeps growing. At same time, it’s very time-consuming, so it’s hard for motion teams to keep up. But working in one software for design and animation is really exciting.

Gilles says what excites him most: Number of people who will discover or fall in love with motion who otherwise wouldn’t have. That’s what happened to me. I never knew I wanted to be a motion designer, but I played around with some tools and realized: This is so much cooler than working in a single frame.

For students: You no longer need to choose between UI designer and motion designer on day one. You can learn motion inside Figma itself. Start with smart animate, then timeline, then expressions.

For founders: You don’t need to wait for one motion expert. Your product designer can now prototype motion early, test with users, and push ideas up faster.

AI — Easy To Make Good, Hard To Make Great

Everyone asks: Will AI replace motion designers?

Chad’s view is practical: In After Effects, motion often meant adding expressions and scripting to control properties and build systems, so you were essentially coding. When I was coming up, most animators couldn’t code, so we relied on a spreadsheet of expressions we’d copy and paste. Now, motion prompting changes that. You can sketch ideas quickly — whether something is slow, fast, or bouncy — while also handling technical side. Once something is defined and backed by code, you can reuse it anywhere. That’s a huge unlock.

You can now type “make this bounce like a ball, settle in 300ms” and get code. That saves hours.

But Ben and Gilles warn

Ben: A lot of people will do flashy motion for motion’s sake, while others are going to use it more thoughtfully to communicate and guide users. Skill, craft, intention, and restraint are going to be the differentiating factors.

Chad: Having control of time and intention will be essential — understanding that time is your new tool, a new element you can design with. If it’s just moving, and you’re not evoking anything or saying anything, you’re basically just adding a filter on top of a design.

Gilles: It’s going to be very easy to create good motion, but if you don’t understand the basic motion principles, it’s going to be hard to create great motion. People have been doing this for a long time. There are things that have held up for 100 years, and there’s a reason for it. As technology progresses, it’s going to be important to keep those foundational principles. It’s what keeps things human.

My simple take: AI is like a fast intern. It can generate 10 versions of easing. You still need to choose which one feels right. Taste is not automated.

Thoughtful motion serves purpose. AI suggests. Human refines. The craft is in the choice.

Your 5-Day Starter Plan (No Jargon)

If you want to start today, you don’t need After Effects. Use Figma.

Day 1 —

Observe. Pick one real object. A door, a drawer, a ball. Watch how it moves. Note: How does it start? Does it overshoot? How does it settle? Write it in words like zippy or floaty.

Day 2 —

One principle. Animate a single button in Figma. Only use ease in/out and hold. Make it appear, hold 600ms, disappear. No overshoot, no fancy.

Day 3 —

Add anticipation. Same button. Before it pops, make it shrink 5% for 80ms. See how much more alive it feels?

Day 4 —

Add sound in head. Present your animation to a friend. Instead of saying “it moves left to right,” say “it goes whoosh and then tsch.” If you can’t make a sound for it, timing is wrong.

Day 5 —

Tell a tiny story. Three frames: Problem → Action → Result. Use match cut — keep same movement direction across frames. Example: Click → Card expands → Success check. Keep it under 2 seconds.

If you do this for a week, you will have better taste than 80% of people who just add random bouncy animation.

Closing: Time Is Your New Tool

Motion has always felt like magic to people, partly because there are fewer motion designers than other designers, as Chad says. That magic is now becoming normal.

You don’t need to be a motion expert to start. You need to respect time as a design material, just like color and type.

Next time you design something, ask two questions that Figma’s team asks every day:

  1. What feeling should this motion evoke?
  2. What is the story arc — where is the crescendo?

If you can answer those, you are not just adding movement. You are using principles in motion to make ideas come alive.

And that is something AI can help with, but only you can decide.

About the author

UX/Product Designer with 8+ years of experience, writing about AI-assisted product decisions, user research, and trustworthy digital experiences. I work in Figma, making strategy, user flows, wireframes, prototypes and motion. My focus now is helping teams move from generalist chaos to specialist clarity.


Motion Is Not Just Movement. It’s Time As A Design Tool. was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论