Hovers & Overlays: Free Figma Tutorial

Topics Covered in This Figma Tutorial:

Creating Dynamic Button Hover States Using Variants and Implementing Interactive Pop-Up Overlays for Enhanced User Experience

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master two fundamental interaction design techniques that define modern user experiences. First, you'll implement sophisticated hover effects using Figma's variant system—a critical skill for creating interfaces that provide immediate visual feedback to users. Second, you'll learn to create overlay interactions that elegantly display contextual information without disrupting the user's workflow.

These techniques form the backbone of professional interface design, enabling you to craft experiences that feel responsive and intuitive. By the end of this tutorial, you'll understand how to leverage Figma's prototyping capabilities to create production-ready interactive elements that enhance usability and delight users.

Opening the File

Let's begin by accessing your project files and setting up your workspace for optimal productivity.

1. In Figma, navigate to your file browser if you're not already there:

   • In the Desktop app: Click the Home tab (Mac users can alternatively choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and select Back to files.
2. To import your local exercise file, click Import file (typically located near the top right of your interface).

3. Navigate to Desktop > Class Files > Figma Class and double-click Hovers and Overlays.fig to select it.

   After the file uploads successfully, click Done and double-click the file thumbnail to open your workspace.

Designing the Hover State (Using Variants)

Now we'll create a sophisticated button component that transforms seamlessly when users hover over it. This technique is essential for providing immediate visual feedback and guiding user interactions.

1. Set your workspace to 100% zoom by pressing Shift–0 for optimal precision while working.

2. In the map interface, click once on Kauai to select it.

   Notice that this is a group element, which automatically selects both the text and the accompanying circle icon.

3. We'll implement auto layout to ensure our design remains flexible and professional. In the Design panel, locate Auto layout and click the Plus (+) button.

   Auto layout is crucial for maintaining consistent spacing as content changes—a hallmark of scalable design systems.

4. Transform this element into a reusable component by clicking Create Component in the middle of the toolbar.

   Components are the foundation of efficient design systems, allowing you to maintain consistency across your entire project.

5. You'll notice that a copy of the icon (the circle with "i") was automatically created to the right of the button. This happens because Figma follows a fundamental rule: while you can use component instances within other components, you cannot nest main components inside other main components.

   We'll organize both main components (the button and icon) in the designated area off the right side of this frame—a best practice for maintaining clean, organized files.

6. Select the standalone icon (the one created outside the button) by clicking on it.
7. Hold Shift and click on the button to select both components simultaneously.
8. Drag both elements to the right side of the canvas, positioning them in the empty space below the Kauai info card for better organization.
9. Click on an empty area of the canvas to deselect all elements.
10. Locate and select the Kauai button (it may appear faint, but we'll address the visibility shortly).

11. Create a variant for the hover state by clicking the Add variant button in the toolbar.

    • Observe that a second button appearance has been generated in the canvas.
    • In the Design panel, rename Variant2 to Hover for clarity.
    • Double-click on Property 1 and change it to State, then press Return (Mac) or Enter (Windows) to confirm the change.
12. Select the entire island name component set by clicking its label.

13. Improve visibility by adding a background fill. In the Design panel, scroll to the Fill section and click the Plus (+) button.

    • Click on the newly added fill color and select Black from the color picker.
    • Close the color picker to apply the changes.

    The darker background significantly improves the button's visibility and professional appearance.

14. Within the island name component set, select the bottom button (your hover state).
15. Refine the spacing for a more polished hover effect. In the Design panel, under Auto layout, adjust Spacing between items to 7.
16. Enhance the icon's prominence by double-clicking on it to select it individually.
17. In the Design panel, under Layer, increase the Opacity from 70% to 100% for a more engaging hover state.
18. Return to the Assets panel by clicking Assets at the top of the left panel.

19. Deploy your new component by dragging the Kauai button from the Assets panel onto the map, positioning it next to the corresponding island as shown:

    

Making the Hover State Work

With our visual design complete, we'll now implement the interactive behavior that brings your hover state to life.

1. Switch to the Prototype panel in the right sidebar to access interaction controls.
2. In the island name component set (located to the right of the Desktop frame), select the top button (default state).
3. Create the interaction by dragging the blue circle connector to the bottom button (hover state).

4. Configure the interaction in the Interaction details panel:

   • Change the trigger from On click to While hovering to create a proper hover effect.
   • Under Animation, change Instant to Smart animate for smooth, professional transitions.

5. Test your work by clicking Present at the top right, or use the keyboard shortcut Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).

6. Hover over Kauai and observe the smooth animation as the icon moves closer to the text and brightens—exactly the kind of polished interaction users expect from modern interfaces.

7. Close the presentation to return to your workspace.

Making a Second Button

Now we'll demonstrate the power of component-based design by quickly creating additional interactive elements.

1. Create another instance of your interactive button for Oahu by holding Option (Mac) or Alt (Windows) while dragging the Kauai button down and to the right, positioning it beside the next island.

2. Double-click on Kauai in your new button copy to begin editing.

3. Once the text object is outlined, double-click again to highlight the text for editing.

   • Replace the text with Oahu.
   • Notice how the auto layout maintains perfect spacing as you edit—this is the efficiency of well-structured components in action.
4. Press Esc once to complete text editing.

5. Press Esc again to deselect the component entirely.

6. Launch the presentation mode by clicking the Present button .
7. Test both buttons by hovering over them—both should exhibit identical hover behaviors, with only the text content differing. This consistency is what separates professional interfaces from amateur ones.

8. Exit the presentation to continue building your prototype.

Opening a Pop-Up (Using an Overlay)

Next, we'll implement overlay interactions—a sophisticated technique for displaying contextual information without disrupting the user's primary workflow. This approach is essential for creating clean, uncluttered interfaces that scale well across different screen sizes.

Our goal is to display the Kauai info card (currently positioned to the right of the frame) when users click the Kauai button.

1. Get a complete view of your workspace by pressing Shift–1 to zoom to fit all elements.
2. Ensure you're viewing the Prototype panel on the right side.
3. On the Desktop frame, select the Kauai button with a single click.

4. Attempt to drag the Kauai button's blue connector circle to the info card—you'll notice it won't attach.

   This limitation occurs because the info card is currently just a group. Figma's overlay system requires frame objects for proper functionality—another example of why understanding Figma's object hierarchy is crucial for professional work.

5. Select the info card to prepare it for conversion.
6. Navigate to the Design panel in the right sidebar.

7. At the top of the Design panel, click the dropdown menu labeled Group and select Frame to convert the object.

8. You'll notice the drop shadow has been clipped. In the Design panel, uncheck Clip content to restore the full shadow effect.

   This restoration ensures your design maintains its intended visual polish.

9. Return to the Prototype panel by clicking Prototype at the top of the right sidebar.
10. Select the Kauai button on the Desktop frame once more.

11. Now drag the Kauai button's blue connector to the info card—this time the connection will work properly.

12. Configure the overlay behavior in the Interaction details panel:

    • Change Navigate to to Open overlay to create a layered interaction.
    • Under Overlay, change Centered to Manual to gain precise control over positioning.

13. Position the overlay thoughtfully by dragging it to match the layout shown below:

    

14. Close the Interaction details panel to clean up your workspace.

15. Test your overlay by clicking the Present button at the top right.

16. Click the Kauai button to trigger the info card overlay. The smooth appearance creates an elegant, professional interaction that maintains context while providing detailed information.

    However, we still need to implement a way for users to close this overlay—a critical aspect of user experience design.

17. Exit the presentation mode to complete the interaction.

Making the Close Button Work

No overlay interaction is complete without an intuitive way to close it. We'll implement the close functionality to ensure users maintain full control over their interface experience.

1. In the info card frame on the right, select the close button (the circled X icon).

2. Add a new interaction by clicking the Plus (+) button next to Interactions in the Prototype panel.

3. Configure the close behavior by clicking on the Click —> None interaction that appears:

   • Change None to Close overlay to complete the interaction loop.
   • Close the Interaction details panel when finished.
4. Click on an empty area of the canvas to deselect all elements.
5. Launch your final test by clicking the Present button .
6. Click the Kauai button to display the info card overlay.

7. Click the close button on the info card to dismiss it smoothly.

   Congratulations! You've successfully created a complete interactive system with hover states and overlay functionality—skills that are fundamental to modern UX design and highly valued in professional environments.

8. Close the presentation to return to your design workspace.