How I Designed Tooltip for New Figma UI

Eda Hazal Tümer
Eda Hazal Tümer
    • Get in touch

    Overview

    This document outlines the design and functionality of the tooltip feature integrated into Figma's new interface. The purpose of this tooltip is to guide users through essential features, ensuring a smooth onboarding experience for both new and returning users.

    Design Philosophy

    The tooltip design follows a user-centered approach, focusing on clarity, accessibility, and ease of use. The visual style is consistent with Figma’s branding, utilizing minimalistic elements that do not detract from the main interface. The tooltips are designed to be intuitive, informative, and non-intrusive.

    Interaction Design

    • Navigation:

      • Users can navigate through the tooltips using "Next" and "Previous" buttons. A "Skip" button is provided to exit the tutorial at any point.

    • Accessibility:

      • Tooltips are designed to be accessible, with clear text, sufficient contrast, and support for keyboard navigation.

    • Replay Option:

      • The "Replay Tutorial" button allows users to revisit the tutorial at any time. This button is placed in a non-intrusive location to ensure it’s available when needed but doesn’t clutter the interface.

    User Flow

    1. Entry Point: Users are greeted with the Welcome Tooltip upon first accessing the new Figma interface.

    2. Sequential Guidance: Users are guided through the main features of the interface, with each tooltip focusing on a specific section (Toolbar, Layers Panel, Properties Panel).

    3. Completion: The tutorial concludes with an option to replay or user can use exit button to complete the tutorial.

    4. Revisiting: Users can choose to replay the tutorial via the Replay Tutorial button at any time.

    Visual Design Details

    • Color Scheme: The tooltip background is semi-transparent dark gray (dark mode color of Figma) with white text (#FFFFFF and #EBEBEB) to ensure readability and focus.

    • Typography: Figma’s standard font (Inter) is used, with a size of 16 px for tooltip text, ensuring consistency with the overall UI.

    • Iconography: Simple icons are used for navigation buttons, such as arrows for "Next" and "Previous."

    #UIUXDesign #Figma #DesignTools #UXDesign #UIDesign #UserExperience #DesignInspiration #Prototyping #InteractionDesign #WebDesign #ProductDesign #CreativeProcess #FigmaTips #DesignThinking #UIX101 #Tooltip #dailyui #challenge #ui 087

    Eda Hazal Tümer
    Eda Hazal Tümer Get in touch

    More by Eda Hazal Tümer

    View profile
    • Like