Chapter 3: Getting to Know Your Design Environment

In the previous chapter, you discovered the basic concepts of the UX process, which is without a doubt an essential part of any design project. As you work, it's best to keep all research results, analysis data, and other attributes nearby so you can always check if you're on your planned design path. Remember that the usability and clarity of your final user interface will directly depend on the quality of your UX work.

However, creating a user interface is also a tricky and time-consuming part of design work. You might have done some excellent research and collected enough relevant data, but your actual design work may not always be smooth and easy. In real life, anything can happen – maybe the chosen style will not be approved by the customer, or maybe your team decides to add a tablet version of your product. This book cannot anticipate all the challenges a designer might face, but you will definitely learn...

Starting a new design project

In this chapter, you will temporarily step away from analysis and research work in FigJam files and instead discover Figma's essential tools and functions. You will find a lot of material to learn, and it's completely normal to feel overwhelmed by all this new information. But the good thing about this chapter is that you can refer to it from time to time when you're unsure of any of the basics of Figma. So don't worry about memorizing all the concepts of each function; you will see how everything works later on in the book, and each tool and feature will be explained in a more practical way.

Design files

You already know that Figma has two types of files – FigJam and design. You've learned about FigJam files in detail in the previous chapter. This time you will go back to the file selection and make another choice, namely to create a new design file.

To create a new blank design file, you have to open the welcome...

Exploring the toolbar

You'll start by exploring the top toolbar – this is where you'll find all of Figma's basic tools and settings. For the most commonly used basic tools, try to use right from the beginning as many shortcuts as possible because it will greatly improve your workflow.

Main tools

Figma divides its core tools into several sections, all of which you can see in the top bar. You will get an overview of all the sections in order, from left to right, and start by exploring the main set of features.

A – menu

The Figma logo in the upper left corner hides a significant drop-down menu that opens when you click on it:

Figure 3.5 – Figma's main menu

This is the real main control center where you can find import, export, select, display, and many other functions. However, most of these features can be accessed in other ways. For example, anything on the Text menu is usually displayed in the context-sensitive...

Exploring the left panel

Learning Figma's tool sets can be challenging, but it is important to have at least a basic understanding of the features so you can quickly get started using them. Don't worry if you still feel insecure every time you launch Figma. You will soon learn the concept of each tool in a real workflow. However, tools are just one part of everything to learn in Figma. It is equally important to know how to work with layers and assets in your project. All of these will be displayed in the left sidebar, so let's take a deeper look at its interface.

Layers and pages

Every time you create a new text layer, shape, or any other element, its name is immediately displayed in the Layers panel. Likewise, when you delete an object from the work area (you can do this simply with the Backspace key on macOS or the Delete key on Windows), it will also be removed from the sidebar. So, think of the Layers panel as a container that collects everything in your project...

Exploring the right panel

Last but not least, you will explore the right panel, commonly referred to as the Properties panel. This area is context-sensitive, so it changes every time you click on something in your design file. Depending on the selected object, you can see different options, functions, and parameters. Therefore, it is better to learn and remember the functionality of the right panel in practice, and this section is just a short guide to it, which will simplify your further work. As you can see, the right sidebar is split into three tabs: Design, Prototype, and Inspect. Let's start and proceed in order.

Design

This is the panel tab that Figma opens by default, which makes sense, since you will no doubt use it the most. Whatever you're looking for about visual edits, you'll always find it in the Design panel. It sounds promising, but is it really so? If nothing is selected in your workspace, the panel may seem empty. But as soon as you click on any...

Summary

Well, if you feel like all the new information you've just received is too much to remember, you're probably right. When getting started in Figma especially, it takes time to get used to its interface and become fluent with its features. That's why it is highly recommended to return to this chapter from time to time to refresh your memory about the toolbar, and the left and right panels.

Now that you've successfully completed this chapter, you can see the true capacity of Figma and how powerful it can be in many ways. To help you create high-quality designs in the best possible way, Figma never stops working on introducing new features into its own interface. Stay tuned to the official Figma Twitter profile (@figmadesign) for new features and releases, and try testing them and incorporating them into your work routine so that Figma's tools will have nothing mysterious or unknown to you.

From now on, with each next chapter, you will get more and...