Figma - Passion Project
Creating more usable screen real estate with intutive interaction.
Product Design | UX | UI | Prototyping | Icon Design
Overview
The Challenge
Timeline
1 Week
Employer
N/A Passion Project
My Role
Sole Designer
Goals
Help users who work with Figma on small laptops.
I do a lot of my design work remotely from my 13-inch Macbook and many others do the same with even smaller screen sizes. The persistent problem I find is that the workspace in Figma feels cramped when on a laptop display. I can use “Command + /” to hide the left and right pane, but then there is no good way to see vital tools and info and the only good way to bring it back is using the shortcut again. Another solution that I have tried is to scale the interface to make the text and sidebars tiny but then I tend to squint or get close to my screen. It is nice that there is a shortcut for hiding and unhiding the left sidebar, but it’s not intuitive to learn about and only solves half of the problem.
Deliverables
-
User Flows
-
Prototypes
-
Icons
-
Screen Recordings
-
GIFS
The Solution
Allow hiding the left and right sidebars individually with quick familiar ways to hide and unhide them. Ideally, there would be multiple ways to hide and unhide including easy-to-discover interface buttons, intuitive keyboard shortcuts for each side, and a way to show the sidebars by hovering over the collapsed-sided bar edges. Together these changes would allow for greater flexibility of their visible workspace. To easily hide and unhide tools when more or less workspace is desired or required.
Process
1. First Pass
Initially prompted by the cramped feeling of the UI on a small screen, I began to explore Figma to see how to hide and unhide panels. Not satisfied with the existing options, I knew I wanted a way to quickly hide the sidebars without adding additional keystrokes or button pushes. At first, I thought: wouldn't it be great if the tools only appeared when I clicked on editable elements? But, because of how often that would happen the menu would be annoyingly flickering on and off. Then I thought: What if the menu collapsed and appeared while hovering over an edge of the screen similar to hot corners on a mac? Users have to move their cursor to the sidebar anyways. What if simply moving it in the general area of the desired tool would make the sidebar appear and when hovered away, it would collapse back? That got me excited to make a quick prototype in Figma.
2. Initial Prototype
After just a few iterations, the idea evolved into collapsing the sidebars individually down to thin strips that could easily be hovered over. To quickly create a prototype, I used a screenshot of a new Figma design file with a selected rectangle in the middle and covered the sidebars. Then I copied the screenshot two times and cropped the screenshot to be just the individual sidebars. From there I could use the prototyping overlay feature to have the sidebars come in on hover or click. This worked great. Now all the concept needed was further refinement of the UI elements. What would be the best way to show the collapsed state? Would there be a button or an icon to lock and unlock the panel? What would that icon look like?
3. Refined Prototype
Once I dove deeper into this project, I started noticing sidebars and collapsing functions everywhere. Surprisingly, one place I had not noticed this pattern before was Jira even though I use it almost every day. The patterns and solutions they are using are a great way to resolve some of the detail issues that were still murky for my concept. They have a sidebar that is not necessary all the time and a visible button to collapse and expand it and lock it in place. When hovering over the collapsed sidebar it expanded until hovered away. It works like a charm and there are good visual cues and discoverability. This helped validate the idea and take it to another level. The next step was to adapt all the patterns in a way that integrated well with Figma’s UI.
4. UI, Icon, and Development
I went through a handful of concepts for what the collapsed states could look like and where the buttons for expanding and collapsing the sidebars would go. After about ten concepts and some feedback from other designers, I settled on the solution that seems to be cleanest and matches well with the existing Figma UI and iconography. Rather than introducing a new icon, I noticed Figma already has an appropriate icon for hiding and showing the sidebar in the prototype view so naturally I just adapted it. Not knowing all the constraints of Figma's UI, I designed possible solutions for various considerations that may limit the style and placement of interface elements for further development.
5. Initial Feedback
Designers that use Figma regularly tested the prototype and had a positive reaction to this simple solution for more screen real estate. Generally, they were excited and upon seeing the other concepts agreed that the current concept was the cleanest and most in line with Figma standards.
6. What I Learned and Next Steps
The initial concept and prototype work great and feel great so far. It’s been awesome making a quick prototype with minimal effort using screenshots to really get the feel of how the final feature could feel, look and work. This method has been very effective. I will definitely use it again. The prototype communicates the concept effectively and gives a good sense of the potential promise
Ideally, the next step would be to code this feature and test it with the real live app to see how users react to it over time and prolonged use. The UI and keyboard shortcuts would also need some iterating and testing. These steps will require more resources and time. To get the idea out there, I am going to post it in the Figma share and idea forum to get some more interest and feedback.