A tour of the Figma workspace

Figma is a design tool for interfaces that runs in your browser or as a desktop app. Files live in the cloud, so you never save manually, and several people can work in the same file at once. Let us get oriented before we draw anything.

Creating your first file

From the Figma home screen, choose New design file. You land on an empty canvas. Rename the file right away by clicking its name at the top: call it "Recipe app". Good naming habits start on day one.

The four main areas

• The canvas in the middle is an infinite space where your designs live. Scroll to pan, hold Ctrl or Cmd and scroll to zoom, or pinch on a trackpad.
• The toolbar along the bottom holds the main tools: move, frame, shapes, pen, text, comments and more. Hover over each icon to see its shortcut.
• The left sidebar shows your pages and the layers on the current page. Every object you create appears here as a layer.
• The right sidebar is the properties panel. It changes based on what you have selected and shows size, position, colour, text settings and more.

Pages

A file can have several pages, listed at the top of the left sidebar. Teams often use one page for work in progress, one for final screens and one for components. Create two pages now: "Screens" and "Components".

Shortcuts worth learning first

You do not need to memorise dozens of shortcuts. Start with these:

• V for the move tool
• F or A for the frame tool
• R for rectangle, O for ellipse, T for text
• Shift + 1 to zoom so everything fits on screen
• Space held down while dragging to pan

Multiplayer basics

When someone else opens the file you will see their cursor with their name. You can click their avatar at the top to follow their view, which is handy during design reviews. Comments, which you add with C, attach to a spot on the canvas so feedback stays next to the thing it describes.

In the next lesson we will create our first frames, which are the screens of our app.