You can rename one or multiple layers by pressing using the keyboard shortcuts: Make sure the layers in both compositions match exactly so Figma can keep track of them correctly. Layer names play an important role in Figma's Smart Animate to determine which layers change and how they change.
Figma animation how to#
Smart Animateįigma also has a 'special' animation type called Smart Animate which tries to automatically figure out how to best transition between two states using layer names and hierarchy. To add a transition from one screen to another in Figma you'll need to create a connection between two frames, a trigger that starts the transition, and an animation type to shape what the transition between the frames will look like.įigma has a variety of animations and interactions to choose from and we'll take a look at which ones you can use to replicate the most common animations on the web and in mobile apps. The Basicsįeel free to skip this section if you are familiar with the basics of animation in Figma and want to go straight to the examples.įirst, let's start with the basics of how animation in Figma works. We'll cover some of the most common animations found in apps and websites today and how to implement each one into your designs using Figma.
Your browser does not support the video tag.Įxamples of animations made in Figma ( Source) Motion plays an important role in your designs and can help the user understand what's happening when they interact with and navigate around your app. Adding a one-line note to it that says "it slides in" is not nearly detailed enough. There are many ambiguities if you just supply the developer implementing the design with two static screens. But if a user clicks to open the menu, does it just suddenly appear? Does it slide in? From what side? How fast? Is the animation linear or does it ease in and/or out? When you design a mobile menu you design both states, the opened menu and the closed menu. Most designers will spend many hours perfecting every pixel of their static UI designs but will barely spend any time perfecting the transitions between these pages.
0 kommentar(er)
