'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Design, prototype, and explore layer properties in the right sidebar
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Before you start
Who can use this feature
Available on all plans
Requires can edit access to a file to adjust layers and prototype from the properties panel
Requires can view access to a file to comment, explore file and layer properties, and export layers from the properties panel
In Figma Design, a file has three main interface elements that are detached from the canvas:
- The navigation panel on the left side of the screen
- The toolbar at the bottom of the screen
- The properties panel on the right side of the screen
In this article, we're going to explore the properties panel.
How the properties panel changes based on your access to a file
The properties panel has different capabilities depending on your level of access to a file, and your seat type.
- Edit access: Edit the design properties of layers, and add prototype flows and interactions
- View-only access: View and search comments, inspect layer properties and code output, and export
Use the properties panel with edit access
There are two tabs available in the properties panel when you have edit access to a file: Design and Prototype.
Tip: You can add labels to the properties panel to make it clearer what each property does. To turn on labels, click the dropdown menu next to the 100% zoom percentage in the properties panel and select Property labels.
Design
The Design tab lets you view, add, remove or change the properties of objects within your design.
If nothing is selected on the canvas, you'll be able to do the following from the Design tab:
- Access styles and variables that are local to the file
- Update the background color of the canvas
- Export the entire page
When you select a layer, you can access many different property controls for editing the layer. For example:
- Alignment, rotation, and position
- Frame size and orientation
- Corner radius
- Constraints
- Layout grids
- Component properties
- Instance
- Auto layout
- Blend Modes
- Text
- Fill
- Stroke
- Effects
- Export settings
Prototype
Use the Prototype tab to start building prototypes. Select any object to begin, then:
- Add a flow starting point: A flow is a path users take through the network of connected frames that make up your prototype. Add a starting point to choose the first frame of the journey.
- Add an interaction: Open up the Interaction Details modal, where you can define the trigger, action, and any animations for the interaction.
- Define scroll behavior: Select how the prototype responds to scrolling.
- Show prototype settings: Allows you to adjust the device and background of your prototype.
Tip: You can also add interactions directly on the canvas by selecting the Prototype tab, then clicking and dragging connections between objects.
Learn more about prototyping in Figma →
Use the properties panel with view-only access
People with can view access to a file, or have a viewer or viewer-restricted seat on a paid plan, have two tabs in the properties panel: Comment and Properties.
View-only access is great for people who don't need to edit designs or for developers who need to access designs, but don't need the full suite of Dev Mode features. People with this access to a file can collaborate on designs, view design properties, copy basic code, and export assets.
Comment
Select Comment in the right sidebar to add new comments or view existing ones. You can use comments to add or respond to feedback, collaborate, and iterate faster—all from the original design file.
From the Comment tab, you can see all the existing comments in a file. Or, find a particular comment or set of comments within a file:
- Type a keyword in the Search field to find a particular comment.
- Use the Filter to view comments by when they were posted or see only the ones you haven’t read yet. Here, you can filter to only view a certain set of comments.
Learn more about adding comments to a Figma design file or viewing and manage comments.
Properties
The Properties tab of the right sidebar lets you inspect particular layers on the canvas, as well as export designs.
To begin, select a layer on the canvas. You can do this by either selecting the element on the canvas itself or by selecting it from the Layers panel on the left sidebar. You can select any type of layer, such as a shape, text, group, or frame.
Under Properties, you’ll see the name of the selected layer and details about it, such as its layout and colors.
Right-click the layer on the canvas to:
- Copy the layer
- Copy/paste as code (CSS, iOS, or Android), SVG, PNG, copy the link, or copy its properties
- Select a different layer within the layer you selected
Looking to measure distances between objects? You can use keyboard shortcuts to quickly access spacing and padding information. Learn how to add measurement guidelines →
At the bottom of the Properties tab, you can add an export configuration to export designs in a variety of file formats and sizes. Exporting helps you share content with others, move content between tools, and save copies of your designs outside Figma. Learn how to export content from Figma →
Before you start
Who can use this feature
Users on any team or plan.
Users with can edit access to a file can adjust layers and prototype from the right sidebar
Users with can view access to a file can comment, explore file and layer properties, and export layers from the right sidebar
When you're in Figma design, 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 right sidebar allows you to view or adjust design properties and prototype settings of your design.
In this article, we're going to take you on a tour of the right sidebar.
What you have access to in the right sidebar depends on your permissions in the file and your seat type:
View only access
- View and search comments
- Inspect layer properties and view code output
- Apply export settings
Edit access
- Add and edit the design properties of layers
- Add prototype interactions, flows, and settings
Use the right sidebar with edit access
Design
The Design tab allows you to view, add, remove or change the properties of objects within your design.
If nothing is selected on the canvas, you'll be able to do the following from the Design tab:
- Access styles and variables that are local to the file
- Update the background color of the canvas
- Export the entire page
If you select a layer, you'll be able to access many different settings to edit the layer. The settings available will depend on the selected layer.
- Alignment and Distribution
- Frame Size and orientation
- Position (X and Y)
- Dimensions and rotations (width and height)
- Corner radius
- Constraints
- Layout grid
- Component properties
- Instance
- Auto layout
- Layer (Blend Modes)
- Text
- Fill
- Stroke
- Effects
- Export settings
Prototype
Use the Prototype tab to start building prototypes.
Select any object to begin. Then, from the Prototype tab:
- Add a flow starting point
A flow is a path users take through the network of connected frames that make up your prototype. Add a starting point to choose the first frame of the journey. - Add an interaction
Open up the Interaction Details modal, where you can define the trigger, action, and any animations for the interaction. - Define scroll behavior
Select how the prototype responds to scrolling. - Show prototype settings
Allows you to adjust the device and background of your prototype.
Tip: You can also add interactions directly on the canvas by selecting the Prototype tab, then clicking and dragging connections between objects.
Learn more about prototyping in Figma →
Enter Dev Mode
Dev Mode is a space in Figma created just for developers. Dev Mode shows design specs and relevant information needed to understand a design and transform it into code.
Use Dev Mode to:
- View and copy properties, values, and code from design components
- See what’s changed since you last viewed a file by comparing frame versions
- Inspect and navigate design files with simple interactions that surface important layer information
- Quickly find designs ready for development with section statuses
- Streamline your workflow with developer-focused integrations, like Jira, Storybook, and GitHub
- Add relevant links and developer resources to components
Dev Mode is accessed from a toggle on the toolbar. After entering Dev Mode, the interface—including the right sidebar—will show developer-focused features.
Use the right sidebar with view-only access
Viewer and viewer-restricted users can collaborate on designs, view design properties, copy basic code, and export assets.
Viewer access is great for people who don't need to edit designs or for developers who need to access designs, but don't need the full suite of Dev Mode features.
Comment
Select Comment in the right sidebar to add new comments or view existing ones. You can use comments to add or respond to feedback, collaborate, and iterate faster—all from the original design file.
From the Comment tab, you can see all the existing comments in a file. Or, find a particular comment or set of comments within a file:
- Type a keyword in the Search field to find a particular comment.
- Use the Filter to view comments by when they were posted or see only the ones you haven’t read yet. Here, you can filter to only view a certain set of comments.
Click the Settings to hide icons or manage your comment notifications in a file.
Learn how to add comments to a Figma design file → or how to view and manage comments →
Properties
The Properties tab of the right sidebar lets you inspect particular layers on the canvas.
To begin, select a layer on the canvas. You can do this by either selecting the element on the canvas itself or by selecting it from the Layers panel on the left sidebar. You can select any type of layer, such as a shape, text, group, or frame.
Under Properties, you’ll see the name of the selected layer and details about it, such as its layout and colors.
Right-click the layer on the canvas to:
- Copy the layer
- Copy/paste as code (CSS, iOS, or Android), SVG, PNG, copy the link, or copy its properties
- Select a different layer within the layer you selected
Export
With view-only access, you can export designs from Figma in a variety of file formats and scales. Exporting helps you share content with others, move content between tools, and save copies of your designs outside Figma.