How To Use Figma

Figma, unlike other design tools, isn’t straightforward to get started on and use. If you’re using it for the first time, this guide will help you get started and teach you how to use it. Also, we made sure to include essential things that you need to be aware of.

Use Figma on Browser

1. Start by navigating to Figma on your browser and click on Log in to sign in with your credentials, or click on Get started for free to get started.

2. Irrespective of the options you choose, you get the same sign-in box where you can log in and register.

3. If you’re new to Figma and are creating a new account, you are asked a few questions, and the registration process finishes upon completion.

4. After finishing the login or sign-in process, you’re redirected to Figma’s home screen. To access the existing designs, open them from the Recents.

5. However, if you want to create a new file, navigate to the top right corner and click on the Design file button. Now, from the available options, click on the respective option where you want to create a new file.

6. If you do it right, you will notice that the new file has been created and loaded on the existing tab.

Breakdown of Figma Browser Interface

Canvas

The central area of the screen is where you create and edit your designs. It provides a large, open space to work on your project elements. Also, it allows direct interaction with design elements, such as selecting, moving, and resizing objects.

Main Menu

To access the main menu of Figma, navigate to the top-left corner and click on the Figma icon to access different options that comprise a comprehensive list of Figma’s functions and features. Here is a simple explanation of each option:

• Back to Files: Navigate back to the File browser.
• Quick Action: Search for functions by name for quick access.
• File: Options to create new, place image, save, export, and manage files.
• Edit: Basic editing functions like Undo, Redo, Copy, Paste, and advanced selection tools.
• View: Features all view options and includes some of the necessary tools for controlling grids and rulers visibility, zoom in or out, etc.
• Object: Functions to manipulate objects (align, arrange, etc.).
• Text: Text formatting options such as Bold, Italics, Alignment, list creation, and more.
• Arrange: It features tools to organize objects using alignment and distribution options.
• Plugins: Manage and utilize plugins to extend Figma’s capabilities.
• Widgets: Manage and select widgets that are frequently used in designs.
• Preferences: Customize settings for dragging objects, visibility of elements, and more.
• Libraries: Access components and styles for reuse.

Move and Scale Tools

• Move Tool: Move objects within the canvas and reorder layers in the Layers panel.
• Scale Tool: Resize layers proportionally without distortion.

Frame and Slice Tools

• Frame Tool: Define the size of the device screen you are designing for.
• Selection Tool: Lets you select the layers added to canvas.
• Slice Tool: Export specific parts of your design as new layers.

Shape Tools

• Geometric Shapes: Create basic shapes like rectangles, circles, etc.
• Place Image: Insert images into your design.

Pen and Pencil Tools

• Pen Tool: Create custom vector shapes.
• Pencil Tool: Draw freehand illustrations.

Text Tool

Add a text box in your design by clicking on it and have the flexibility to add and edit text.

Resources

It offers the flexibility to manage Components, Plugins, and Widgets with separate tabs and a search box for each to enhance ease of use.

Hand Tool

Move around the Canvas without selecting or moving objects accidentally.

Comment Tool

Add and manage comments to specific parts of your design for reference and team discussions.

File Name and Users

• File Details: View and change the file name and location.
• Active Users: See who is currently viewing or editing the file. It also offers an Enable observation mode to follow other users’ actions in real-time.

Share Settings

It helps you share the file you’re working on while offering the flexibility to set access settings and more advanced sharing options.

Present Mode

It lets you preview and present the design on a selected device or custom size, giving you the flexibility to view and interact with prototypes.

Zoom/View Options

Quickly change the zoom level and view settings of the file. It also includes other tools to manage grids, rulers, outlines, etc.

Layers Panel

It is located on the left side below the Figma menu, where all the layers and objects in your design are shown. It also allows the ability to control and manage the layers like:

• Naming Layers: Rename layers for better organization by double-clicking the layer name.
• Lock/Unlock Layers: Prevent accidental edits by locking layers.
• Toggle Visibility: Show or hide layers using the Eye icon.
• Grouping: New layers are placed within parent frames or groups, which can be collapsed or expanded for better organization.

Assets Tab

Access and search for components like icons, buttons, and other UI elements. The local components created are displayed in the assets tab for easier access, and flexibility is offered to reuse them with a click of a button.

Pages Tab

Create multiple pages within a single file, each with its own Canvas backdrop for separate prototypes.

Design Tab

Adjust properties of selected layers, frames, shapes, and text elements. Also, gain access to Export options while having the flexibility to preview the layers.

Prototype Tab

Configure settings for interactive prototypes and establish connections between design elements.

Inspect Tab (Exclusive to Dev Mode)

Generate and view code snippets (CSS, Android, iOS) for individual design elements, helping developers implement the design accurately.

How do you get used to Figma quickly?

To enhance ease of use and get used to Figma quickly, use the key combinations. To learn how to use them, click on Main Menu > Help and Account > Keyboard Shortcuts.

Wrapping Up

Congratulations on learning how to use Figma!

While we made sure to include everything necessary to help you get started and use Figma, we suggest you navigate around and work with tools to get used to it.

In the case of Figma mobile applications for Android and iPhone/iPad, we haven’t included them due to their inability to edit design files. The only advantage of the Figma app is it allows you to view and comment on designs, edit FigJam files, check activity, and mirror frames, which can be done through the web version as well.