Design, prototype, and explore layer properties in 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 as a viewer or an editor:

Use the right sidebar as an editor

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:

1. 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.
2. Add an interaction
   Open up the Interaction Details modal, where you can define the trigger, action, and any animations for the interaction.
3. Define scroll behavior
   Select how the prototype responds to scrolling.
4. Show prototype settings
   Allows you to adjust the device and background of your prototype.

Learn more about prototyping in Figma →

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.

Learn how to use Dev Mode ->

Use the right sidebar as a viewer

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 viewers 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

As a viewer, 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.

Learn how to export content from Figma →