The Figma Toolbar is the main control area used to interact with the canvas, create design objects, navigate around a file, add text and shapes, collaborate with other users, access plugins and widgets, and perform other design-related actions. It acts as a central hub for many of the tools required during UI/UX design.
Most toolbar tools require edit access to the Figma file, although some collaboration and viewing features have different access requirements.
For professional Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
Figma Toolbar is the collection of design, navigation, creation, collaboration, productivity, and development tools available in the Figma editor. It provides quick access to frequently used functions without requiring users to navigate through multiple menus.
The toolbar is especially important because most UI/UX design activities begin with selecting an appropriate toolbar tool and then interacting with the canvas.
Figma Editor
|
+-- Toolbar
| |
| +-- Move Tools
| +-- Region Tools
| +-- Shape Tools
| +-- Creation Tools
| +-- Text
| +-- Comment Tools
| +-- Actions
| +-- Dev Mode
| +-- Figma Draw
|
+-- Canvas
+-- Layers Panel
+-- Properties Panel
The toolbar provides quick access to the tools needed to create and manage interface designs. Instead of using separate applications for basic shapes, text, vector paths, annotations, comments, and design inspection, designers can perform many tasks directly inside Figma.
| Category | Main Tools | Purpose |
|---|---|---|
| Move Tools | Move, Hand, Scale | Select, navigate and resize objects |
| Region Tools | Frame, Section, Slice | Create containers and organize/export regions |
| Shape Tools | Rectangle, Line, Arrow, Ellipse, Polygon, Star | Create basic visual elements |
| Creation Tools | Pen, Pencil | Create vector paths and freehand drawings |
| Text | Text Tool | Create typography and content |
| Comment Tools | Comment, Annotation, Measurement | Collaboration and developer handoff |
| Actions | AI, Assets, Plugins, Widgets, Commands | Productivity and advanced workflows |
| Dev Mode | Dev Mode | Design inspection and developer handoff |
| Figma Draw | Draw tools | Visual and illustration-oriented workflows |
The Move tools provide the basic navigation and object manipulation capabilities of the Figma canvas. The Move tool is enabled by default when opening a Figma Design file.
The Move tools menu provides access to:
The Move tool is used to select, move, and interact with objects on the canvas. It is one of the most frequently used tools in Figma.
The Move tool is generally the default tool when entering a design file.
The Hand tool allows designers to move around the canvas without selecting or moving design objects.
You can temporarily activate the Hand tool by pressing and holding the Spacebar while working on the canvas.
Hold Spacebar
↓
Hand Tool Temporarily Active
↓
Drag Canvas
↓
Navigate Design
The Scale tool is used to resize entire objects or layers proportionally while scaling their contents.
Region tools are used to define and organize areas of the canvas. They include Frame, Section, and Slice.
Region Tools
|
+-- Frame
+-- Section
+-- Slice
The Frame tool is one of the most important tools in Figma. Frames act as containers for design elements such as text, shapes, images, components, and nested frames.
Frames can be used to create complete website screens, mobile screens, cards, buttons, navigation areas, dashboards, and other UI structures.
Frame shortcuts include F and A.
There are multiple ways to create a frame:
Select Frame Tool
↓
Choose Preset or Custom Size
↓
Create Frame
↓
Add Text / Shapes / Images
↓
Apply Layout
↓
Create UI Screen
Figma provides presets for common device and design sizes. Presets help designers quickly create appropriate frames for different types of projects.
The Section tool is used to organize related designs or ideas into labeled areas on the canvas. Sections can make large design files easier to navigate.
Section shortcut: Shift + S.
Large Canvas
|
+-- Section: Research
+-- Section: Wireframes
+-- Section: UI Design
+-- Section: Components
+-- Section: Prototype
+-- Section: Ready for Development
The Slice tool allows designers to define a specific region of the canvas for export.
The Shape tools menu provides commonly used geometric and visual elements.
Common shape options include:
The Rectangle tool is one of the most frequently used shape tools in UI design. It can be used to create cards, buttons, containers, backgrounds, input fields, navigation areas, and other interface elements.
The Line tool creates straight lines that can be used for separators, borders, diagrams, layout structures, and visual guides.
The Arrow tool creates directional lines and arrows. It is useful for flowcharts, user journeys, diagrams, wireframes, and process documentation.
Login Screen
↓
Home Screen
↓
Product Screen
↓
Checkout Screen
The Ellipse tool creates circular and oval shapes. It is commonly used for avatars, icons, buttons, profile images, decorative elements, and charts.
Ellipse
↓
Circular Avatar
↓
Add Image Fill
↓
Profile Picture
The Polygon tool creates multi-sided shapes. It can be useful for icons, illustrations, diagrams, badges, and custom interface graphics.
The Star tool creates star-shaped objects. It is useful for ratings, decorative graphics, badges, illustrations, and visual indicators.
Star Shape
↓
Rating Component
↓
★★★★★
↓
Product Rating UI
The Shape tools menu also provides the ability to place images and videos. Images are commonly used for product photography, profile pictures, banners, backgrounds, and visual content.
Creation tools are used to create custom vector paths and freehand drawings. The primary creation tools are Pen and Pencil.
Creation Tools
|
+-- Pen
|
+-- Pencil
The Pen tool is used to create vector paths using anchor points and curves. It is useful when designers need custom shapes that cannot easily be created using standard geometric tools.
Anchor Point
↓
Path
↓
Curve
↓
Vector Shape
↓
Custom Illustration
The Pencil tool is used for freehand drawing. Figma applies basic smoothing to paths created using the Pencil tool.
The Text tool is used to create text layers. Typography is a fundamental part of UI/UX design because interfaces depend heavily on readable and well-structured text.
Text tool shortcut: T.
Select Text Tool
↓
Click or Drag
↓
Enter Text
↓
Set Font
↓
Set Size
↓
Set Weight
↓
Set Line Height
↓
Set Letter Spacing
Text is used for headings, labels, navigation, buttons, descriptions, form fields, error messages, notifications, and other interface content.
| Text Type | Example |
|---|---|
| Heading | Welcome Back |
| Body | Enter your details to continue. |
| Button | Login |
| Label | Email Address |
| Navigation | Home, Products, About |
| Error | Invalid email address |
Comment tools support collaboration and design feedback. They allow designers, developers, product managers, clients, and other collaborators to communicate directly inside the design file.
Comment tools can include Comment, Annotation, and Measurement depending on the user's plan and permissions.
The Comment tool allows collaborators to place comments on the canvas or on specific frames and layers.
Comment shortcut: C.
Designer
↓
Creates UI
↓
Reviewer Adds Comment
↓
Designer Reviews Feedback
↓
Design Updated
↓
Reviewer Confirms
The Annotation tool allows designers to add contextual information directly to designs. Annotations are especially useful during developer handoff because they can communicate important properties, behaviors, specifications, and additional context.
Annotation availability depends on the user's seat and permissions.
The Measurement tool helps designers visualize spacing and sizing between design elements. Measurements are useful when communicating dimensions and layout details during development handoff.
Measurement shortcut: Shift + M.
Button
|
| 16 px
↓
Input Field
|
| 24 px
↓
Section
The saved Measurement tool is different from temporarily measuring distances using modifier keys such as Alt on Windows or Option on Mac.
The Actions menu contains productivity features that help designers perform tasks without leaving their workflow.
Depending on the current Figma environment, the Actions menu can provide access to:
Figma provides AI-powered actions in supported environments. These tools can help with tasks such as generating designs, replacing content, creating images, and other productivity-oriented activities.
Availability and capabilities can vary depending on the current Figma plan, permissions, and product features.
Open Actions
↓
Choose AI Feature
↓
Provide Instruction
↓
Generate / Modify Content
↓
Review Result
↓
Edit Manually
↓
Finalize Design
Plugins extend Figma's capabilities by adding specialized functionality. Plugins can assist with accessibility, content generation, icons, design systems, documentation, development workflows, and many other tasks.
Widgets add interactive functionality to Figma files and collaborative workflows. They can be used for activities such as planning, brainstorming, documentation, and team collaboration.
Dev Mode is a developer-focused interface for inspecting and navigating designs and supporting the transition from design to code.
Dev Mode shortcut: Shift + D.
Designer
↓
Final UI Design
↓
Mark Ready for Development
↓
Developer Opens Dev Mode
↓
Inspect Design
↓
Review Measurements
↓
Check Annotations
↓
Generate / Inspect Code
↓
Development
Figma Draw provides visual design and drawing capabilities within the Figma Design editor. It can be accessed from the toolbar and is useful for more illustration-oriented and expressive design workflows.
The toolbar and canvas work together. The toolbar determines which operation the designer performs, while the canvas is the main working area where objects are created, selected, moved, edited, and arranged.
Toolbar
↓
Select Tool
↓
Interact with Canvas
↓
Create / Select / Edit Object
↓
Properties Panel
↓
Finalize Design
The Layers panel displays the hierarchical structure of the design. Toolbar tools create or manipulate objects, while the Layers panel helps users identify and organize those objects.
Toolbar
↓
Create Frame
↓
Layers Panel
↓
Frame
├── Text
├── Rectangle
├── Image
└── Button
The toolbar is mainly used to select or create objects, while the Properties panel provides detailed settings for the selected object.
| Toolbar | Properties Panel |
|---|---|
| Creates objects | Edits object properties |
| Selects tools | Controls dimensions |
| Creates frames | Controls layout |
| Creates shapes | Controls fill and stroke |
| Adds text | Controls typography |
The toolbar helps create the design structure, while Assets provide access to reusable components and libraries. A designer can create a frame and then insert components from available assets.
Create Frame
↓
Open Assets
↓
Find Component
↓
Insert Instance
↓
Customize Properties
↓
Build UI
Frames created with the toolbar can later be configured with Auto Layout. Auto Layout helps designs respond to changes in content, spacing, direction, and size.
Frame
↓
Add Text
↓
Add Icon
↓
Apply Auto Layout
↓
Set Gap
↓
Set Padding
↓
Create Responsive Button
Designers can use toolbar tools to create the basic structure of components such as buttons, cards, inputs, navigation bars, and dialogs. These structures can then be converted into reusable components.
Rectangle
+
Text
+
Icon
↓
Button Design
↓
Component
↓
Reusable Instances
Responsive design starts with selecting suitable frames and creating a logical hierarchy of content. Frames, Auto Layout, constraints, and components can then be used to create adaptable interfaces.
Frame
↓
Layout Structure
↓
Auto Layout
↓
Constraints
↓
Responsive Components
↓
Desktop + Tablet + Mobile
When designing a website, toolbar tools can be used to create desktop and mobile frames, navigation elements, cards, buttons, images, text, icons, and other interface components.
Frame
↓
Header
↓
Navigation
↓
Hero Section
↓
Content Cards
↓
CTA
↓
Footer
↓
Prototype
For mobile applications, designers typically start by creating phone frames and then use shapes, text, images, components, and icons to construct the interface.
Phone Frame
↓
App Bar
↓
Content
↓
Cards
↓
Buttons
↓
Bottom Navigation
↓
Prototype
Dashboard designs frequently use frames, rectangles, text, lines, charts, icons, and components.
Dashboard Frame
|
+-- Sidebar
+-- Header
+-- Statistics Cards
+-- Charts
+-- Tables
+-- Notifications
The toolbar is useful for quickly creating low-fidelity wireframes using frames, rectangles, lines, text, and arrows.
Frame
↓
Rectangle
↓
Text
↓
Line
↓
Arrow
↓
Wireframe Flow
After creating screens with toolbar tools, designers can connect frames using Figma's prototyping features. The toolbar therefore forms an important part of the first stage of prototype creation.
Frame 1
↓
Frame 2
↓
Frame 3
↓
Interaction
↓
Prototype
↓
Test User Flow
Create a professional login screen using the Figma Toolbar.
Use the toolbar to build a food delivery application interface.
Create an e-commerce website using toolbar tools.
Desktop Frame
↓
Header
↓
Search Bar
↓
Category Navigation
↓
Hero Banner
↓
Product Cards
↓
Product Details
↓
Shopping Cart
↓
Checkout
Use frames, shapes, text, lines, icons, and components to create a banking dashboard.
| Tool / Action | Shortcut |
|---|---|
| Move | V |
| Hand | Spacebar temporarily |
| Frame | F / A |
| Section | Shift + S |
| Text | T |
| Comment | C |
| Measurement | Shift + M |
| Annotation | Shift + T |
| Dev Mode | Shift + D |
Open Figma
↓
Create Frame
↓
Create Layout
↓
Add Shapes
↓
Add Text
↓
Add Images
↓
Create Components
↓
Apply Auto Layout
↓
Create Prototype
↓
Add Comments
↓
Review Design
↓
Mark Ready for Development
↓
Dev Mode
↓
Developer Handoff
The toolbar supports several steps in developer handoff. Designers can use sections, annotations, measurements, comments, and Dev Mode to communicate design intent and implementation details.
Final Design
↓
Organize Sections
↓
Mark Ready for Development
↓
Add Measurements
↓
Add Annotations
↓
Developer Opens Dev Mode
↓
Inspect Design
↓
Implement UI
| Toolbar | Menu |
|---|---|
| Quick access to common tools | Provides broader commands and settings |
| Highly visual | Command-oriented |
| Used frequently during design | Used for additional functions |
| Direct canvas interaction | Advanced options and commands |
| Toolbar | Layers Panel |
|---|---|
| Provides design tools | Displays layer hierarchy |
| Creates and manipulates objects | Organizes objects |
| Controls interaction mode | Controls layer selection and order |
| Toolbar | Properties Panel |
|---|---|
| Selects tools | Edits detailed properties |
| Creates objects | Changes dimensions |
| Creates frames and shapes | Changes fills, strokes, typography and layout |
| Supports canvas interaction | Provides precise controls |
| Tool | Main Purpose |
|---|---|
| Move | Select and move objects |
| Hand | Pan around the canvas |
| Scale | Scale objects and layers |
| Frame | Create design containers |
| Section | Organize canvas areas |
| Slice | Define export regions |
| Rectangle | Create rectangular shapes |
| Line | Create lines and separators |
| Arrow | Create directional graphics |
| Ellipse | Create circles and ovals |
| Polygon | Create multi-sided shapes |
| Star | Create star shapes |
| Pen | Create vector paths |
| Pencil | Freehand drawing |
| Text | Create text layers |
| Comment | Collaborative feedback |
| Annotation | Design and development notes |
| Measurement | Visualize spacing and dimensions |
| Actions | Productivity features |
| Dev Mode | Design inspection and handoff |
| Figma Draw | Visual drawing workflows |
Start Project
↓
Frame
↓
Sections
↓
Shapes
↓
Images
↓
Text
↓
Pen / Pencil
↓
Components
↓
Auto Layout
↓
Prototype
↓
Comments
↓
Annotations
↓
Measurements
↓
Review
↓
Ready for Development
↓
Dev Mode
↓
Developer Handoff
A professional designer does not use the toolbar randomly. Each tool is selected according to the design task.
Requirement
↓
Select Frame
↓
Build Layout
↓
Add Shapes
↓
Add Content
↓
Create Components
↓
Apply Auto Layout
↓
Create Responsive Behavior
↓
Prototype
↓
Collaborate
↓
Review
↓
Developer Handoff
The Figma Toolbar is the main tool area used to create, select, navigate, organize, annotate, and inspect objects in a Figma Design file.
Move tools include Move, Hand, and Scale. They are used for selecting and moving objects, navigating the canvas, and scaling objects.
The Frame tool creates containers that can hold text, shapes, images, components, and other layers.
A Frame is a design container used to structure UI content, while a Section is primarily used to organize areas of the canvas and group related designs.
The Slice tool defines a region of the canvas that can be exported.
The Pen tool creates custom vector paths using anchor points and curves.
The Text tool shortcut is T.
The Comment tool allows collaborators to leave feedback and discuss design changes directly inside the file.
Dev Mode is a developer-focused interface used to inspect designs and support developer handoff.
The shortcut is Shift + D.
The Measurement tool allows designers to add visible measurements for communicating spacing and sizing.
The Actions menu provides productivity features such as AI tools, library asset search, plugins, widgets, and common commands.
The Figma Toolbar is the central tool area for creating and interacting with designs. Move tools help navigate and manipulate objects. Region tools create frames, sections, and slices. Shape tools create basic visual elements. Pen and Pencil create custom paths and drawings. Text adds typography. Comment tools support collaboration and developer handoff. Actions provide productivity features, while Dev Mode supports design inspection and development workflows.
Toolbar
↓
Move
↓
Frame / Section / Slice
↓
Shapes
↓
Pen / Pencil
↓
Text
↓
Comments
↓
Annotations / Measurements
↓
Actions
↓
Dev Mode
↓
Professional Design Workflow
To become proficient in Figma, practice the Toolbar together with Frames, Layers, Assets, Components, Auto Layout, Constraints, Prototyping, Design Systems, Collaboration, and Developer Handoff.
For structured learning, explore JustAcademy Figma Training.
To explore the course through a demo, visit Register for Figma Course Demo.
The Figma Toolbar is one of the most important parts of the Figma Design interface. It provides access to tools for navigation, frames, sections, shapes, vector drawing, text, collaboration, measurements, annotations, productivity features, and developer workflows.
Understanding the toolbar helps designers work faster and create better-organized interfaces. By combining toolbar tools with Frames, Components, Auto Layout, Prototyping, Design Systems, Comments, and Dev Mode, designers can build complete professional UI/UX projects and collaborate effectively with developers and other stakeholders.
