At Config 2024, we introduced a redesigned Figma, called UI3. This guide was created to help you switch over to the new designs and see how things have changed.
Why we redesigned Figma
Figma has grown more complex over time, and UI3 is an effort to simplify your design experience. Our intent is to make Figma Design feel more focused for designers and more approachable for a broad range of people. We’re also creating a consistent foundation for our existing products—and products yet to come.
This new design:
- Gives you more control over the interface, with resizable and collapsible panels
- Draws more emphasis to your work on the canvas
- Makes features more intuitive by improving their placement, grouping, and how they adapt to different contexts
- Adds consistency with our other products, making it easier to switch between Figma Design, FigJam, Dev Mode, and Figma Slides
What's changed
Navigation panel
We’ve reorganized the navigation panel on the left side of the canvas to house all the information about your file and make it easier to use.
Minimize the UI
If you need a bit more room on the canvas, you can now minimize the UI from the navigation panel. Click Minimize UI to collapse both the navigation panel and properties panel.
If you select something on the canvas with the UI minimized, the properties panel temporarily opens back up so you can access each property’s controls.
Toolbar
The new toolbar moves design tools to the bottom of the editor. This frees up more working space on the canvas and introduces brand new AI capabilities via the new actions menu.
Actions
Actions is a brand new item in the toolbar, and is all about helping you go from imagination to reality, faster. From here, you can access all Figma’s AI tools, common productivity actions, plugins and widgets, components, and more.
Enter Dev Mode
You can now access Dev Mode in the toolbar, making it easier to switch between modes in Figma Design.
Properties panel
The Design view of the properties panel is easier to use and properties are now grouped to match more modern workflows.
You can also resize the properties panel, which is handy for working with components with long names.
Property labels
New to UI3, you can now turn on Property labels to make it clearer what each property does.
To turn on property labels, click the dropdown menu next to the 100% zoom percentage in the properties panel and select Property labels.
Selection actions
The properties panel now features a header row with actions you can perform on a selected object.
For example, you might find the buttons to apply a mask, create a component, or perform a boolean operation—or they might be tucked away in the More menu.
Layout
Layout contains all the properties related to an object’s layout, like width and height.
When you click Use auto layout on a frame, the Layout label changes to Auto layout, and all the auto layout properties become available.
Position
You can now access all properties related to an object’s position on the canvas, including constraints, under Position.
Tip: You can now spotlight yourself from the properties panel. When people enter spotlight, we’ll minimize the left and right panels, and the toolbar, so you have more room to show off your work.
Where did a feature move to?
Take a look at the list below to see everything that’s moved—and where you can find it.
| Old design | Redesign | |
Ask for edit accessIf you have |
||
Absolute positionAbsolute position is now Ignore auto layout. When you ignore auto layout, you can manually position an object inside an auto layout frame without following the auto layout structure. To ignore auto layout, select a child of an auto layout frame, then click in the properties panel. |
||
Align objectsThe alignment controls help you align an object to its parent layer, or align multiple objects to one another. Select more than one object, then click one of the alignment tools under Position in the properties panel. |
||
Auto layoutWhen you use auto layout on a frame, it will adjust dynamically to content changes and different screen sizes. To use auto layout on a frame, click in the Layout section of the properties panel. |
||
Blend modesBlend modes define how you want two layers to blend together. To apply a blend mode, select an object, click next to Appearance, then select a mode. |
||
Clip contentClip content allows you to hide parts of a layer that extend beyond the bounds of the parent frame. Use the Clip content checkbox under Layout to choose whether to clip or show content. |
||
Component propertiesComponent properties are the changeable aspects of a component. You can define which parts of a component others can change by tying them to specific properties. If a component has component properties available, you can find them underneath the name of the frame in the properties panel. |
||
ConstraintsConstraints tell Figma how layers should behave when you resize their parent frames. With a child layer selected, the Constraints icon will appear next to the X and Y position values in the Position section of the properties panel. |
||
Corner radiusCorner radius is a property that allows you to round the corners of an object. With an object selected, click the corner radius field under Appearance and change the value. You can also click to modify each corner individually. |
||
File name, project name, and file actionsThe name of a file, its project, and the file actions dropdown have moved to the navigation panel. |
||
Go to main componentYou can navigate to the main component of an instance directly from the properties panel. |
||
MaskUse a mask to show specific areas of an object while concealing the rest. With an object selected, click Use as mask to create a mask group with the object as a mask. Depending on the number of available actions, Use as mask might be in the More menu. |
||
Multi-editMulti-edit lets you select multiple layers across frames, groups, and sections and apply the same edits to them in bulk. Click in the properties panel to enable multi-edit. |
||
Plugins and widgetsTo access plugins and widgets, open Actions from the toolbar, then click the Plugins & widgets tab. |
||
Resize an object's width or height, or resize to fitChange an object’s width and height under Layout. You can also resize a frame to fit its child layers by clicking the icon. |
||
RotateRotating or flipping let you manipulate objects by changing their orientation. With an object selected, find Position and:
|
||
Show or hide an objectTo hide an object on the canvas, click next to Appearance. To show it again, click . |
||
TextText is now called Typography.
|
||
Variable modesVariable modes represent the different contexts of a design. A mode contains a list of values for a variable within a collection. If a variable collection has multiple modes, then you can switch modes on layers and elements to quickly change designs for different contexts. As long as an object is bound to a variable with multiple modes, you can click next to Appearance to switch the variable mode. |
||
Add variantVariants allow you to group and organize similar components into a single container. When you insert a component instance, you can switch between the variant properties of the component set. To add a variant, select a main component, then click Add a variant next to the component name in the properties panel. |
||
Edit a vector pathTo edit a vector path, click Edit object next to Vector. If you select multiple vector paths, the boolean operations menu will appear. From here, you can perform the following operations:
|
||
Zoom / view optionsFrom the Zoom / view options menu, you can adjust your zoom settings, or configure view options like layout grids or multiplayer cursors. |