Timeline
My Role
Goal
1 Week
Sole Designer
Improve the Figma experience on small laptops.
Many people use Figma on small laptops where Canvas space can feel very cramped.
Small laptops allow flexibility to work from various parts of home, office, the local coffee shop or while traveling. Most people working for my current employer including designers, marketing and engineering use 13" laptops and the existing layout and options in Figma make it challenging to use on small laptops.
One problem with smaller displays is that the UI can't just be proportionally scaled to fit. The fonts and controls need to stay the same size which keeps the side panels the same width and the top nav the same height. The only thing that changes is a dramatic decrease in canvas space. Small displays show 2-4x less content on the canvas.
On a 13” MacBook Air the canvas is only 9.8” diagonally across compared to 17.4’ on a 21.5” iMac. (Actual Scale)
To feel less cramped many people end up zooming out to see more and then hunch over or squint to see better. A workaround, that I personally use, is scaling the interface to 80% and I too end up risking my posture and eyesight.
There are are existing functions to hide the left panel or all the UI but it requires knowing kind of awkward keyboard shortcuts or drilling through several menus. Frequently hiding and unhiding important UI with keyboard controls is annoying. People just end up leaving both panes open and just deal with the smaller canvas space. These functions are also very difficult for new users to discover.
There is an opportunity here to rethink the UI to open up more canvas space.
Settings for hiding panels are deep in nested menus or require knowing a keyboard shortcut.
How might we help users have more canvas space on small laptops?
Option 1
Expand/Collapse buttons
Option 2
Single side menu
Option 3
Secondary Toolbar
I explored multiple designs for creating more canvas space and ended up choosing expanding/collapsing panels to not alter the core Figma experience that so many users have come to rely on. Single side menu and top bar controls altered the Figma experience too much. It became important to enhance the existing experience without changing familiar UX.
Having visual controls will be important to allow users to discover collapsing panels and hovering over the edges to bring back panels would allow the canvas to remain full screen until panels were needed without the need to remember keyboard shortcuts.
Ways to Quickly Access Panel Controls
With on screen buttons to show and hide side panels making it easier to hide panels, there needs to be a better, quicker, more intuitive way to unhide panels including the right panel. The existing show/hide UI keyboard function are just not sufficient.
A. Show panel on edge hover
B. Improved keyboard shortcuts
C. Show panels on right click
I chose hovering over the edges as the best option and combined it with better shortcuts.
Hovering over an edge allows a quick glance at a panel without needing it to always be open and is not hard to discover. Moving the cursor to that general area is already necessary to use any of the options there. Another big plus of this option is that it does not impact existing, familiar functionality or layout. Panels still work the same way by default with the added bonus to collapse and quick views.
A. Hover over collapsed edge to show panel
B. Improved keyboard shortcuts
C. Show panels on right click
A. Expand/collapse left and right panels
B. Single panel and tabs
C. Secondary toolbar at the top
Refining the interface and interactions
Once I was confident about the general direction of show/hide buttons and expanding on hover, I iterated on the UI details. I needed a style that fit in well with the existing design language while also being discoverable and easy for new users.
Finding the right expand / collapse button location and style
A. Menu button
B. Full height edge strip
C. Bumped out tab
D. Button in line with top corner
E. Floating panel icon button
F . Prototype view style
G. Edge arrow button
H. Floating arrow button
After exploring dozens of options, I settled on free floating buttons that closely matched existing Figma controls and style and blend into the existing UI language without calling too much attention to themselves or taking away from the precious canvas space. Option E does a good job of balancing discoverability while not being distracting. The collapse button should only appear when hover over the panel to keep the canvas open and will be persistent when in the panel is collapsed.
Exploring collapsed panel states
For the collapsed state, as for the buttons, it is important that it is easy to identify the interactive elements and easy to expand on hover.
A. Button width strip
B. Thin blue strip with floating button
C. Thin white strip with floating button
D. Floating button with no strip
E. Just strip with no button
F . Fully hidden
Ultimately I settled on a thin white strip at the edge of the screen with the expand button always visible. This way there is a clear target for users to discover how the expand on hover function after collapsing a panel and for continued use. At the same time it does not take up too much space or call too much attention away from the canvas itself.
Final design and 5 key improvements
1. Collapse/Expand Buttons
Buttons for collapsing and expanding the left and right panel are clearly visible making it easy for new users to discover how to hide the panels. They fit in well with the existing UI language and are not too obtrusive.
2. Tooltips and Keyboards Shortcuts
When hovering over the new buttons, a tooltip appears letting users know what the button does and shows the keyboard shortcut for using this command. Shortcuts are now easy to discover. Shift+[ to expand and collapse and expand left panel, and Shift+] to collapse and expand the right panel.
3. Quick View by Hovering
When collapsed, the left and right panels become a slender white line at the edge of the screen. Hovering over the white line expands the panel and it remains open while hovering over the or interacting with it. This way users can choose to keep their panels collapsed which maximizes space, and only show them on a temporary, as needed basis.
4. Side Panel Buttons Show Only on Hover
To not clutter the interface, show/hide panel buttons are visible only when hovering over the panel when it is set to expanded.
5. Room for a Wider Panels
There was always a tension between making the left panel wider to see more of deeply nested layers and losing canvas space. With easily collapsible/expandable side panels users can confidently make the left panel as wide as they need without worrying about lost space.
Bringing it All Together
These changes will allow users on small devices to intuitively open up their canvas space without sacrificing familiar workflows.
Results
These designs have been tested with a handful of people with positive comments and results so far. The next step is to post the designs and prototype to the Figma community to gather feedback and support for this feature.
Keeping designs familiar and using existing patterns
Through this project, I learned that I have to iterate many concepts and go in many directions to confidently find the way back to the simplest solutions. Exploration is important, but often the best design is the one that uses existing components and patterns to add new functionality without getting in the way of what users already love and rely on.
Looking at apps in other industries that solve similar problems can provide a helpful jumping off point and a way to test ideas without needing to build out every detail.
Even after the initial direction is settled, it can take a lot of fine tuning, testing, and iterating to get the experience just right.