Figma scrapes UI3’s floating panels | by Allie Paschal | Oct, 2024


1. No more floating panels in UI3

This announcement surprised me. The floating panels, housing the Layers and Properties, were such a staple to Figma’s new look from the UI3 update. Since I’ve had the update for a couple months, the floating panels had grown on me. The floating panels gave more visual weight to what was on the canvas, and all tools (and actions) popped out on the UI.

Figma UI3 with the floating panels above the canvas
The removed floating panels from Figma’s initial UI3

Figma backed up removing the floating panels by referencing user feedback mentioning the “canvas felt smaller” and the “gaps were distracting”. I get that some didn’t like the floating panels, but that comes with the territory of any redesign. So it’s strange they’ve made the decision to revert to UI2.

Back to fixed panels, and RIP floating panels.

2. Everyone gets UI3 on October 10th

Big news for those still waiting for UI3! The wait’s end is in sight. By next Friday, October 10th, every user should (hopefully) have the update. I received the UI3 update on my work account (enterprise plan), but my personal account (free plan) didn’t, so it’s been swapping between the UIs.

Figma’s UI3 update with fixed panels
Figma’s UI3 update with fixed panels

And if you’re someone who doesn’t want to swap to UI3 quite yet, UI2 will still be available. Figma hasn’t announced an official deprecation date, but I predict it will be around January 2025. This date lines up with when Figma will start charging for beta features, like Figma Slides.

3. Visible auto-layout pixel values

In the initial UI3 , I couldn’t tell you how many pixels wide my frame was, but I sure could tell you it was set to fill. Figma prioritized the frame’s auto-layout details over the pixel values of the frame. But in the new update, the frame’s height and width values will always be visible (thankfully).

A frame is highlighted in a Figma design, and the auto-layout properties show the frame’s height and width pixel values
Pixel values are always visible in the new update

To get the pixel values for the frame previously, I had to hover over the height and width text boxes in the Properties panel. I can’t tell you how many times I did this since getting access to UI3. It was a pain.

Though I’m still sad about the floating panels, I’m glad Figma reverted this decision. I know they were trying to reduce cognitive load in the Properties panel, but this took critical details away. Thank you, Figma.

4. Auto-layout updates

In other auto-layout news, you can now use the “Quick actions” toolbar to modify auto-layout. To do this:

  • Select the frame with auto-layout
  • Select “Actions” from the toolbar (or use Command+K)
  • Search “hug” or “fill” in the search bar
  • Select the adjustment you need
Modify auto-layout through the “Quick actions” toolbar in Figma
Modify auto-layout through the “Quick actions” toolbar

I wouldn’t say this is the most usable way to add auto-layout or modify it (at least in my Figma workflow), but this adds a new way to do. Maybe this is just paving the way for new keyboard shortcuts in the near future…

I’m optimistic this will improve.

5. Duplicate rotations

I didn’t know I needed this one, but now I do. Previously, if I created a duplicate element with a rotation and wanted the following duplicates to continue the rotation pattern, it wasn’t possible. Now, it is possible.

All you have to do is create a duplicate of an element:

  • Use Command+D or CTRL+D to create the first duplicate
  • Move the duplicate to your liking
  • Add the rotation
  • Duplicate the duplicate (using Command+D or CTRL+D) → Repeat

The new duplicate will follow the move and rotation pattern. For example, if you move a duplicate by 100 pixels for the X and Y coordinates, then rotate it by 30 degrees, the duplicate will move an additional 100 pixels in the XY coordinates and rotate another 30 degrees.

A blue square is duplicated, moved, then rotated to create a duplicate pattern including the rotation
Use rotation duplicate in Figma

It’s the small wins for me.

6. Enhanced measurements in Dev mode

Dev mode makes it easy to find and inspect size, padding, and margins. But if there’s any measurement you really want your developer to know (maybe they keep getting the padding wrong), you can make a specific measurement visible.

In Dev mode:

  • Use the measure tool to select one element’s side (select the red indicator lines that show on hover)
  • Drag to an adjacent element to get the measurement value
  • Drag the value outside the design for better visibility
Add measurements that remain visible in Dev mode
Add measurements that remain visible in Dev mode

Don’t worry, you can easily select any measurement to delete it from the canvas as you make any updates.

I can’t believe I used to do this manually back in the day. Such a game-changer for documentation.

7. Consistent thumbnail aspect ratio

We all now know our thumbnail’s aspect ratio should be 16:9 no matter what kind of Figma file the thumbnail is for. The recommendation for the aspect ratio used to be different depending on the type of Figma file, like a community or a design file.

A frame in Figma with the menu open and “Set as thumbnail” highlighted
Figma thumbnails are recommended to have a 16:9 aspect ratio

As examples of this aspect ratio, you can use 1280 by 720px or 1980 by 1080px. Just remember it’s 16:9 for thumbnails across the (Figma) board.

8. More Google fonts

I will never complain about more fonts (or typefaces) in a design tool. Hundreds of new Google fonts were recently added to Figma. To access them:

  • Select a text layer on the canvas
  • Select the text dropdown in the Properties panel
  • Select the dropdown below the search bar
  • Choose how you want to filter the fonts (I have “Google fonts — 8/24 update” chosen)
Figma canvas with the menu open and “Google fonts (8/24 update)” highlighted
More Google fonts in Figma

If it’s too many fonts for you, you can filter the fonts you see in the dropdown list, like “Installed by you” or “Used at ”.



Read more