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 sidebar on the Left 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 in our Layers Panel article.
The sidebar on the Right allows you to 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). We refer to this as the Properties Panel.
In this article, we're going to take you on a tour of the Properties Panel.
There are three heading at the top the panel. You can use these to switch between the following tabs:
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 Properties Panel.
For example: When you select a Text object, you will be able to view and adjust the Text formatting. When you select a Component, you will be able to view, detach or swap Instances in the Instance settings.
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. You can click the links below to find out more about each property:
- Alignment and Distribution 🔗
- Frame Size and Orientation 🔗
- Position on the Canvas (X and Y) 🔗
- Dimensions of the Object (Width and Height) 🔗
- Instance 🔗
- Constraints 🔗
- Layout Grid 🔗
- Layer (Blend Modes)
- Text 🔗
- Fill 🔗
- Stroke 🔗
- Effects 🔗
- Export 🔗
The Prototype Panel gives you access to all the Prototyping functionality. By opening this tab you will enter Prototyping Mode
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 four sections:
- Trigger: These settings determine what user interaction will cause the Prototype to progress.
- Action: These settings dictate how the Prototype will respond to the user's interactions.
- Overflow Behavior: Defines how user can interact with elements that extend beyond the Frame's bounds.
- Prototype Settings: Allows you to define the Device, Background color and Starting Frame.
Learn more about the Prototype tab and creating Prototypes in our Getting Started with Prototyping article.
The third option in the Properties Panel is the Code 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)
You can also toggle between a Code and List view, using the icons provided:
Learn more about translating your designs to code in our Developer Handoff article.