A11: Interactive Mockups
Hunter McCormick
April 16, 2025
The ability to animate design components is one of the most powerful capabilities of Figma. Making components interactive transforms the designs from an artistic representation of how a screen might look, to something much closer to reality. The elevation of usability can also be extremely challenging and highlights necessary changes to the designs when interactivity is implemented. The last sentence summarizes my experience this week when working on the animation assignment.
Get Hunter McCormick’s stories in your inbox
Join Medium for free to get updates from this writer.
My focus for the assignment was to establish smooth animations for navigation. Knowing that we would eventually use animation in our designs, I preemptively incorporated this knowledge into the high quality mockups weeks ago. However, not every design turned out to be useful. For example, I designed the community page to have cards that slide-up to reveal community groups when clicked. However, after learning about best animation practices in class and trying out different transitions, I found the best way to change screens is to use the simple, common slide-in from the right. Other cases were more successful like the “My Groups” section where I used gestalt principles of closure to imply users can scroll to see more groups. I utilized horizontal scrolling to allow users to interact here.
I tried to be cognisant of easing in, and easing out, and which direction the screens came in from to resemble real-world apps. When going back, screens slide-in from the left. When pressing buttons on the app bar screens instantly transitioned like other apps. I even made a new screen for the instructions overlay to appear when users click on a mini game icon now that I can utilize animation.
This week was a fun, interesting exercise but there is still much work to be done. I need to develop more mico-interactions not included in the initial submission that require some design decisions. One example is animating the search bar to open up. I need to decide what to do with the drop down symbol or if a greater design change is needed. I feel my designs will see a lot of changes in the coming weeks to improve details like this, and to improve the grouping of content.
