Lesson 7. Registration. Interface. First steps

Let's move on to the practical part. As you may have guessed, we will be using Figma. First, we will explore the advantages and disadvantages of this graphic editor, and then we will begin learning how to create designs using it.

We start with the basics. Today we will learn how to draw a rectangle, a line, an arrow, and a text block. This will be enough to create task flows of all kinds and simple pages.

At the end of the lesson, as always, you will have many practical tasks to reinforce the material.

• Why choose Figma?
• How to get started? Registration
• Overview of the Figma interface. Main menu. Toolbar. Workspace. Properties panel. Layers panel
• Drawing a rectangle
• Selecting, moving, and resizing objects
• Navigation. Moving around the workspace. Managing zoom. Focusing on an object
• Setting object properties. Position and size. How to constrain proportions. Rotation angle. Corner rounding. Fill color. Stroke options.
• Color picker window. Copying and pasting color values
• Adding text. Setting the boundaries of the text block. Text settings
• Drawing a line and an arrow
• Why layers are needed. Drawing order
• Useful commands. Undo recent actions. Duplicate. Delete an object. Select multiple objects at once
• Homework
• Conclusions

Why choose Figma?

This editor is excellent in all aspects and we choose it not for its simplicity or free access. Currently, it is a powerful tool that is perfectly tailored for creating websites, applications, or other graphical interfaces. Let's consider the advantages of Figma:

• Free – most features needed by a designer are available for free. While you are learning, Figma requires no financial investment. Purchasing a subscription will become relevant if you want to work in developer mode or create more than two team projects with other designers;
• Easy to learn – Figma's developers have spent years making most features intuitive. Compared to learning in other editors, such as Photoshop, Figma seems easy and understandable;
• Low system requirements – this graphic editor will work on any laptop, even the weakest. The main thing is to have a browser running. It also does not matter which operating system you are using (Windows, MacOS, or Linux);
• Works in the browser – to get started, you don't even need to install anything. Just register and start working. Convenient for showing to clients. The desktop version is slightly faster on large projects, supports local fonts, but in general, you can start with the browser version, which we will do;
• Has all necessary features and even more – provides the widest possibilities from vector editing to creating interactive prototypes that can be instantly tested on a smartphone (looks like a real app). All of this we will need to learn in the future.

How to get started?

To begin, you need to register on the Figma website using a computer or laptop by launching a browser. A smartphone is not suitable because it can only be used to view previously created designs. You will need a working email address. It is used as your login.

1. We go to the Figma website — we go to this link and immediately bookmark it in the browser. After registering and logging in, we will use this bookmark to launch Figma like a regular application. We are greeted by an animation that shows one of Figma's key advantages - the ability to collaboratively and simultaneously edit a file (you may have encountered a similar feature in Google Docs). Therefore, you can see colorful cursors with names:

2. We go to the registration form — for this, we look for and click on the Get started for free button on the homepage in the upper right corner:

3. We fill in the first step of the registration form — we enter your email address in the Email field. We click the Continue with email button and proceed to the next step. There are other registration methods (for example, using a Google account), but they are not as universal;

4. We fill in the second step of the registration form — we create a password and enter it in the Password field. The email and password can be changed later if necessary.

5. Confirmation via email — you know that in most services, you need to confirm your email address just in case you forget your password. Remember that sometimes requests may go to spam. If the email ended up there, mark it as not spam. In Gmail, for example, there is a special button Report not spam when you open an email that went to spam. This is a very important point, as later, when the client leaves comments on your Figma design, you will receive an email notification about it. And you need to respond to the client's comments as quickly as possible. So, we open the email and click the Confirm your email button.

6. Enter your name — it will be seen by other project participants, such as your client. It will always be displayed in the upper right corner of the launched application (specifically the first letter). By the way, if you do not specify a name, it will be automatically generated from the email address. If you want to receive news about Figma via email, check the box next to Subscribe to Figma tips and updates. But you can always read the latest updates in the blog.

7. Provide details about yourself — this is done in the form of a questionnaire. In the first question, we are asked to choose the field in which we will work. In our case, it is relevant to choose Design (Design).

   In the next question, you will be asked to choose the option that best describes your work. You work in an agency, freelance, or are studying at a university. If you are unsure which one to choose, there is also an option Other (Other).

   Another question – will you be collaborating with clients or a team. Since we are just starting to learn the program, I recommend choosing Just me (Just me).

   Adding other participants. Figma offers us to invite others right away and create our own team. I recommend skipping this step for now – click Skip.

   What do you need Figma for right now? That’s what the next question sounds like. Since you don’t currently intend to create commercial projects, and most likely each of you has your own goal: to try your hand as a designer, learn the program, or anything else, the easiest option would be to choose Other (Other).

   The next question: have you used Figma before? Your answer will determine whether the program offers a quick introduction to the functionality (tutorial). Since we will study all the main functions of the program together, you can click either the first or second answer: Yes, many times / Yes, few times.

8. Choosing a plan. In our case, it will be the free (free) Starter plan. It has no significant limitations as long as you work independently on your projects, learn the program's functionality, and create designs for your own needs. Figma also allows you to create one full project, with three files. You can invite other participants and manage access rights to this project. You will be able to grant and revoke editing rights, restrict viewing, and protect your work from copying.

   Next, Figma offers you to choose one of three interaction options right away: creating a design in a file (what we will be doing 95% of the time), creating a board in FigJam (an additional Figma product where it's convenient to organize research results and conduct joint brainstorming sessions), or opening Figma Slides (functionality for creating presentations). I suggest you skip this step to avoid confusion.

9. All done! — Figma is ready to work. Expand the browser to full screen to get the most useful space. There are still a few nuances before we start;

10. As you can see, we are redirected to the Figma page with recently edited projects (files). Figma stores all your projects on a remote server (this is also called “in the cloud”). This means you don’t need to save anything on your computer; everything is done automatically. On the right, you can see images of your projects. Look, Figma has added a few for you to explore.

    To create your first project, you need to click the "New Design File" button. Now we can move on to exploring the Figma interface.

Main Page of Figma and Creating a New File

You have already had the opportunity to familiarize yourself with Figma's pricing plans and saw that we have currently chosen the simplest and free plan. It allows you to create an unlimited number of projects for personal use. Figma developers called them drafts (Drafts), meaning rough drafts.

On the main screen to the left, you will see a list of sections:

• Your Name – the first item at the top. Here you can customize your profile: change your name, email address, and password. Other settings are not important at this time;
• Search – search for projects by name. If you have many files, this section may be useful;
• Recent – Recently opened files. Everything is organized in chronological order. At the top are the most recently used files;
• Drafts – drafts (with full functionality) for personal use, learning, etc.
• All Projects – these are essentially folders that allow you to conveniently separate your personal and commercial work. They are designed for easy sorting of files. In the free version, we have access to only one project, into which we can move files from our drafts and get the opportunity to test the functionality available through subscription for free.
• Trash – archive of deleted projects. You can perform two actions with them: restore or permanently delete.
• Community – community contributions: templates, plugins, and other useful resources. We will discuss them in upcoming lessons; it is still too early;

Note that you can perform various actions with files (create a copy, delete, rename, share, etc.) by clicking on their thumbnail on the main page. Watch the video below.

Overview of the Figma Interface

The interface of any graphic editor can be conditionally divided into several key elements. Each of them serves a specific function and is actively used during work. Let's consider each part:

1. Main Menu — consists of a list of commands, both global (not related to the project we are currently working on) and contextual, which apply, for example, to the selected object. Let's consider a few examples. Global command: go to the list of projects (files). Local command: Delete the selected object. We will examine all commands separately in detail. For now, you only need to know that when you click this button, a huge menu of commands appears, which are executed by clicking on them;
2. Toolbar — each icon on the toolbar is a separate tool. To select it, we click on the icon, and it is highlighted in blue, signaling that everything is ready for use. After selecting a tool, it is used in the workspace (next item). For example, there is a rectangle drawing tool. Today we will get acquainted with several useful instances;
3. Workspace (canvas) – all the magic happens here. Here we draw shapes using the tools. We select primitives to change their properties (for example, color) in the properties panel (next item);
4. Properties Panel — each type of object has a unique set of properties. For example, a rectangle has size, position, and color. Text, in addition to the properties of a rectangle, also has line spacing and alignment (left, right, center). Depending on the selected object, the panel can change beyond recognition;
5. Layers Panel — stores a list of all created objects. Additionally, here we determine the order in which to display them (more on this later). In the layers panel, you can select objects just like in the workspace. It's just another way to highlight an object for editing or to change its properties.

I know it sounds complicated, but essentially we have a sequence of actions when we create a design:

1. Selecting a tool — from the toolbar;
2. Using the tool — in the workspace. For example, adding a rectangle or text;
3. Selecting an existing object — using the workspace or the layers panel;
4. Modifying the selected — using the properties panel (changing position, size, color) or using the context command from the main menu (making a copy);
5. Changing the display order of objects — using the layers panel;

Drawing a Rectangle

Rectangle – a commonly used primitive. It can be used to draw not only rectangles and squares but even circles. To draw, follow this sequence:

1. Select the Rectangle tool — click on the rectangle icon in the toolbar. Or press the R key on the keyboard. The button should be highlighted in blue;
2. Set the starting point — for this, click and hold the left mouse button anywhere in the workspace to set the "start" of the rectangle. Do not release the left mouse button;
3. Set the dimensions — move the mouse in any direction while holding the left button – voila – the rectangle begins to be drawn;
4. Set the endpoint — now release the left mouse button to finalize the dimensions of the shape. Done!

This is how it looks in action (to expand the video to full screen, use the second button at the bottom right of the player):

Let's analyze what happened. During and after the rectangle is displayed, you will notice that it has a blue border – this means that the object is selected. This is called a bounding box, which means bounding frame. Below it, the size of the object is indicated in pixels – we discussed them in the previous lesson.

Properties Panel on the right is instantly adjusted to the selected rectangle. The following parameters have appeared:

• X – position of the object on the X-axis (horizontally). The origin of coordinates is at the top left corner (now we will move the rectangle and you will understand everything);
• Y – position of the object on the Y-axis (vertically);
• W – width (pronounced wiz) or width of the object;
• H – height (pronounced height) or height of the object.

All these properties are specified in pixels. To change one of them, simply click on it and enter a new number from the keyboard, then press Enter. The object will respond instantly.

In the layers panel on the left, a line "Rectangle 1" has appeared with an icon of a rectangle. When a primitive is created, a new layer is automatically created. It informs the graphic editor in which order to draw the shapes. For now, this may not make sense, but when there are many objects, I will demonstrate the usefulness of layers as an example.

Draw two more rectangles. Note that each time you need to select the rectangle tool again, because it resets after use. Also, after each new shape, a new line appears in the layers panel.

Selecting, Moving, and Resizing Objects

First, make sure you have selected the Move tool, which means to move. The icon looks like a cursor and is the first one on the toolbar. For quick access, press V. Next:

• To select an object, simply click on it in the workspace. You can also click on the layer name in the left panel. Each time you select, the properties panel and layers panel will update. To deselect, click on the empty space in the workspace or the layers panel;
• On the corners of the selected object, there are white squares that can be used to resize. To do this, hover the cursor over a square, hold down the left mouse button, and move it. Release the left mouse button to apply the new size;
• To move an object, you need to hover the cursor over it, hold down the left mouse button, and while holding, move the mouse. At this moment, the object will be selected and will follow the mouse until you release the left button.

Let's practice with rectangles:

During movement and resizing, the corresponding parameters on the properties panel change. But these are just the simplest ways to interact with shapes. There are a few less obvious techniques, but working with their help is much more efficient:

• If you hold down the Shift key before moving, the object will shift exactly vertically or horizontally depending on where you move the cursor after pressing the left mouse button;
• You can resize the object by pulling on one of its edges, rather than the corner, to change only the height or width;
• To maintain proportions while resizing the object, you need to hold down the Shift key. In this case, the aspect ratio will be preserved and, for example, a square will remain a square;
• To finely adjust the position of the shape, you can use the arrow keys on the keyboard. One press will move the selected object one pixel in the corresponding direction. To increase the step to 10 pixels, you need to hold down the Shift key while pressing the arrow. You can also hold down the arrows for continuous movement.

There are other techniques, but this will be enough for comfortable work for now. Try out new ways to control objects:

Navigation

The space you see in the workspace is just a small part of it. Imagine a video camera is directed at a huge canvas. You can only observe what the lens is focused on. Of course, you can choose a comfortable position and even zoom in to see details. Or zoom out to appreciate the design as a whole. Let's explore new techniques for convenient navigation through the project:

• To move the camera hold the spacebar while holding down the left mouse button and move the cursor in the desired direction. Objects in the workspace will begin to move according to the new position of the camera. As you can see, there is a lot of empty space around. During this manipulation, the cursor will take on the appearance of a hand, reminding you that it is in a different mode. Instead of the camera analogy, you can also imagine that we are moving the canvas on which the figures are drawn;
• In the upper right corner, the current zoom level of the camera is displayed. For example, 100% means we are all seeing at a 1 to 1 scale, i.e., actual size. 200% means everything is doubled in size. 25% means everything is reduced to a quarter. To zoom in, press the + (plus) button. To zoom out, press the - (minus) button. It is even more convenient to use the mouse scroll wheel. If you are using Windows, simply scroll it to zoom in/out the camera. On MacOS, you also need to hold down the Command button;
• To quickly reset the zoom to 100%, press Shift + 0. If you select a layer on the left panel by clicking on it, the specified combination will move the camera so that the content is centered in the workspace. This is useful when you have lost sight of the object you need and want to focus on it;
• If you need to see everything on the page – press the combination Shift + 1;

These three techniques allow you to quickly orient yourself in space:

Object Properties Settings

And now for the most interesting part. Select the rectangle and pay attention to the properties panel. Most of these parameters are available for all types of objects. Let's take a closer look at what and how can be configured.

• Position and Size — after clicking on the field, you can increase/decrease the value in increments of one using the up/down arrow buttons. To increase the increment to 10, hold down Shift. It is also worth noting that basic arithmetic operations work in these fields. For example, you can add a number to the current value by typing +8 and pressing Enter. Subtraction, multiplication, and division operations are also supported. To quickly move to the next property, press Tab. To go to the previous one, press Shift + Tab;
• Lock Proportions — allows you to maintain proportions when changing width or height through the property fields;
• Rotation Angle — allows you to rotate the object at any angle;
• Corner Rounding — sets the radius for rounding all corners;

• Fill Color — sets the color of the rectangle. Upon clicking, a window will appear, after which you need to select the appropriate color and its saturation. Then click on the cross in the upper right corner of the window or anywhere outside the window to save the changes;
• Add Stroke — adds a stroke effect around the shape's outline. New settings will appear after activation;
• Stroke Color – upon clicking, the same window as for the fill color will appear;
• Stroke Thickness — specify the thickness of the line;
• Remove Strokes — if you do not need it.

You will have more than enough of these properties. In the next lessons, we will get to know them in more detail. But now let's see how this can be used. In particular, the ability to set the color and round the corners of the shape is of greatest interest to us:

Color Picker Window

Let's take a closer look at the color picker window. It allows for very flexible adjustment of its hue, saturation, and even transparency. Additionally, each color has its exact value that can be copied and pasted into the fill or stroke color of another object.

To do this, you need to click on the field with the color value, highlight it, right-click, and select Copy. Next, select the object to which you want to apply the copied color, click on its fill color or stroke color field, highlight all the values, right-click, select Paste, and click . It’s much faster to use the combinations Command + C, Command + V for MacOs and Ctrl + C, Ctrl + V for Windows.

There are even faster methods for copying and pasting colors, but we will cover that in the next lessons. For now, let's master the methods shown.

Adding Text

This is the simplest part. First, select the Text tool on the toolbar. Its icon looks like a large letter T. Or use the hotkey T. Next, follow this sequence of actions:

• Set the boundaries of the text block — this is done just like creating a rectangle. These boundaries indicate where the text will automatically wrap to a new line if the width is insufficient. Additionally, they define the frames against which the text will be aligned;
• Enter the text — after creating the boundaries of the text block, the blinking cursor will indicate that it is time to enter text. To save our text, press Escape;
• Change the appearance of the text — now we can set the font, color, size, vertical and horizontal alignment. Alignment allows you to specify which edge to place the text (left, right, or center). All these parameters are located on the properties panel. Make sure the text block is selected.

The entire process is shown in the video below. There will be separate lessons dedicated to working with text, as it is a very extensive topic.

Drawing a Line and an Arrow

And the last pair of primitives for today. The process of creation is also very similar to that of a rectangle, and we have already covered all the important properties. To select the Line or Arrow tool, you need to first click on the arrow next to the rectangle icon, and then choose the desired tool from the menu. There are also keyboard shortcuts for quick activation: Line - L, Arrow - Shift + L. Let's watch the video and try it ourselves:

There is one useful trick. If you hold down Shift while creating a line or an arrow, the shape will be drawn at an angle that is a multiple of 45 degrees.

Why are layers needed?

I will draw an analogy with the real world to clarify the concept. Imagine that you have several A4 files. Those transparent files into which office paper is inserted. So, in each of these files, we insert one cut-out shape made of colored cardboard (circle, rectangle, etc.). We now have several shapes in the transparent files. Now we insert them into a folder and turn all the files to one side. Now we can see that some shapes overlap others. In this analogy, the folder is the layers panel, the file is a layer, and the cardboard shape is a primitive within that layer. Let's see why layers are necessary in Figma:

• Organize and group objects — in the upcoming lessons, we will learn to create groups and frames that allow us to collapse several layers with primitives into one. Layers can be renamed, allowing them to be grouped by content (for example, buttons, lists, windows, screens, etc.). Additionally, groups and frames can be nested within each other, creating whole hierarchies. All these capabilities allow for quick and convenient work with very large projects. Continuing the analogy with the real world, imagine that a transparent file can hold several cardboard shapes;

• To allow for highlighting and focusing on an object – moreover, there is a search by name in the layers panel;

• Determine the order of display – layers in the layers panel are arranged one below the other in a list from top to bottom. The highest layer will always be drawn first, and the lowest last. The situation is the same with files; shapes in the upper files overlap those below.

  Take a look at the visual example below. To change the drawing order, simply drag the layer in the left panel up or down. Imagine that we are rearranging files in the folder up or down to achieve the same effect.

  
  
  
  
  

And now let's try to formulate the definition of a layer in Figma. Layer (layer) – is an abstract object with a name that represents the primitive (shape) placed within it according to the drawing depth. Layers can be grouped into frames (that is, grouped by meaning), but we will discuss that in the next lesson.

Useful Commands

• Undo Last Actions — sometimes you can do something inadvertently and need to go back in time a few actions. To do this, press Command + Z on MacOs or Ctrl + Z on Windows. You can perform this several times until you revert to the desired state;
• Make a Duplicate of an Object — select the desired object and press Command + D on MacOs or Ctrl + D on Windows. A copy will appear in the same location where the original was and will be selected. You can immediately start working with it, for example, moving it with the arrow keys, which is very convenient;
• Delete an Object — select the desired object and press Delete. It will immediately disappear from the workspace and the layers panel;
• Select Multiple Objects at Once — hold down the left mouse button and drag the cursor in any direction to include several objects in the appearing frame. Then release the left mouse button and you will have several selected objects. What can you do with them now? You can move them all together as one object or resize them. If the objects are of the same type, you can change properties for all at once.

Homework

1. Select one website and try to closely recreate its main page (just the first screen is enough) using the tools from this lesson. Try to match similar colors, sizes, proportions of blocks, and fonts. Send a link to the images of the drawn screens. You can take a photo with your smartphone if you don't know how to take a screenshot. Also, don't forget to specify the address of the site you are redrawing. Share the difficulties you encountered;

2. Draw one icon from each row listed below, using the tools you have learned. You should have a good understanding of the properties of shapes to complete this task. You don't need to try to replicate the icons exactly; they can differ slightly;

3. Redraw one wireframe from the previous lesson of your choice;
4. Increased difficulty task (optional). Redraw two other websites. Draw the remaining icons.

If you cannot complete a task, read the lesson again and try again. If it still doesn't work, write in the comments or in direct messages. Remember, there is a large volume of work concentrated here, do not expect to do everything in one evening.

Conclusions

The first practical lesson is coming to an end. You have learned the minimum information that we will gradually build upon. Next, we have a few more parts about the basics of Figma, and only then will we return to design theory.

Be sure to complete all homework assignments. Creating and manipulating primitives, as well as navigation, should be done by you at the level of reflexes (without thinking). This will come with time and practice.

There is a lot of information, so reread the lesson again in a few days to not forget anything.

Follow me on Instagram – @frusia.pro – stay updated on announcements of new lessons, watch homework reviews in stories, ask questions, and you will also find plenty of useful posts about design.

Take quiz

To pass the lesson and check your knowledge, you need to correctly answer 80% of the questions from the quiz. To do so, you need to login and enroll to the course or signup, if you haven't done so yet.

Take quiz

Continue learning