In-production animation timings from screen to screen within a UI flow, happen too quickly to be able to accurately determine which elements are appearing, in what order, and how quickly those transitions transpire.
Record the animation using a screen capture of your choice. Pull the animation into after effects. Change the frame rate to a number that you feel will give you the right fidelity to adequately analyze the animation. Export the animation using image stream. Pull each image into Figma and make comments, as necessary.
Record the animation using a screen capture of your choice. iOS has a great option for screen capture built into system settings. You can find how to set that up here.
Set up Figma with a grid to indicate the millisecond duration of each of your frames. In this example, each of our frames amounts to 33ms.
Place each frame that you exported from After Effects side by side into the grid.
.png)
Now with everything all set up, you can start to make annotations.
.png)
Transitions and assembly tend to be built from multiple overlapping animations. Some aspects of the animations are good design and should be preserved. In addition when using this method you can find small bugs and animation inconsistencies that result in an unsatisfactory user experience. Using brackets and a color system, you can quickly identify good design, along with the issues within the overlapping animations. Share these findings with your tech and product partners.
.png)
Ryan is a UX Motion designer that considers branding and content essential to the user experience.