Figma Tutorial: Smart Animate and Drag Triggers

welcome to another figment tutorial smart animate can map layers with matching names between two figma frames and intelligently render animation frames between the two states if you use a different animation type such as move in you can still use it in conjunction with smart animate to animate matching layers the on drag interaction type will also let users progress through a smart animation to create more realistic experiences we're going to learn how to use each of these by prototyping part of a mobile email app click the link in the video description to get your own copy of the design file that includes even more interactions not covered in this video let's get started in this example we have a sign-in page for an email application and an initial loading state that defaults to a view with all emails when a user clicks the button to sign in we want them to navigate to the second frame let's click the prototype tab at the top of the right side panel then click on the button and drag a connection to the second frame next let's change the animation value to move in from right to left we'll also slow down the duration to two seconds to help us illustrate something next in presentation view we can click the button to log in but as the animation plays back you can see that the status bar at the top of the frame is replaced entirely this isn't a very accurate representation of a real-world application or mobile OS where the status bar is almost always sticky at the top of the screen let's head back to the editor to improve this we can click on the status bar in the first frame to see what the layers name is in the layers panel on the Left which is currently a status bar then we'll do the same in the next frame which is also named status bar matching layer names is important because this is the primary way that Figment determines which layers to smart animate since we've confirmed our layers are named the same let's select our prototype connection and select the option labeled smart animate matching layers back in presentation view we can now see that when we log into the app the status bar no longer moves in with the rest of the layers and instead head stays affixed to the top now that we've seen how to use smart animate with existing animated transition types let's see how it works as a standalone animation type by prototyping the user receiving a new email back in the editor we'll select our second frame and duplicate it then we'll select the nested frame which contains many instances of the email component each of these components are equally spaced within the frame with 0 distance between them so figma will display the pink smart selection interface above it since this frame is a smart selection we can click the center circle in the top email to select it and then use command D to duplicate the email component and insert a new instance into the list all of these components have a light gray background indicating that they have already been read we'll select the newly created instance at the top of the list and swap it with an unread version of the component which has a white background when we swap the text overrides will be maintained we don't want it to look the same as an existing email right below it so we'll reset this instance to its default state from the toolbar next we need to make our connection since a user doesn't usually perform an action to receive a new email let's connect the entire frame to the destination and use an after delay trigger then set the delay to 1 second after a one-second delay we should navigate to a frame with a new email we'll choose smart animate so that the older emails will move down to make space for the newly received email which will dissolve in before returning to presentation view we can check what layers will smart animate or if there's maybe an issue that we need to identify and resolve with a prototyping tab active we can select a layer and any other layer that figma identifies as a match will also be highlighted on the canvas as we select different emails in the list you can see the corresponding emails highlighted in the second frame you may notice that these components all have the same name and haven't been uniquely named yet figma is still able to match them this is great and will still work but we recommend naming your layers uniquely as a best practice let's rename these layers by adding a unique number to the end of their names using figmas bulk rename feature now we're ready to head back to presentation view to preview our animation one second after loading the page our emails that have been read animate down and a new unread email dissolves into the empty space smart animate helps us create more advanced animations such as this and all we needed to do is select it from the menu now let's learn how we can use the drag trigger type along with smart animate to delete an email inter app we've already bought our ticket to Shanghai so we're ready to delete the flight alert email the interaction we want for deleting an email is for the user to swipe the email from right to left we'll start by duplicating our frame again this frame will define the ending state of animation so we'll select the flight alert email and move it all the way to the left while keeping it in the frame an easy way to do this is from the properties panel where we can see that the component spans the full width of the frame and both have a width of 360 points so we can adjust the x-coordinate to negative 360 we can no longer see the component but if we toggle the clip content checkbox for the top level frame we can see that it is still contained within the frame but is masked by the frames bounding box now we have an empty space where the component used to be we'll fill this space with an informational component to communicate that the swiping action is deleting the email we'll also send it to the back of the layer stack so that it's behind all the email components this informational component is a new layer in this frame and it doesn't exist in the previous frame because of this figma has no layer to match it to in the initial State and the component will dissolve in instead of moving with the drag we can fix this by copying the component pasting it into the initial frame and moving it 360 points to the right next we need to make our connection by selecting the travel alert email in the initial frame and make a connection to the next frame well then change the interaction trigger to on drag and keep the animation as smart animate now in our prototype we can click and drag the email to the left and the delete message will appear we can interrupt the animation if we return the layer to its original position Sigma will automatically determine the trajectory at which a drag trigger will animate if we try to swipe this email to the right the animation won't be initiated if we drag the layer fully to the left we are now in our ending state let's wrap up this prototype by adding another final state where this message disappears after one second and the remaining emails move up to fill the empty space well duplicate the frame delete the layers that we want to disappear and reposition the remaining emails in the frame so that they shift up then we'll create an after delay trigger set to one second and smart animated let's see what the full experience looks like in presentation view smart animate helps you quickly create realistic animations in your prototypes by doing all of the hard work for you just select it from the animation menu and you're ready to go if you want a more hands-on experience you can download the email app design file that has more interactions not covered in this video by clicking the link in the description or jump into figma and use smart animate in your own designs thanks for watching [Music]

Channel: Figma

Views: 843,137

Keywords: figma, tutorial, figma tutorial, ui, ux, ui/ux, ui design, ux design, design, user experience, drag, drag animation, smart animate, smart animation, animation, collaboration, interface design, prototyping, prototype, mobile design, フィグマ, デザイン, multiplayer, product:figma_design, audience:designer, language:english, format:standard, produced_by:product_education, theme:prototyping, event:none, series:figma_tutorial, type:feature_tutorial, level:beginner, primary_feature:, secondary_feature:

Id: 6Id4INKEwb8

Length: 8min 43sec (523 seconds)

Published: Thu Oct 03 2019