Before you start
Who can use this feature
Users on any team or plan.
Users with can edit access to a file can access all of the Properties Panel
Users with View access to a File can only access the Code section
When you're in the editor, you will see a sidebar on each side of the canvas. Along with the Toolbar, these sidebars make up the Figma UI.
The Figma UI allows you to access, create and adjust elements of your design.
- The left sidebar gives you access to the Layers, Assets, and pages included in your file. We call this the Layers panel. Learn more about navigating the Layers panel.
- The Design tab of the right sidebar lets you view and adjust the properties of any object. You can also access the file's prototype settings and view the code of any selected object(s) in the Inspect panel.
In this article, we're going to take you on a tour of the right sidebar. There are three tabs at the top the panel.
The Design tab allows you to view, add, remove or change the properties of objects within your design.
When you have nothing selected in the Design panel, you will be able to view any Styles that are local to the file. You'll also be able to update the background color of the canvas.
Once you select a layer, the Design tab will consist of many different settings. The type of layer you've selected will determine what settings are available in the Design tab.
For example, select a text object to view and adjust the text formatting. When you select a component, you can view, detach, or swap instances in the Instance menu.
Any properties that are currently active will show up in black. Inactive properties that aren't applied to the selected layer will show as greyed out.
The following properties are available in the Design tab:
- Alignment and Distribution
- Frame Size and Orientation
- Position on the Canvas (X and Y)
- Dimensions of the Object (Width and Height)
- Layout Grid
- Layer (Blend Modes)
- Export Settings
The Prototype tab gives you access to all the prototyping functionality.
This allows you to establish connections between frames in your design. You can then apply transitions that simulate how a user might interact with them.
The Prototype tab consists of five sections:
- Choose an Interaction
Allows you to define the Trigger, Action and Destination for any Interactions.
- Apply an Animation
Allows you to define the Transition that moves the users between Frames. You can also adjust the Direction, Easing, Duration and Smart Animation.
- Customize an Overlay
Allows you to create tool-tips, interactive menus, alerts or confirmations.
- Define the Overflow Behavior
Allows you to define how your prototype responds to scrolling. This allows you to create more advanced user interactions e.g. carousels, galleries or interactive maps.
- Adjust the Prototype Settings
Allows you to adjust the Device, Background, and Starting point of your prototype.
Tip! For an even more efficient workflow, you can quickly toggle between the Design and Prototype tabs using the keyboard shortcut Shift E.
The third option in the right sidebar is the Inspect tab. This allows you to see how to express elements of your design in code.
You can choose from the following formats:
- CSS (Web Development)
- iOS (Swift)
- Android (XML)
You can also toggle between a Code and List view, using the icons provided: