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

Users on any team or plan can access the toolbar in Figma design files.

Users will need can edit access to use every tool in the toolbar. Users with can view access can use some functions in the toolbar.

The toolbar is your hub for interacting with—and adding objects—to the canvas. Here is an overview of the different tools in the toolbar.

Move, Hand, and Scale

When you open a design file, Figma selects the Move tool by default. Click the arrow to the right of the Move tool to access the Hand and Scale tools.

Move: Select and move objects around on the canvas
Hand: Click around a file without selecting and moving objects
Scale: Resize entire objects or layers

If you're using Figma on a device with a touch screen, the Hand tool lets you pan around a file using your fingers.

Tip: You can press and hold the space bar to temporarily activate the Hand tool.

Frame, Section, and Slice

The Frame tool is selected by default. Click the arrow to access the Section and Slice tools.

Frame: Frames are the main building blocks of Figma. A frame is a container that holds design elements such as shapes, text, and images. You can use them to organize and structure design elements on the canvas. Create a frame with your own dimensions in the canvas, or select a frame size from Figma's presets in the properties panel on the right-hand side of the screen.
Section: Sections let you organize files for easier navigation, link others to a collection of designs, or mark content as "Ready for development" to help with the developer handoff.
Slice: The Slice tool allows you to specify a region of the screen you want to export.

Shape

The Shape tool gives you a number of default shapes to use. The Rectangle tool is selected by default. Click the arrow to choose from:

Rectangle
Line
Arrow
Ellipse
Polygon
Star
Place Image

Tip: Place Image lets you select one or more images on your computer and insert them on the canvas. In Figma, an image is imported as a fill on a shape, which is why Place Image is located in the Shape tool.

Pen and Pencil

Pen: Create vector shapes and icons. You can build complex Vector Networks using vector paths, anchor points, and bezier curves.
Pencil: Add freehand drawings or annotations to your design files. Figma will apply some basic smoothing to any paths you create with the Pencil tool. Select a drawing and press the Enter / Return key to edit the drawing in Vector Edit mode.

Text

Text is one of the crucial components of interface design. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

Select the Text tool, or press the T key to add text layers to your file.

Click once in the canvas to add a text layer that grows horizontally
Click and drag to create a text layer with a fixed size

Learn more about creating text layers →

Comment

The Comment tool lets you annotate the canvas with your thoughts, ideas, and feedback. Use comments to give or respond to feedback, tweak your designs, and iterate faster—all without leaving the design file. Comments are accessible to anyone with view or edit access to the file.

Actions menu

The Actions menu is a collection of productivity tools in design files to help you stay in the flow. From here, you can access:

AI tools, like generating a design, replacing content, or creating images
A search tool for finding library assets by name or by description
Plugins and widgets
Commands for common actions in Figma, like collapsing all layers in the navigation panel, or toggling rulers on and off

Enter Dev Mode

Dev Mode is a developer-focused interface for inspecting and navigating designs. To enter Dev Mode, click the Dev Mode toggle or use the keyboard shortcut Shift D.

Before you start

Who can use this feature

Users on any team or plan can access the toolbar in Figma design files.

Users will need can edit access to use every tool in the toolbar. Users with can view access can use some functions in the toolbar.

The toolbar contains a variety of tools and functions. What appears in the toolbar depends on what you have selected on the canvas.

Access the toolbar at the top of your screen in Figma.

Figma Design Toolbar

Back to Files: Open the file Browser in the current location.
File: Perform file-level permissions, including importing and exporting.
Edit: Access undo/redo, copy/paste, and advanced selection functions.
View: Control view settings for layout grids and rulers, perform zoom functions, and navigate within a file.
Object: Apply object-level functions like grouping, framing, rotating, and more.
Text: Format text with bolds or italics, and set size, height, and spacing.
Arrange: Tidy up objects with alignment and distribution functions.
Plugins: View, manage, and run any plugins you have installed.
Integrations: View, manage, and use any applications you have connected.
Preferences: Adjust your preferences.
Libraries: Open the Library modal.

Tools

Move and Scale tools

When you open a design file, Figma will select the Move Tool V by default.

The Move tool allows you to select and reorder layers in the Layers Panel, or move objects around on the canvas.

Click the arrow to the right of the Move Tool to access the Scale tool K. This allows you to resize entire objects or layers.

Frame and Slice tools

If you've used design tools before, you'll be familiar with Artboards. Like Artboards, frames allow you to choose an area of the canvas to create your designs in.

Use the keyboard shortcuts A or F to select the frame tool. Create a frame with your own dimensions in the canvas, or select a frame size from Figma's presets in the right-hand panel.

Click the arrow next to the frame tool to access the Slice tool. The Slice tool allows you to specify a region of the screen you want to export.

Use the keyboard shortcut S to select the Slice tool.

Shape tools

In addition to drawing your own shapes using the Pen Tool, there are a number of default shapes you can use in Figma. Click the drop down menu to choose from:

Rectangle R
Line L
Arrow Shift L
Ellipse O
Polygon
Star
Place Image ⌥ Option ⌘ Command K

Pen and Pencil tools

The Pen tool P allows you create custom shapes and icons. Build complex Vector Networks using vector paths, anchor points, and bezier curves.

The Pencil tool allows you to add freehand drawings or annotations to your design files.

Figma will apply some basic smoothing to any paths you create with the Pencil tool. Press the Enter / Return key to edit the path and any anchor points in Vector Edit mode.

MacOS: ⌥ Option P

Windows: Shift P

Text tool

Text is one of the crucial components of interface design. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

Select the Text tool from the Toolbar, or press the T key to add text layers to your file.

Click once in the canvas to add a text layer that grows horizontally
Click and drag to create a text layer that is fixed in size

Learn more about creating text layers.

Hand tool

The Hand Tool allows you to click around within a file without accidentally activating hover outlines, making selections, or moving objects.

If you're using Figma on a device with a touch screen, the Hand Tool allows you to pan around a file using your fingers.

Tip! Press and hold the Space bar to activate the Hand Tool.

Comment tool

The Comment tool allows you to quickly exchange ideas with collaborators. Use comments to respond to feedback, tweak your designs and iterate faster - all from the original design file.

Comments are accessible to anyone with view or edit permissions to the file.

Resources modal

The Resources modal allows you browse components from enabled libraries and browse, try, and install plugins and widgets. You can also access the Figma Community from the Resources modal. Learn more about widgets and plugins in the Figma Community →

Contextual tools

When you have a layer or object selected, you will see the Contextual tools in the center of the toolbar. Which tools you see here will depend on your specific selection.

Edit Object

Click the Edit Object icon to enter Vector Edit mode. This allows you to add, remove, or adjust the individual anchor points within a vector path.

This option will only be available when you select a single vector path. Learn more about working with Vector Networks.

Or, click the Enter / Return key to enter Vector Edit mode.

Reset Instance

You will see this option when your selection includes a Component Instance with overrides. Click the Reset instance icon to reset any Overrides and restore the main Component.

Create Components

Components are elements that you can reuse across your designs. They help to create and manage consistent designs across projects. Click the Create component icon to create a Component out of your selection.

If you select more than one layer or frames, use the arrow next to the icon to choose how to create Components:

Create Component: Create a single Component from your selection.
Create Multiple Components: Create a Component for each layer or frame in your selection.

MacOS: Control Commmand K

Windows: Ctrl Alt K

Use as Mask

Masks let you show or hide specific portions of a layer or object. Click the Mask icon to create a mask out of the current selection.

When you create a mask, Figma will place every layer within that selection inside a Mask group. Figma will use the outline of the current layer to determine what you can see of any layers underneath.

MacOS: Control Commmand M

Windows: Ctrl Alt M

Boolean Operations and Flatten Selection

Combine shape layers using Boolean operations, or by flattening the selection:

Union Selection: Combine overlapping vector paths into a single path.
Subtract Selection: Remove any overlapping paths from the base layer.
Intersect Selection: Create a single path from any overlapping paths.
Exclude Selection: Create a single path from the part of the layers that don't overlap.
Flatten selection: Create a single layer from the selection.

MacOS: Commmand E

Windows: Ctrl E

Note: This option is only available when you have more than one layer selected.

When you have no layers selected, Figma will show the project and the file name in the middle of the toolbar. This lets you access the following file-level actions:

Publish Styles & Components: Open the Library modal
Show Version History: Open Version History in the right-hand panel
Export: Open the Export List
Duplicate: Make a copy of the file in it's current location
Rename: Give the file another name
Delete: Delete the file for you any collaborators
Move to Project: Change the file's location

Share and view settings

Multiplayer and observation mode

See who else is active on the file. This includes anyone who is currently viewing or editing the file.

Click on a users' avatar to enter observation mode and view their actions in real-time. This is great for presentations and design critiques.

Click the Share button to open the share modal. This lets you manage who has access to your file. From the share modal you can:

Present and preview

Play and interact with any prototypes you've created:

Preview: Play the prototype directly in the file, with an inline preview. Use Preview to see how the prototype works as you build it—all in the same tab.
Present: Play the prototype in presentation view, in a separate tab. Use Present to share the prototype with others or see how it looks on a specific device.

presentation

Learn more about playing prototypes →

View Settings

Adjust your view settings on your file, including:

Zoom Settings
Pixel Preview
Pixel Grid
Layout Grids
Multiplayer Cursors

When you update these settings, they will only apply to your view of the current file.

···

Access design tools from the toolbar