MOTION DESIGN
7 MINS
Designing for movement
Designing for movement
Crafting motion-ready assets
Crafting motion-ready assets
Avani Jhanwar, with her hands-on experience in both design and animation, offers a practical look at bridging these two worlds. Her insights come from firsthand experience with the challenges that arise when static designs are brought to life.
For any motion designer, the ideal scenario would be to handle the entire creative process—from scripting and storyboarding to designing assets and animating them – all on their own. However, the reality is that motion design is typically a collaborative effort—one that brings unique challenges, especially when assets aren’t created with animation in mind.
Whether you’re a motion designer or a graphic artist contributing to motion projects, understanding how to design assets for movement can bridge these gaps and streamline the process.
For any motion designer, the ideal scenario would be to handle the entire creative process—from scripting and storyboarding to designing assets and animating them – all on their own. However, the reality is that motion design is typically a collaborative effort—one that brings unique challenges, especially when assets aren’t created with animation in mind.
Whether you’re a motion designer or a graphic artist contributing to motion projects, understanding how to design assets for movement can bridge these gaps and streamline the process.
"Motion-ready assets need to be modular, easily animated, and designed with flexibility in mind. The choices you make early in the design process will shape how fluid and engaging the final result feels."
"Motion-ready assets need to be modular, easily animated, and designed with flexibility in mind. The choices you make early in the design process will shape how fluid and engaging the final result feels."
By considering how assets will move, interact, and evolve within the animation from the very beginning, you can ensure smoother transitions, better timing, and a more cohesive visual story. Let’s take a closer look at how to design with motion in mind.
By considering how assets will move, interact, and evolve within the animation from the very beginning, you can ensure smoother transitions, better timing, and a more cohesive visual story. Let’s take a closer look at how to design with motion in mind.
Good asset creation leads to more fluid motion design
Good asset creation leads to more fluid motion design
I'll share some actionable tips on how to create cleaner and better motion assets.
I'll share some actionable tips on how to create cleaner and better motion assets.
Keep it clean and effective
While intricate designs can be stunning, overly complex assets can make animating them a nightmare. In motion design, simplicity is key. Designs with well-defined shapes, clean silhouettes and clear lines tend to move more elegantly.
When making things move – clarity is just as important as beauty. Complex assets can become cumbersome, slowing down the animation process, bogging down your system resources, and possibly making the final animation feel choppy or cluttered.
While intricate designs can be stunning, overly complex assets can make animating them a nightmare. In motion design, simplicity is key. Designs with well-defined shapes, clean silhouettes and clear lines tend to move more elegantly.
When making things move – clarity is just as important as beauty. Complex assets can become cumbersome, slowing down the animation process, bogging down your system resources, and possibly making the final animation feel choppy or cluttered.
Layer everything!
One of the most important steps in designing assets for motion is creating modular components. For example, if you’re working on character animation, you’ll want to ensure that each body part—like the arms, legs, and head—is on individual layers (not nested or grouped sub-layers) so that the animator can quickly animate them without worrying about hierarchy issues.
The more individual, movable elements you have, the more dynamic and customizable the final animation will be.
Remember: There’s no auto-layout in animation—so changes in design elements need to be accommodated manually in the animation.
Here’s an example for how you can layer individual movable sections in an animation:
One of the most important steps in designing assets for motion is creating modular components. For example, if you’re working on character animation, you’ll want to ensure that each body part—like the arms, legs, and head—is on individual layers (not nested or grouped sub-layers) so that the animator can quickly animate them without worrying about hierarchy issues.
The more individual, movable elements you have, the more dynamic and customizable the final animation will be.
Remember: There’s no auto-layout in animation—so changes in design elements need to be accommodated manually in the animation.
Here’s an example for how you can layer individual movable sections in an animation:
Think beyond the canvas
Static design tools like Illustrator or Figma have clear boundaries, such as the artboard. But motion doesn’t stop at the edge of the screen. Elements need to enter, exit, or exist partially outside the frame during animation. How assets enter and exit the frame is just as important as what happens inside it.
Static design tools like Illustrator or Figma have clear boundaries, such as the artboard. But motion doesn’t stop at the edge of the screen. Elements need to enter, exit, or exist partially outside the frame during animation. How assets enter and exit the frame is just as important as what happens inside it.
Artboard ≠ Animation Frame: Anything that sits outside the artboard in your design software won’t always transfer as expected into animation tools like After Effects. For example, if a shape is only partially visible on the artboard, it might be cut off in After Effects, creating extra work for the animator.
Artboard ≠ Animation Frame: Anything that sits outside the artboard in your design software won’t always transfer as expected into animation tools like After Effects. For example, if a shape is only partially visible on the artboard, it might be cut off in After Effects, creating extra work for the animator.
Treat the artboard as a starting point, not a boundary. Design with the full animation path in mind, ensuring all elements are accounted for—even when they’re off-screen and leave enough room for elements to move freely.
Treat the artboard as a starting point, not a boundary. Design with the full animation path in mind, ensuring all elements are accounted for—even when they’re off-screen and leave enough room for elements to move freely.
Plan for movement:
Designing with motion in mind means thinking about how elements will move, transform, or interact during animation across different scenes. This is one of the most critical steps in designing motion-ready assets.
When designing transitions—such as when an element shifts, scales, or morphs from one state to another—it’s essential to consider the parameters that need to stay consistent for smooth animation.
For example: When morphing between shapes, ensuring that the start and end shapes have the same number of anchor points helps create smooth transitions and avoids creating unnatural in-betweens.
[Quick tip: even with the same number of anchor points, if your transition looks off, you can always select which point on the path needs to be treated as the starting point. Matching the position of the starting point for both your shapes will help make this even smoother]
Designing with motion in mind means thinking about how elements will move, transform, or interact during animation across different scenes. This is one of the most critical steps in designing motion-ready assets.
When designing transitions—such as when an element shifts, scales, or morphs from one state to another—it’s essential to consider the parameters that need to stay consistent for smooth animation.
For example: When morphing between shapes, ensuring that the start and end shapes have the same number of anchor points helps create smooth transitions and avoids creating unnatural in-betweens.
[Quick tip: even with the same number of anchor points, if your transition looks off, you can always select which point on the path needs to be treated as the starting point. Matching the position of the starting point for both your shapes will help make this even smoother]
A common misstep is to completely redesign or recreate a component from scratch on a new artboard whenever it transforms and morphs into a shape or silhouette.
While this approach might feel intuitive, it often complicates the animator’s job, forcing them to manually adjust or reconcile discrepancies between the two designs. Instead, focus on maintaining continuity in aspects like scale, position, and visual details across different states of the element.
Collaborating closely with your animator at this stage is invaluable.
A common misstep is to completely redesign or recreate a component from scratch on a new artboard whenever it transforms and morphs into a shape or silhouette.
While this approach might feel intuitive, it often complicates the animator’s job, forcing them to manually adjust or reconcile discrepancies between the two designs. Instead, focus on maintaining continuity in aspects like scale, position, and visual details across different states of the element.
Collaborating closely with your animator at this stage is invaluable.
"Ask what parameters, such as anchor points, path shapes, or layer structures are easiest to manipulate in the animation software."
"Ask what parameters, such as anchor points, path shapes, or layer structures are easiest to manipulate in the animation software."
Understanding these considerations early can help you avoid potential issues, ensuring that the element transitions seamlessly.
Understanding these considerations early can help you avoid potential issues, ensuring that the element transitions seamlessly.
Plan for timing
Never forget the time dimension when designing for motion. The temporal nature of animation means that not all elements will occupy the screen equally or for the same duration. If an asset is only going to appear for a fraction of a second, it might be worth simplifying or even removing it from the design to keep the composition clean and reduce unnecessary complexity.
On the other hand, transient elements—those that quickly appear and disappear—may need additional emphasis to ensure they command the viewer’s attention. Contrasting these fleeting elements with persistent ones can lend them gravitas and make their presence impactful.
For example: Consider a toast that animates onto a screen for just half a second. If it’s too small or understated, the viewer may miss it entirely. To ensure its visibility, you might design the badge with a bright color, exaggerated motion, or a glowing effect to draw the eye immediately.
And, if a complex decorative element, like an intricate border pattern, appears only momentarily in a transition between scenes, you could simplify or omit it entirely, as it doesn’t contribute significantly to the overall message and might clutter the animation.
Never forget the time dimension when designing for motion. The temporal nature of animation means that not all elements will occupy the screen equally or for the same duration. If an asset is only going to appear for a fraction of a second, it might be worth simplifying or even removing it from the design to keep the composition clean and reduce unnecessary complexity.
On the other hand, transient elements—those that quickly appear and disappear—may need additional emphasis to ensure they command the viewer’s attention. Contrasting these fleeting elements with persistent ones can lend them gravitas and make their presence impactful.
For example: Consider a toast that animates onto a screen for just half a second. If it’s too small or understated, the viewer may miss it entirely. To ensure its visibility, you might design the badge with a bright color, exaggerated motion, or a glowing effect to draw the eye immediately.
And, if a complex decorative element, like an intricate border pattern, appears only momentarily in a transition between scenes, you could simplify or omit it entirely, as it doesn’t contribute significantly to the overall message and might clutter the animation.
“Transaction created” toast in Fold Money
“Transaction created” toast in Fold Money
Understand your tools
Not all designs translate perfectly into animation software. Gradients, transparency, complex raster effects, or even certain strokes may cause issues when transferring from tools like Illustrator or Figma into After Effects or exporting to Lottie. These challenges can disrupt your workflow and result in time-consuming adjustments or re-creations.
Not all designs translate perfectly into animation software. Gradients, transparency, complex raster effects, or even certain strokes may cause issues when transferring from tools like Illustrator or Figma into After Effects or exporting to Lottie. These challenges can disrupt your workflow and result in time-consuming adjustments or re-creations.
To avoid such surprises, it’s essential to understand how your designs will be used and in which formats they will ultimately appear. This approach is similar to determining the ideal workspace for an illustration based on whether it’s for print or web. The choice of design software should align with the animation tools you plan to use.
For instance, designing in Figma for a motion project that should actually be worked on in After Effects can add hours to the animation process, especially for complex designs.
Using plugins like Overlord can help, but most tools still have limitations, and your only option might be to export assets as SVGs, re-layer them in Illustrator, and then import them into After Effects.
To avoid such surprises, it’s essential to understand how your designs will be used and in which formats they will ultimately appear. This approach is similar to determining the ideal workspace for an illustration based on whether it’s for print or web. The choice of design software should align with the animation tools you plan to use.
For instance, designing in Figma for a motion project that should actually be worked on in After Effects can add hours to the animation process, especially for complex designs.
Using plugins like Overlord can help, but most tools still have limitations, and your only option might be to export assets as SVGs, re-layer them in Illustrator, and then import them into After Effects.
This workflow risks losing effects, textures, masked elements, images and a lot more - all of which would need to be manually re-created. Since design and animation software often handle these features differently, achieving 100% accuracy in the transition can be challenging.
This workflow risks losing effects, textures, masked elements, images and a lot more - all of which would need to be manually re-created. Since design and animation software often handle these features differently, achieving 100% accuracy in the transition can be challenging.
Learn what features and effects translate well and which ones might require adjustment or re-creation during exports or animation. This proactive approach can save hours of troubleshooting later in the animation process.
[Quick tip: Keeping a Lottie-supported features document handy or leveraging tools like Overlord or AEUX by Battleaxe can make the handoff smoother and minimize the need for rework.]
Learn what features and effects translate well and which ones might require adjustment or re-creation during exports or animation. This proactive approach can save hours of troubleshooting later in the animation process.
[Quick tip: Keeping a Lottie-supported features document handy or leveraging tools like Overlord or AEUX by Battleaxe can make the handoff smoother and minimize the need for rework.]
Bringing it all together
Designing motion-ready assets is about more than just creating something visually compelling—it’s about setting your designs up for success in the animation process. By focusing on simplicity, modularity, flexibility, and understanding the nuances of both design and animation tools, you can bridge the gap between static design and dynamic motion.
Designing motion-ready assets is about more than just creating something visually compelling—it’s about setting your designs up for success in the animation process. By focusing on simplicity, modularity, flexibility, and understanding the nuances of both design and animation tools, you can bridge the gap between static design and dynamic motion.
"Each choice you make, from the earliest sketches to the final exported file, contributes to a smoother workflow and a more cohesive visual story."
"Each choice you make, from the earliest sketches to the final exported file, contributes to a smoother workflow and a more cohesive visual story."
While these principles might seem like additional steps at first, they ultimately reduce friction, minimize revisions, and empower animators to bring your vision to life with precision.
Collaboration is at the heart of motion design, and being proactive in anticipating the needs of your animators fosters better communication and creativity within your team. With thoughtful preparation, your designs won’t just move—they’ll inspire.
While these principles might seem like additional steps at first, they ultimately reduce friction, minimize revisions, and empower animators to bring your vision to life with precision.
Collaboration is at the heart of motion design, and being proactive in anticipating the needs of your animators fosters better communication and creativity within your team. With thoughtful preparation, your designs won’t just move—they’ll inspire.
Canvs is an interface design and engineering studio based in Mumbai, India. We are group design partners to some of India’s market leaders in Banking and Finance and have been around since 2016.