Published
September 10, 2024

Figma UI3: First Impressions

UI3 has been slowly rolling out with mixed impressions. The visual design is a nice refresh, but some changes just feel unnecessary.

Floating Panels

A lot of people in the design community have been complaining about how the new floating panels take up more space compared to the pinned panels in UI2. In all honesty, I personally don’t mind the change. The difference in screen real estate is very minimal. Unless you are working on a small screen like a tablet, I don’t see this being detrimental to most people’s workflows. Although I don’t mind the change, I think there are ways Figma can add more utility to the UI.

Freely draggable panels
As a design tool, it’d be nice if Figma gave its users the ability to “design” their own workspace freely. The floating panels look like moving windows on a desktop, but they’re fixed in their position on the canvas. I feel like this was a big missed opportunity because functionally the new floating panels are no different from the fixed panels in UI2.

Being able to move the panels around freely would provide two key benefits:

  1. Moving Figma’s UI out of the way when working on certain designs
  2. Customize Figma’s workspace to match other apps or better suit personal preferences

Example scenario 1:
I’m designing a bottom navigation bar. With a freely draggable toolbar, I’d feel compelled to move it away from the bottom so that I can focus on the canvas.

Example scenario 2:
Going back and forth between Adobe’s product suite and Figma’s can be annoying. If I were an avid Adobe user, I might feel compelled to reorganize Figma’s panel layout to match Photoshop or InDesign’s.

Aside from the functional benefits, giving this level minute control would make Figma users enjoying using the product much more. We all love customizing our products and tools. Heck, even Apple eventually relented control over iOS layouts and app icons to its users.

More control over hiding/minimizing panels
Right now we only have two settings for hiding/minimizing the floating panels:

  1. Collapsing both the layers panel and inspector panels
  2. Hiding all but the bottom toolbar

The current approach feels one size fits all, but I’d love more minute control. It would be great if we could collapse or hide each panel individually.

Pinning panels
Instead of having panels freely floating all the time, we could pin panels to different sides of the screen. Pinned panels that would be unaffected when hiding or collapsing other panels.

Rulers
In UI3, the rulers are on the edge of the window. This means the floating panels are in the way of your work and the measurements on the ruler. In all honesty, this doesn’t effect me personally because I mostly work with responsive or adaptive UIs (pixel and rem values are more useful for me). However, I can see this being a larger issue for designers that are working with hardware or print requirements. It would be great if Figma could bring the rulers closer to your work, but this would probably only be possible if Figma also gave us panels that pinned to the edge o the screen.

Customize order of tools

The dynamic and contextual menus in the inspector is great, but sometimes I’d like to organize certain controls or menus differently from Figma defaults.

Page and Asset Organization

Organization in general has always been a bit of a mess in Figma. I’ve always felt like this was an area Sketch managed better. Unfortunately, Figma hasn’t made many improvements to organization in UI3, but I believe they only need a few small tweaks to really improve this experience.

Pages
It is so easy to go crazy with pages in an attempt to organize your Figma file. It would be great if we could nest pages underneath others. This would give users the ability to organize page with hierarchy while maintaining visibility of all your pages. I’m currently doing this by titling my pages with emojis, arrows, or numbers.

I’d also like to see Figma add the ability to group pages into folders. Figma’s new divider feature is a great remedy for creating visual separation in your pages, but it doesn’t help when you have dozens of pages you need to scroll through on a large file. Currently I keep my reuseable assets and components in files separate from my working file or prototypes. Figma makes this easy by allowing users to move published components between different files. If you're not using this feature here's a link. This works great for a lot of situations, but sometimes it’s just easier to keep some components or assets local to the file.

Components
In Figma, you can manage or search for all your components in the Assets tab. If you manage a lot of libraries in your workspace, it can take forever to browse for the component you’re looking for (especially when you don’t remember its name 💀). In Sketch, they have a page view dedicated to viewing all your symbols (components) that are used in your file.

Figma can absolutely take this feature from Sketch and make it their own. I’d love for Figma to include these features on an expanded assets tab:

Conclusion

Figma’s UI3 brings a nice aesthetic update, but is lacking in functional upgrades. This article’s small Wishlist of feature improvements would give UI3 some of the bite it needs to bark. Figma has a giant team of designers who have probably already considered these ideas or have even better ideas that are in the pipeline. I’m okay with UI3, but I’m more excited for Figma’s next major update. Hopefully, Figma will deliver more functional upgrades to its users. The design space is extremely competitive and I believe this will continue to mount pressure on Figma to innovate with its products. Peep a Figma alternatives article coming soon 👀

What are you waiting for?
Schedule a call with me to discuss how I can help with your project or team.