What's Changed in the Figma UI
The Figma team have been working on refreshing the Figma UI. These changes were focused on how the UI looked, as opposed to any structural changes.
We've put together this article, which details all the changes we made.
Did you spot all of these already?
You can check out a detailed explanation of the refresh process on the Figma blog: We refreshed Figma's UI: An inside look at our process
Look and Feel
Figma has changed a lot since in was launched in 2017. Over the years, we've added a bunch of new features to Figma, each of which introduced new settings and controls.
Things were starting to feel cramped in the sidebars, making it difficult to navigate.
It was time to create more space and bring all of the elements of the Figma UI, in line.
- We changed the Font we use in app from Roboto to Inter UI - a font designed by our very own Rasmus Andersson.
- We updated the blue we use across the app. We had feedback that the blue we used was too light and impacted the legibility of some elements and settings. To improve contrast and readability, we now use a blue that's a number of shades darker.
To create more space in the Toolbar, we combined the View Settings menu with the Zoom controls.
You can now access these settings by clicking on the Zoom percentage in the top-right corner of the Figma app:
From here, you can adjust the following settings:
- Zoom in
- Zoom out
- Zoom to Fit
- [Zoom to] 50%
- [Zoom to] 100%
- [Zoom to] 200%
- Pixel Preview
- Pixel Grid
- Snap to Pixel Grid
- Layout Grids
- Multiplayer Cursors
We refer to the sidebar on the left as the Layers Panel. You can use this to access your Layers, Pages, Components and Team Libraries.
There are now three headings at the top of the Layers Panel. You can use these to:
- Open the Layers List
- View your Components in the Assets Panel (and access the Team Library)
- Switch between Pages
We also made a bunch of improvements to how the Layers Panel is arranged, to make navigating your Layer list smoother:
- You can expand or collapse the Pages list by clicking on the Page name at the top of the Layers Panel.
- Top-level Frames (Frames added directly to the canvas) are now bolded in the Layer list.
- The Background color of top-level Frames in the Layers Panel is white, instead of grey.
- Selected layers are highlighted in a light blue, with black text. This provides much more contrast the the blue and white of the old UI.
- The Frame Icon has been refreshed to make it easier to distinguish between Frames and Groups.
The Components page is now called the Assets Panel. You can use this to access Component from the current File, or in other Files and Libraries you have access to.
Your Pages can now be accessed via the header at the top of the panel. This will open the Pages list in the Layers Panel.
- Previously, the header showed the total page count and which Page was selected e.g. 1 of 4 or 3 of 4. The Page name will be shown in bold in the header.
- You can expand or collapse the Page list using the arrow in the header.
- The current page used to be highlighted in the Page list in a bright blue. This now has a check mark to indicate the selected page.
The Team Library has had a couple of different home overs the years. Don't worry, the Keyboard Shortcut remains the same:
You can click on the Team Library icon to:
- Toggle Libraries OFF or ON for this File
- View Styles and Components from other Libraries
- Drag Components from other Files and Libraries into your File
- Publish changes to your Team Library
This is where you will see the most change to the Figma UI. The goal here was to reduce clutter, create space and make sections easily scannable.
- Headings are now displayed in "Sentence case" and in bold. Previously, these were shown all in UPPERCASE.
- We no longer have distinct rectangles to indicate the tabs in the Properties Panel. Now we show the currently selected tab in bold, while the others are greyed out.
- To create more space, we've removed the stroke outline around each field.
- Like the Layers Panel, selected settings no longer have a blue background. Instead, the current setting is outlined in blue.
- Icons are slightly smaller to take up less space.
- The Visibility icon has been changed to represent a closed eye: <Image: Closed eye>
- Properties and settings that aren't currently active will now be greyed out. You can still add them to a selection by clicking the [+] icon next to the setting.
We also made some changes to how Comments look.
- When you enter Comment mode you no longer get an orange comment icon. Instead, you see a white comment icon:
- When you click on a spot to add a comment, the comment icon will now grow in size and be displayed in blue. The link to "Post" is now in the top-right corner, not the bottom-right corner:
- Comments are now threaded directly beneath each other, versus displayed as individual posts.
- You can now Resolve a comment by clicking on the checkbox in the top-right corner: