2. Getting Started – Starting a Figma File, Toolbars

Figma Basics, Design File Introduction

The video below is a walkthrough of starting a Figma Design File, we will go through what the different toolbars are and how to use them, and start designing. Watch after setting up your account and beginning to use Figma. Under the video is more in-depth explanations of the tools and what they do.

Left-Hand Toolbar

Use this to name your file, and navigate your pages, layers, and elements

  • Pages – Your “workspace”, the page you are designing on, + to create new page
  • Layers – View the different sections, frames, elements of your design and how they are ordered.

Bottom Toolbar

Use this to navigate your board, add frames, shapes, text, and other elements to your page. Click the small arrow on the right of each tool for additional tools and options.

Move Tools – Move elements, move around your page, resize your design

  • Move – Select and move items
  • Hand tool – Move around your page and space
  • Scale – Resize your designs

Region Tools – Create a new frame, section, or area for export

  • Frame – Create new frame (where your design is contained/canvas for your design)
  • Section – Create a new section to organize/group your designs
  • Slice – Select an area of your design to export

Shape Tools – Create new shapes for your design

  • Click the small arrow beside the shape to select the shape you want to create
  • Click to create shape
  • Drag to create shape at a certain size

Creation Tools – Create a custom vector/line/shape

  • Pen – Create with splines and points
  • Pencil – Create by drawing

Text Tool – Add text to your design

  • Click – To start typing
  • Drag – To create a textbox

Comment Tool – Add a comment to your design

Actions Tool – Explore additional actions you can take while designing

Right-Hand Toolbar

Use this to adjust and edit the appearance, positioning, and effects of your design elements (text, shape, etc.).

Object Tool – Controls and tools to help you edit the object selected

  • Select matching layers – helps you select that object across different frames
  • Create component – turn your selected object into a component which becomes a reusable asset in your designs
  • Union, subtract, intersect, exclude and flatten – Edit and morph your object with other objects