Explore the navigation bar and left sidebar

Figma Design files have five distinct interactive areas: a toolbar, a navigation bar, left and right panels, and a scrollable canvas. These areas allow you to access, create, and adjust elements of your design.

In this article, we’ll cover two areas of your design file: the navigation bar and navigation sidebar.

(A) The navigation bar is the left-most vertical bar in a design file and contains tabs for essential workflows for your canvas—like navigating layers and pages, inserting components, managing variables, and reviewing file notifications. The navigation bar includes the following:

• Figma menu
• Files tab
• Agents tab
• Assets tab
• Tools tab
• Variables view
• File notifications

(B) The left sidebar is the panel next to the navigation bar and contains dynamic content that changes based on the selected tab.

We’ll cover what each tab in the navigation bar is used for and provide an overview of the main workflows for each one.

Explore other areas of the Figma Design file.

Figma menu

The Figma menu at the top of the sidebar provides access to various app commands, layer actions, file creation, and file preferences like dark mode.

File tab

The File tab provides access to the file’s pages and layers. You can also rename the file, set file specific preferences, and minimize the file’s Figma UI panels and bars.

You can quickly access the File tab using the keyboard shortcut:

• Mac: ⌥ Option 1
• Windows: Alt 1

The edit file menu

The Edit file menu allows you to perform file-specific actions—such as renaming the file, viewing its version history, setting its color profile, and moving the file to a different project.

To access the Edit file menu, click next to the file name.

Pages

You can create as many pages as you need within a file and are a great way to organize designs and content in a file. Each page has its own canvas, where you can explore and iterate on your designs. You can even create separate prototypes on each page. Learn how to create and manage pages.

Find

Use Find to quickly search the entire file for text, images, frames, components, and more. You can also switch to Replace to make bulk text changes. Learn more about find and replace.

View layers

Any frames, groups, or objects you add to the canvas will be visible in the Layers section of the File tab. New layers are added to the top of the list, or to the top of the group, frame, or section it is contained within. Or, just above the layer you currently have selected.

You can determine if a layer is a frame, group or a specific type of object by the icon next to it:

• Frame
• Group
• Component
• Instance
• Text
• Shape—icon varies depending on the shape.
• Image
• Auto layout—icon varies depending on the auto layout's flow.
• Section
• Animated GIF or video
• Slot

Figma nests any child objects within their parent group or frame. This allows you to collapse and expand layers within a group or Frame.

There are many other ways to interact with layers:

• Select layers, groups, and frames
• Adjust the z-index with layer order
• Rename layers individually or in bulk
• Toggle layer visibility
• Lock and unlock layers

Minimize the UI

If you want more space to view the contents of your canvas, you can click Minimize next to the file name to collapse the navigation bar, left panel, and right panel. You can also use the keyboard shortcut ⇧ Shift /.

If you select an object while the panels are minimized, the left panel remains minimized while the right panel expands so you can update the properties of the selected object. Once all objects are deselected, the right panel minimizes again.

Agents tab

Open the Agents tab to collaborate with the Figma agent to generate and remix designs, build plugins and shaders, automate busywork, and get design feedback.

The left sidebar will contain a history of past chats that have taken place within file including chats you’ve created and chats by file collaborators if they’ve made it available to you.

Click the New chat at the top of the sidebar to initiate a new conversation. You can click More options to change the chat access that other collaborators will have to the chat.

Learn more about the Figma agent.

Assets tab

Components are UI elements that can be reused throughout your designs. This can be things like buttons or icons, or more complex assets like navigation menus or status bars.

The Assets tab provides access to local components, or components from the current file, as well as components from kits or libraries (requires edit access) that have been added to the file. You can drag any component from the assets panel onto the canvas to create an instance of the component.

You can quickly access the Assets tab by using the keyboard shortcut:

• Mac: ⌥ Option 2
• Windows: Alt 2

Once you've opened the assets view, you can:

• Open the Libraries modal
• Use the search field to find a specific component. Figma looks for components in the current file, as well as any libraries you can access.
• Open Libraries and settings to filter through available libraries, and to switch between Grid and List views
• Browse through All libraries that have been added to the file
• Explore a file, page, or frame by clicking on the arrow to expand it
• Figma lists team or organization libraries added to the file, and enabled UI kits, in the assets view
• Create an instance by dragging a component from the assets view on to the canvas

Learn how to insert components from the assets tab.

Libraries

The Libraries modal allows you to publish assets—styles, components, and variables—from your files as a library. You can also use assets from other published libraries by adding them to the current file.

To access your libraries from the assets tab, click Libraries to open the libraries modal.

Get started with libraries.

Tools tab

The Tools tab contains an assortment of plugins, widgets, shaders, and Weave tools that you can use to extend the capabilities of Figma Design and support your specific workflows.

Find specific tools from the search bar or use various filters to narrow down your search. 

Plugins

Plugins are applications that extend the functionality of Figma's products. You can automate repetitive tasks and add functionality that isn't native to the tool, like generating content, cleaning up layers, or connecting to external tools. 

Learn how to find and use plugins, or build your own. 

Widgets

Widgets are interactive objects that you can add to the canvas to customize how you and your team work together. You can add things like voting widgets, data from external applications, or new ways to play.

Learn how to find and use widgets, or build your own.

Shaders

Shaders fills and shader effects give you precise control over the visual appearance of how something is rendered on your screen, allowing you to create striking visuals like frosted glass, holographic shimmers, and realistic fire textures.

Add a shader fill to create a visual element, like a pattern or complex gradient. Apply a shader effect to modify how a layer renders, like adding a distortion on an existing image.

Learn how to use shader fills and shader effects in your designs, or build your own shaders.

Weave tools

Weave tools bring AI-powered capabilities into your design workflow, helping you generate, edit, and refine work without leaving the canvas.

Learn more about Weave tools.

Variables view

Variables in Figma Design store reusable values and tokens that can be applied to all kinds of design properties. The Variables view gives you access to creating and editing variables, modes, and collections.

Learn how to create and manage variables.

File notifications

The bottom of the navigation bar contains notifications and warnings specific to the file, if any exist. This can include things such as library updates, missing font alerts, and offline statuses.