Who can use this feature

Available in beta on all plans
If you’re new to Figma, we recommend our guide to exploring design files.

At Config 2024, we introduced a redesigned Figma, called UI3. This guide is for people who are switching over from Figma’s previous design and want to 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

Tip: Want to read more about the redesign? Check out our blog post: Inside the redesigned Figma, where your work takes center stage

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.

File name and location

Click the dropdown icon next to the file name to take action on a file, like moving it, publishing a library, creating a branch, or showing the version history.

Assets tab

We’ve made it easier to search, browse, and insert components from the Assets tab.

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.

Note: The AI features in Figma Design are rolling out over the coming months. Learn more →

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 access If you have `can view` access to a file and would like to edit it, you can request edit access by clicking Ask to edit in the toolbar.
Absolute position Absolute 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 objects The 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 layout When 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 modes Blend 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 content Clip 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 properties Component 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.
Constraints Constraints 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 radius Corner 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 actions The name of a file, its project, and the file actions dropdown have moved to the navigation panel.
Go to main component You can navigate to the main component of an instance directly from the properties panel.
Mask Use 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-edit Multi-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 widgets To 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 fit Change an object’s width and height under Layout. You can also resize a frame to fit its child layers by clicking the icon.
Rotate Rotating or flipping let you manipulate objects by changing their orientation. With an object selected, find Position and: Click to rotate an object 90° to the right Click to flip horizontally Click to flip vertically
Show or hide an object To hide an object on the canvas, click next to Appearance. To show it again, click .
Text Text is now called Typography. You can now resize a text layer under Layout. Paragraph spacing has moved to Type settings. From Typography, click to open the Type settings panel.
Variable modes Variable 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 variant Variants 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 path To 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: Union Subtract Intersect Exclude
Zoom / view options From the Zoom / view options menu, you can adjust your zoom settings, or configure view options like layout grids or multiplayer cursors.