Deciding on Floating Panels
Article
April 29, 2025
Simon Gustavsson

When Figma launched its “UI3” last year, they received backlash in the designer community regarding the change from “docked” UI panels to “floating” ones. The new ones, instead of being stuck to the edges of the view, were pulled out by a few pixels and had rounded corners. This meant that your canvas was visible around the panels at the edge of the view, making you more aware of the stuff there. It was visually also a breath of fresh air (panels have been docked for most window-based applications in computer history), and I'm sure they wanted to appear forward-leaning.

While a seeming minority loved the change (though noting it took a little while getting used to), the vocal majority cried out. Eventually, within a short amount of time, Figma had reverted back to the docked panels, leaving the floating ones to the simpler and more use-case-specific product of FigJam.

I, for one, loved the floating panels. It didn't even take time to get used to, and the criticism that it was visually distracting seeing your content in the gaps between the panels did not resonate at all. You do lose a few pixels of screen real-estate on the edges, but the improved effect (at least the feeling) of being more in touch with your canvas was worth it.

floating-panels-comparison.png

When we revamped the Midio UI a few months back, we also did the switch to floating panels. Mostly on a bet that it would make the product feel fresher and easier to grasp, and that we could work around the inevitable reduction in flexibility (dealing with overflowing content and scrolling is more tricky). One part of the decision was definitely that I wanted us to at least give it a shot. In a time where most user interfaces blend together, I wanted this one decision to feel a little daring.

One might criticise it for throwing away a system that has worked well since forever. But there was always this feeling that Figma reverted their layout too quickly, and that there would be ways to accommodate the issues people faced. And once quickly reverted, the door felt completely shut for future uses of it. I wanted us to give it a fair shot.

A clear benefit of a floating panel is that it can adapt the size to its content. That in turn allows for more of the canvas to be visible. Granted, in complex projects this benefit goes away. But at least it does so gradually as you work. Perhaps we’ll support height-resizable panels in the future, so the choice could be up to the user to show more or less of the canvas.

floating-panels-canvas-space.png

Complex products need interfaces that don’t appear complex or difficult to understand for newcomers, while obviously not hindering professional workflows and speed. There might come a day when we also see the need to revert to docked panels, but for the time being, we’re betting on the floating ones being worth their effort.