What is Toolbar in Figma: Definition and Usage

In Figma, the toolbar is the horizontal panel at the top of the interface that contains tools and options for designing and editing. It provides quick access to selection tools, shape tools, text tools, and other essential functions to create and modify designs.

How It Works

The toolbar in Figma acts like a toolbox you keep on your desk when working on a project. It holds all the main tools you need to create and edit your designs, such as the move tool, shape tools, pen tool, and text tool. When you select a tool from the toolbar, you can use it directly on your canvas to draw shapes, add text, or move objects.

Think of it like the controls on a camera: each button or dial changes how you capture your photo. Similarly, each icon on the Figma toolbar changes how you interact with your design. The toolbar also updates dynamically to show options related to the selected tool or object, making it easy to adjust properties like color, stroke, or alignment without searching through menus.

Example

This example shows how to create a rectangle shape on the canvas using Figma's plugin API.

typescript

figma.currentPage.selection = [];
const rect = figma.createRectangle();
rect.resize(100, 50);
rect.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.6, b: 0.86 } }];
figma.currentPage.appendChild(rect);
figma.currentPage.selection = [rect];
figma.viewport.scrollAndZoomIntoView([rect]);

Output

A blue rectangle of 100x50 pixels appears on the canvas and is selected.

When to Use

Use the toolbar in Figma whenever you need to create or edit design elements quickly. It is essential for tasks like drawing shapes, adding text, selecting objects, and applying effects. For example, when designing a website layout, you use the toolbar to add buttons, images, and text blocks efficiently.

The toolbar is also helpful when you want to switch tools without interrupting your workflow, such as toggling between the move tool and the pen tool to adjust vector paths. It keeps your most-used tools within easy reach, speeding up your design process.

Key Points

• The toolbar is the main control panel for design tools in Figma.
• It updates based on the selected tool or object to show relevant options.
• It helps speed up design work by keeping tools accessible.
• Common tools include selection, shapes, text, pen, and hand tools.

Key Takeaways

The toolbar in Figma provides quick access to essential design tools and options.

It changes dynamically to show controls relevant to the selected tool or object.

Use the toolbar to efficiently create, select, and edit design elements.

The toolbar helps keep your workflow smooth by keeping tools always visible.