Project: I want to propose a possible addition to the Figma user interface which would help newer users understand the more advanced features Figma offers.

Scope: Creating the tool tip and modal, prototyping in Figma, and user testing

Contributors: I used the official Figma resources to create the tool tip and explanation.

Problem: While learning to use Figma, I thought it could be helpful to have some additional explanations for some of the more advanced features.

Goals:

  • Create a tool tip for the Auto layout button
  • Create a modal to give further explanation of Auto layout within the interface
  • Test the tool tip and modal on beginners to verify that it offered helpful information

Solution: The Auto layout feature is a powerful tool that took me far too long to start using, so I used that feature as my example. I decided to make a tool tip and a modal to help users get more information about the topic. The tool tip gives a short description of the feature along with its keystroke since those are the standard tool tip contents in Figma. Once a user has highlighted or selected the feature, I made an info icon appear which brings up a modal when clicked. The modal has additional information, a graphic displaying the feature, and a link to Figma’s website explaining the feature.

Results: After creating the prototype, I tested it with multiple people who had not used Figma before. I presented the original button, asked the user what they thought the feature did, and then asked them to interact with the prototype. The users stated they had a better understanding of the feature and would be more likely to use it after trying my prototype. There were some wording changes suggested to eliminate redundancy which have since been made.