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.
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 Frame of your Prototype.
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.