Hello, hello!

What’s this article about? Being a full time product designer who can also do motion design upto some capacity (subtle flex), one of the frequent question I receive (from majority of folks in my circle, who happen to be product designers) is — I want to try out motion design, how can I get started with it? So this article basically talks about that. An approach that I have suggested a few folks and has worked for them. Hoping that you also find this helpful!

Let’s dive in...

Disclaimer: This is an article on how to get started with motion design, not on how to get better at motion design. If you are looking to get better at motion design, this might not be the right article for you.

🛠️ The tool in every product designers’ arsenal — Figma

If you are a product designer, you obviously know what Figma is(unless you are reading this article after some 500 years.) As product designers, we are responsible for multiple things — brainstorming solutions, defining flows, creating wireframes, designing stuff, etc. etc. Now, as product designers one thing that we do which is very close to motion design in many aspects is — prototyping.

When I say prototyping, I don’t mean just connecting multiple screens with an ‘instant’ transition to showcase a couple of flows in your product. What I really mean is building thoughtful prototypes where you take into account how the transition happens, how the content changes on screen, how micro-interactions happen, etc.

Mostly these kind of stuff can be achieved by using ‘smart animate’ while prototyping in Figma. Let’s understand how smart animate works and how is it related to motion design

If you are comfortable with using smart animate on Figma, you are already doing basic motion design upto some extent without realising it!

🔬 Dissecting Smart Animate — How does it work?

In Figma, while building a prototype if you want layers on your design to animate from one state to another that is where you use the smart animate property.

So, how does it work? When prototyping between 2 layers, it checks for the layer names on both the frames and animates the layers with matching names. If, in case it not able to find matching layer names, it just does a simple dissolve animation between the two frames.

You can learn more about smart animate in Figma’s official page.

🪄 What can you control with smart animate?

When using smart animate, it gives you the capability to control the following three things:

• Core Action — the properties that can be animated(scale, rotation, etc.)
• Duration — the time it takes for transition to happen
• Easing — the curves that determine how the animation progresses

Smart animate also lets you create spring-based animation but let’s not dive into that right now. Quick 101: Unlike classic animation(where you use easing curves), in spring animation you control the look and feel of moving objects by adjusting spring properties such as bounciness, stiffness, speed, etc. Spring based animations work only on web and not on animation tools. To keep thing simple let’s not jump into spring-based animations for now.

🪭 Fundamentals of Motion Design

Enough about Figma and smart animate, let’s talk about motion design. No matter which tool(AE, Lottie, CSS, etc.) you are working with or what kind of animation(2D, 3D, etc.) you are working on, the fundamentals always remain the same.

For any animation to work, you need to be able to control 3 main parameters. I think you might have guessed the answer already! These three main parameters are —

• Core Action — the properties that can be animated(scale, rotation, etc.)
• Duration — the time it takes for transition to happen
• Easing — the curves that determine how the animation progresses

I think by now you must have figured out how things are related. The interface changes but the fundamentals remain the same.

🤔 Where to start from?

For starting with motion design — I basically tend to think that there are two parts to it. Even though both of these are necessary but learning both of them simultaneously can be bit confusing at times, especially when you trying it for the first time. The two key parts are —

• Animation Principles — These are fundamental principles which when followed makes your animation looks lively (squash & stretch, anticipation, etc.)
• Tooling — Getting comfortable with the tool that you will be using for animation.

If this is the first time you are trying your hands on motion, I would suggest start with tooling and then move on to animation principles. Why you ask? I believe that you are starting out —

learning how to move things >>> learning how to move things in the correct way

Now, animation principles are universally applicable irrespective of the tool. You don’t need to learn them every time. So if you have some experience with motion design, you might be knowing the principles already. In that case, directly jump into understanding the new tool and start animating stuff!

🪅 Which tool should one use?

Ok, now the obvious question — which tool should I use? There are so many motion design tools in the market.

While I find After Effects to be the ‘beast’ but it also has a steep learning curve (and yes, it is paid as well) which might or might not be the right tool if you just want to play around with motion. If you are just exploring motion design and want to try your hands on it, there are a couple of easy to use tools as well. Two tools that I like in particular are —

Using these tools, you can easily import your designs from Figma and start playing around with the properties. They provide animation presets that you can use and reverse engineer to understand how simple effects are created. BTW if you are certain to try the beast mode — After Effects, feel free to do so. You can find find a lot of tutorials around these tools on the internet.

No matter which tool you pick, initially try creating stuff by watching the tutorials and replicating what’s shown in them. Once you are bit comfortable with the tool, try creating simple animations without watching any tutorials. Post this, you should ideally be able to create simple animations on your own. Well, if you want to go beyond this and up skill to the next level in motion design — that’s a very detailed topic in itself. Saving this topic for another day!

📝 Final Words

This is obviously not the only way to get started with motion design. Everyone has their own approach and learning methods that they find helpful. Personally, I started with motion design and then transitioned to product design, so can’t guarantee if this approach works 100% of the time.

But over last couple of months, with trial and error I have come up with this approach and have also suggested this to few of my friends and this has worked for them. So, I am hopeful that this might also work for you.

On another note, your first design work won’t be the best but it would be a start. Keep iterating, keep practicing and you will get better with time.

Happy Designing! ✨

If this article has helped you in kickstarting your motion design journey, feel free to tag me when you post your motion design works online. Would love to see some what you create.

That’s a wrap; I hope you found it insightful. If you have any questions, feel free to reach out to me on Linkedin, Twitter, Instagram, or Website.

Found it helpful? Don’t keep this to yourself, share it with people who might find it helpful. You can hold that clap button for a few seconds to give a maximum of 50 Claps.