Figma Tutorial: Overlays

welcome to another figma tutorial in this video we'll show you how to utilize overlays in your prototypes an overlay is an interface element which appears elevated above the main application interface with overlays you can reuse a single frame or component across multiple screens to create consistent interactions without having to duplicate frames let's see how it works in this example we're designing the capability for a user to delete all the photos from a specific album within a mobile photo app the option to delete the photos will be hidden behind an overflow menu to make sure that users don't accidentally delete their photos we want them to confirm the deletion in a confirmation modal to do this using overlays we'll first navigate to the prototyping tab above the properties panel next we'll select the icon for the overflow menu in our app header and drag a connection from the node to the overflow menu frame after making this connection the prototype panel changes on the right hand side we now have sections to set the trigger type action and overflow behavior we're going to leave the trigger as on tap below the trigger section is the action section within it we see that the destination frame or the frame to which we drew our connection is set to overflow menu to the right of the destination frame is a segmented controller where we can choose the navigation type by default this will be set to navigate but swap and open overlay are also available navigate will take the user to the next connected frame swap will allow you to exchange one overlay for another overlay in the same position an open overlay allows us to use a connected frame as an overlay we want the overflow menu modal to be an overlay so we'll select that option when we do an overlay icon appears attach the overflow menu frame on the canvas this helps us see this is an overlay at a glance some additional options to customize our overlay also appear in the properties panel position will define where on the prototype screen the overlay will be displayed three commonly used positions Center top left and bottom Center are displayed as another segmented controller if you want more options there is also a full list of all available options within the menu to the right the last option in the menu is manual if we select this option a transparent version of our overlay appears on the canvas over the originating frame we can then manually move the overlay into the desired position below the overflow menu icon while using this method we can use red line distances and snapping to help you precisely position the layer the next section is the overlay background color this setting allows you to customize the color of an additional layer between your overlay and the frame over which it is being displayed by default this will be set to black with 25% opacity but can be customized or disabled entirely we'll change this to 5% so that the change is very subtle the last of our new settings is the close when clicking outside checkbox let's make sure we have that selected so when we click outside of the overlay it will be closed next we want to connect the delete photos option in the menu to the delete modal confirmation like we did before we want to make the connection and change the navigation type to overlay we want the modal to be centered in the frame so we'll leave that value alone we'll also leave the overlay background option as 25% black and keep the close when clicking outside checkbox checked when the user confirms the deletion of the photos from the modal we want to take them to a new frame that displays the empty state and album with no photos let's make that connection from the delete photos button to that frame this will just be a default navigation with an instant transition also if the user chooses to cancel instead we want to navigate them back to the original frame we could do this by dragging a connection from the counsel button to the original frame but we can also choose the option to close the overlay directly on the canvas when we start dragging the connection from the button two icons appear on the canvas these icons allow us to easily set the navigation type to close overlay and back to previous frame we'll link this to close overlay with presentation view open in another window we'll click on the overflow menu icon to open the menu when we do our overlay appears over the original frame in the position we manually set you'll also notice that the frame behind the overlay became slightly darker this is due to the overlay background that we set to five percent earlier we can click outside of the overlay to close it and return to the original frame this is because we left the close when clicking outside checkbox checked when we click on the option to delete photos our second overlay appears in the center of the screen clicking the Council button shows how though close overlay connection works if we open the overlay again and choose delete photos were taken to our second frame in this demo we'll use overlays to prototype opening and closing a hamburger menu we'll also introduce the swap navigation type the hamburger menu already has links for the user to navigate to a page for all photos one for albums and one for deleted photos to begin we'll connect the hamburger menu icon from the navigation header of the photos frame to the hamburger menu frame which will act as our overlay after making the connection we'll change the type to overlay this time we want the overlay to be anchored to the top left corner the height of the overlay is the same as the frame since it's anchored to the top left it will cover the entire height of the frame will keep the overlay background as the default and ensure the close overlay checkbox is checked however this time we'll add a transition to have our menu slide in from left to right we'll do this by changing the transition type from instant to move the direction to right easing to ease in and out and leave the duration at 300 milliseconds let's preview how this looks in presentation view if we click on our hamburger menu icon we see that our overlay slides in from left to right and we can click outside of the overlay to dismiss it if we use our menu to navigate to the album's frame we aren't able to open the menu again because we haven't connected the icon from this frame yet when we create this new connection to the overlay all the properties we customize initially will also apply here the transition values are not properties of the overlay itself so we'll need to recreate these while we're here we can connect the deleted photos frame as well back in presentation view we can now navigate across all of our frames using the menu we also want to prototype the functionality for a user to view other accounts from the menu by clicking the arrow to the right of the active account to do this we can use the swap functionality to exchange one menu overlay for another will link the arrow in the menu header to the account menu frame and choose the swap navigation type we'll also set the transition to dissolve easing to in-and-out and duration to a hundred milliseconds next we'll connect the arrow back to the account menu so we can toggle the different states of the menu if we try to draw the connection you'll see that it will snap to the overlay icon however we want this connection to swap between two overlays instead to do this we can hold down the option key while drawing the connection so when we release it the navigation type is automatically set to swap now wherever we access the hamburger menu we can also navigate to the account menu there are many other ways to use overlays to prototype realistic high fidelity interactions here are a few more examples of how you can use overlays context menus like following a long press to select an edit text tool tips when you hover over an object or icon a lightbox effect for enlarged photos from a thumbnail action sheets a menu with additional actions like sharing with other dogs opening a keyboard and even swapping between different keyboard states pop-up or toast notifications to confirm a user's actions let's review what we've learned an overlay is an interface element which appears above the main application interface and is commonly used for things like modal's alerts notifications action sheets and menus after making your connection to a frame change the navigation type to overlay and set its position check the close when clicking outside checkbox to enable the option to dismiss your overlay by clicking outside of it overlays work with transitions so you can customize how the overlay behaves to make it more realistic hold down option or alt when creating a prototype connection to set the navigation type to swap you swap to exchange one overlay for another while maintaining their position

Channel: Figma

Views: 276,312

Keywords: figma, tutorial, overlays, prototyping, ui, ux, ui/ux, user interface, user experience, collaboration, figma prototype, figma overlays, figma transitions, transitions, design, interface design

Id: t82XRda5DnY

Length: 10min 19sec (619 seconds)

Published: Mon Dec 03 2018

Reddit Comments

[u/kjabad]

I was really hoping that this will happen some day. I was surprised to see the video today in YouTube feed!