Handing off assets to our developer, system designer, and brand partners is a key step when implementing animation.
Various methods are required, depending on the type of animation that is being designed.
When designing illustrative animations for experiences like FTUX or success screens, Lottie is the tool to use. Using a combo of Lottie, Gifs, and Slack, you can quickly socialize designs and implement the animations into the desired user interfaces or applications.
When it comes to micro-animations, sometimes a gif is not enough guidance for our tech partners. Annotation can help fill the gaps when handing off.
Working with the systems team, we built out tokens so that our tech teams can efficiently use consistent animation standards across the user environment.
Documentation is a key part of making sure that animation can be scaled and reused to benefit the wider design team.
Figma can be a good option for introducing motion into a design that requires tight collaboration between designers. However, sometimes it can stutter as seen in this example. Figma has a lot of limitations in regards to animation so it should only be used for getting a rough sense of how to think about motion within a UI flow.
Animating flows in After Effects and exporting to video is still the most common method for designing UI animation. However, video as a medium does not afford interaction as an option, but you can fake interactions with an animated pointer or taps.
I love that Ryan has gone the extra mile to help get buy in for his designs. For example, this year, the Refer a Friend video Ryan made one of the best feature walkthrough videos I’ve ever seen. It was instrumental in lots of demos but specifically in getting our SVP's buy-in. I think Ryan designs beautiful and very functional experiences for our users and I’m looking forward to Ryan continuing to find great ways to present them. -Ryan Loney (Product owner of the Teen Checking Account team)
Ryan is a UX Motion designer that considers branding and content essential to the user experience.