UI3 Feedback

Agreed! The autolayout fill and hug are the most used actions kept under a dropdown. Also the previous UI keeping it separate makes soo much more sense

+1 to everything you said. I also really dislike the choice of hiding the Fill/Hug properties under a hover and a click – it’s such a common action for me that I’m not sure why you would make it more complicated to find.

Switched back to the old UI

They are trying to move things around a lot and it is creating a lot of confusion. Old UI was much better to understand and find things.

Another note on the Ruler Guide Functionality. Now I have to drag ACROSS the left panel to add a new vertical guideline. Sometimes my hands get shaky, so I’m rolling the dice on whether I successfully get the guideline into the main canvas area or if I accidentally click something in the left panel.

I love that I can now resize the right panel, but I noticed something that seemed strange to me… the indentation scales with the panel width.

At its widest, the extra-wide indentation looks bizarre.

versus indentation at its skinniest…

Was this intentional? I was kind of expecting indentation to remain small, allowing deeper nesting without truncating names.

Why does the new UI waste so much space?

It’s been fun poking around and checking out this UI3 update but I’ve got some notes specifically about the properties panel

1. The default size is too small. The text seems too small, the inputs seem to small. I increased the interface scale size to 110% so that its easier to scan
2. In the old UI, width, height, X, and Y were grouped together. Now they they live in two different sections, something just doesn’t feel right. I’ve been getting tripped up every time I go look for any of those properties.
3. Since the icons and input layouts for every property has been totally re-thought and reconfigured, its taken a while to get used to and understand where everything is. It’s sorta been disrupting my workflow. Its like learning a whole new app.
4. The properties panel is kinda not easy to scan and parse. Because theres no rhyme or reason to the placement of the inputs and controls, its not effortless to scan and locate the properties im looking for.
5. Hiding the boolean properties in that “more” menu seems like an odd choice. I know its contextual and if you select a couple shapes, it appears as a first class citizen but its sorta not obvious. Because, once again everything is so small.
6. Because everything is so small and the organization of the inputs and controls seems a little chaotic, im almost getting photoshop panel vibes. 😬

Got the UI3 a few days ago. Here are some first thoughts:

• Floating UI panels - honestly, I do not see any value in it. Please let us stick left and right panels, so that there is no unused space around them. When the design elements get into that empty space around the panel, it creates a visual distraction when I move around.
• The middle floating panel - overall feels good. It’s position, though, should not be fixed to bottom only. I want to have an option to move it on top, as I prefer to have the bottom section to be clean from any UI items (except temporary ones).
• Right panel - overall feels good. Need to get used to new layout and spend more time with it to understand if something can be further improved.
• “Return to instance” panel does not have enough contrast. At first I thought it was gone, as it blended with the bottom UI panel.

Going to old UI for now. Will be checking back to see if things have changed.
Floating panels - really, please, no.

1. Floating Panels:

In the new UI, panels and tools that were once docked have been shifted to floating or semi-floating positions, but they aren’t truly floating in the sense that users can reposition them. Instead, they occupy fixed areas at the bottom or side, which can feel cumbersome.

• Issue: The “floating” nature eats into the valuable screen real estate. Users on smaller screens or those working on large, complex designs are likely to feel the pinch, as there’s less available space to see their canvas or frames clearly.
• Recommendation: Figma should consider allowing users to fully customize where these panels appear (true floating), or provide an option to revert to the previous docked configuration.

2. Bottom-Mounted Floating Toolbar:

The new floating toolbar at the bottom consumes significant space, making it hard for users to manage their workflow efficiently, especially when designing larger UIs like mobile apps or websites.

• Issue: While some features may be easily accessible from the toolbar, the sacrifice in vertical space (already limited by browser tabs, OS UI, etc.) adds to the problem. Designers typically need more vertical room to work with their layers, particularly when working on mobile mockups.
• Recommendation: This toolbar could be minimized, collapsible, or, better yet, docked to the side, where users can opt to open it only when necessary.

3. Detached Toolbars vs. the Previous Design:

The older design had all the tools attached directly to the window, creating a more unified experience and maximizing available canvas space. The shift to this detached, margin-heavy layout can feel disjointed for users who were accustomed to a more compact workspace.

• Issue: The detachment adds unnecessary padding or white space between essential tools and the canvas, disrupting workflow and potentially causing user frustration.
• Recommendation: Reinforce a tighter, more space-efficient design that minimizes margins and paddings. The previous “all-in-one-window” layout felt streamlined and less cluttered.

4. Lack of Movability:

Ironically, while these panels “float,” they are not movable, meaning users are stuck with a UI layout that may not fit their specific needs or preferences.

• Issue: Users, particularly those working with different screen sizes or multiple monitors, would benefit from being able to move panels freely to organize their workspace.
• Recommendation: Introduce the ability for users to drag and position panels wherever they find most convenient. Figma is a tool for customization, and this flexibility should extend to the UI itself.

5. Margin Wastage Between Toolbars:

There’s a noticeable inefficiency in the way margin space is used between the various toolbars and canvas area. In design tools, wasted margin space reduces the amount of area available for actual design work.

• Issue: In a visual design tool like Figma, every bit of screen space matters, particularly when working on highly detailed projects. Having thick margins between the toolbars and the canvas, as seen in the updated UI, adds unnecessary clutter and feels counterproductive.
• Recommendation: Tighten up the margins and ensure that toolbars are integrated into the edges of the interface to give users the maximum possible canvas area.

Additional Observations:

• Tool Accessibility: The access to text styles, auto-layout, and constraints is still handy and visible, but the overall flow has been disrupted with floating components. There needs to be better organization in how frequently-used tools are presented.
• Visual Overload: Floating elements can contribute to visual overload, particularly if they aren’t dynamically hiding when not in use or overlapping when there’s no activity. This should be addressed by streamlining interactions or toggling based on usage patterns.

Final Thoughts:

Figma’s recent redesign feels like a step backward in terms of usability. The previous UI design had a cohesive and efficient layout that maximized workspace, and this newer one, with its floating panels and fixed positions, detracts from that experience. Flexibility in panel placement, reduction of margins, and reintroducing a more compact toolset could significantly improve the user experience for both new and seasoned users.