We continue our introduction to the basics of Figma. Today we will learn about new techniques for working with layers, including how to select, move, group, lock, and hide them.
We will learn how to insert a raster image into a project and find out how to work with the eyedropper tool, which allows us to read the color code from images and shapes.
The last section with new commands relates to setting precise distances between objects, which is important for working with grids later on.
This lesson expands our designer's toolkit with new techniques that speed up and simplify the process. For example, it's hard to imagine working on a large project without grouping layers.
- Groups
- Creating and Deleting a Group
- Collapsing and Expanding a Group
- Nested Groups
- Regrouping
- Selecting Layers
- Selecting a Nested Layer
- Selecting Multiple Layers (New Method)
- Selecting a Range of Layers
- Selecting an Overlapping Layer
- Deselecting
- Working with Layers
- Locking and Hiding Layers
- Copying, Cutting, and Pasting Layers
- Inserting into the Position of Another Object
- Layer Names
- Renaming Layers
- Let's Give Meaningful Names
- Importing Images
- References and Moodboards
- Importing from the Clipboard
- Importing from a File
- Eyedropper Tool
- Quick Color Assignment
- Assigning Color from Image Pixels
- Precise Positioning
- How to Share a Project
- Homework
- Conclusions
Groups
While completing the homework from the last lesson, you definitely encountered the problem of layer management. For example, any button consists of a rectangle (defining the boundaries) and text (which explains what this button does). To move the button, you first have to select each of its components. And what if you want to move the top part of the site with a navigation menu that consists of 5 text elements? That will take more time. You will constantly face such micro-tasks.
To solve this problem in Figma, there are several ways: using groups, frames, or auto-layouts. For now, we will consider the simplest option, namely grouping elements.
For example, a rectangle and text can be combined into one group by content and that will already be a button. This is very convenient and significantly speeds up the work.
Group is a special layer that contains other layers and is designed to combine and simplify further work with them. A group works with both a large number of layers and just one.
Creating and Deleting a Group
Suppose we need to combine several primitives that make up a button into a group. To do this:
- We will use the technique from the last lesson by holding the left mouse button at the top left and dragging it to the bottom right corner, thereby selecting all the primitives that make up the button. The selected layers will be highlighted in the panel on the left;
- Right-click on any of the button components and select Group Selection from the menu. A keyboard shortcut is also available for quick grouping: Command + G on MacOs or Control + G on Windows;
- Note that in the layers panel, instead of two selected primitives, there is now one layer with a new icon and the name Group 1 – this is our button;
- Now you can work with the button as with a regular layer: move, scale, duplicate, and so on without the need to select each layer individually;
- To break the button back into its components, you need to select the group and choose Ungroup from the context menu or press Shift+Command+G on MacOs or Shift+Control+ G on Windows;
Collapsing and Expanding a Group
As you noticed, after creating a group, the content is automatically hidden. This state is called a collapsed group. To show the content, you need to expand the group:
- Hover the cursor over the layers panel. A small triangular arrow will appear to the left of each group, pointing to the right;
- Click on the arrow and the group's content will become visible. The arrow will rotate downwards, indicating the expanded state;
- To collapse the content again, click the arrow once more.
Nested Groups
Groups can include other groups. To do this, simply select several layers with the group and create another group. A layer that is inside a group is called a child. A layer-group that contains other layers is called a parent.
Why might this be necessary? For the same reason: for convenient and fast work. Let's consider an example. Several buttons and a logo with a background can be combined into what is called a header (in English – header, pronounced header) – a design element that repeats on all pages and usually contains quick navigation tools. In the eyes of Figma, this is just a group with other nested groups.
So, if we need to move the buttons within the header, we can expand the corresponding group and work with the group of each button.
Reorganization
Sometimes it may be necessary to move a layer from one group to another or to complement a group with new layers.
To do this, simply drag the layer to the desired group in the layers panel and it will instantly be placed inside. You can also drag it to the desired position between layers within the expanded group. If you need to remove the layer from the group, you should drag it to the area above or below the group, as shown in the video:
Layer Selection
We already know how to select objects by clicking on them in the workspace or in the layers panel. Also, we know how to select multiple layers using a marquee by holding down the left mouse button in the workspace. Now we will get acquainted with new techniques and learn how to select nested layers without expanding the group.
Selecting a Nested Layer
Let's return to our example with the website header. To highlight the button, simply double-click on it, which will automatically expand the top group.
To go further down the hierarchy and highlight the text on the button, you just need to double-click again. As you have already understood, a double-click allows you to select objects one level of nesting below the current one.
Double-clicking speeds up selection when working with nested layers and is significantly faster than manually expanding groups. But what if there are more than one level of nesting? Then you will have to make several double-clicks. To select an object at the lowest level of nesting, simply hold down Command on MacOs or Ctrl on Windows and click on the object – this is called deep selection.
Choosing Multiple Layers (New Method)
Hold down the Command key on MacOs or Ctrl on Windows and click on the layers one by one in the left panel. Hold down the Shift key and combine objects by clicking or dragging a box in the workspace. Each new selection will be combined with the previous one. This method is very convenient for creating groups and in combination with deep selection.
Selecting the Covered Layer
Sometimes there are situations when a layer is completely covered by another and it is impossible to select it in the working area. You can only dig through the layers panel. In this case, simply right-click on the area where the invisible layer is located and choose Select Layer from the dropdown menu, then click on the name of the layer you need.
Another option: hold down Ctrl and right-click on the overlapping area of the layer. Instead of the context menu, a list of layers will appear immediately, which is significantly faster than the previous method.
These selection methods also work for locked layers, but not for invisible ones!
Locking and Hiding Layers
Sometimes you have to work exclusively on one interface element, and accidentally selecting other layers just gets in the way. In such cases, it is useful to lock or hide some part of the design. To do this:
- Select the necessary layers;
- Hover the cursor over the selected objects in the workspace or layers panel;
- Invoke the context menu with the right mouse button;
- Select Lock/Unlock to lock or Show/Hide to hide the layer;
- If you hover the cursor over the layer in the panel, action icons will appear to the right of it: click on the lock to lock/unlock or on the eye to hide/show the layer;
- But it's better to use hotkeys: to lock – Shift+Command+L on MacOs or Shift+Control+L on Windows; to hide – Shift+Command+H on MacOs or Shift+Control+H on Windows;
- Unlocking and showing hidden layers is done similarly, but you should select them in the layers panel.
Copying, Cutting, and Pasting a Layer
To copy an object, select it and press Command + C on MacOS or Ctrl + C on Windows.
To cut an object, select it and press Command + X on MacOS or Ctrl + X on Windows.
To paste, select an object or deselect everything and press Command + V on MacOS or Ctrl + V on Windows.
Copying, cutting, and pasting objects, commands that are so familiar in other programs, can confuse some beginners in Figma. The thing is, the position where the object will be pasted depends on the currently selected type of object (primitive or group) and the level of nesting it is in. Let's look at some examples:
- If nothing is selected, the paste will occur in the same location where the copied object was;
- If you select a group or a primitive inside a group, the paste will occur in the center of that group;
At first, this behavior may seem strange, but once you understand how it works, you will get used to it over time. Watch the video and pay attention to which type of object is selected before pasting and how that affects the paste position.
Another important point: in the layers panel, the pasted object always appears above or below the selected object (which is also somewhat strange, because in other similar programs, pasting always occurs above the selected layer).
Inserting at the position of another object
The position of any Figma object is considered to be its top-left corner. To make the paste position more predictable, simply select the object after copying or cutting and press Shift+Command+V on MacOs or Shift+Ctrl+V on Windows. The new object will be pasted neatly at the top-left corner of the selected layer.
Layer Names
Bringing order and clarity to the chaos that occurs within any large project cannot be achieved through grouping alone. A well-thought-out naming system is necessary. This takes extra time, but will save nerves when searching for the required layer, and the frontend developer will say thank you.
Renaming Layers
To rename a layer you need to:
- Select the desired object on the workspace or layers panel and press Command + R on MacOs or Ctrl + R on Windows;
- Change the name of the layer;
- Press Enter to save the changes;
- You can also double-click the layer name on the panel to enter edit mode.
To rename a group of layers you need to:
- Select multiple layers;
- Press Command + R on MacOs or Ctrl + R on Windows;
- In the Rename to field, enter the new name and press Enter.
Give meaningful names
Names should be understandable not only to you but also to the developers who will work with your design. If you are working with a foreign company, the names must be exclusively in English. If you do not know how to translate something, use Google Translate.
It is better to use names without spaces, and instead use a minus sign or an underscore. The reason is that some layers will eventually be exported into resource files by developers. For them, it is more convenient to adhere to such rules in file names.
Here is a small list of typical layer names to give you an idea:
- Header
- Footer
- button_cta
- modal-export
- Icon_Reload
- img_banner
By no means do I forbid you to name layers however you want; adapt to the needs of your project and team. This is just advice for beginners.
Image Import
Photographs and illustrations can be used not only as a component of design but also as examples to refer to before starting work. Let's consider a few terms that we have already encountered in the second lesson.
References and Mood Boards
Reference, references (from English reference – recommendation, standard, hint, link) – one or several examples of images provided by the client to show what they want to achieve as a result of your work. A reference may relate not to the entire website but only to a specific aspect. For example, there may be a request to make the colors like in the first reference, the header structure – like in the second, and the navigation menu of the mobile version – like in the third. References accompany the technical task and make it clearer. A reference can be not only an image but also a link to a website or even a photo/video.
Mood Board (from English mood board – mood board) – is a collection of images compiled by the designer to show the client and get a general impression at an early stage, even before starting the work. With the help of such collections, we try to understand the client's taste and preferences. The best examples from the mood board can later be used as a starting point for the design. As in the case of references, images for the mood board can include designs of other websites, photographs (as examples of successful color combinations), illustrations, fonts, color palettes, and so on.
There are special free services for creating mood boards: Milanote, Pinterest. But don't rush to register there; for now, the capabilities of Figma will be sufficient.
Import from Clipboard
To work with references and create mood boards, we need to somehow insert images directly into the workspace. Figma has several mechanisms for this. Let's start by getting acquainted with the simplest one. To insert an image, you need to:
- Find any image in the browser;
- Right-click on it to bring up the context menu;
- Select the Copy Image command, which will cause the browser to copy the image to the clipboard;
- Go back to Figma;
- Press Command + V on MacOS or Ctrl + V on Windows to paste the image from the clipboard;
- Note that if the image turns out to be large, when pasted, it will cover the entire workspace. Don't be alarmed, just resize the image;
- Next, you can work with the image as you would with a rectangle: change its position, size, etc.
Figma has limits on pasting large raster images: if the width or height of the image exceeds 4096 pixels, the pasted object will be automatically scaled down to the specified dimensions.
Import from file
Sometimes graphic resources are sent in archives or the files are already on your computer. Just drag the image file to the Figma workspace, as shown in the video. The position of the inserted image will depend on where you release the left mouse button after dragging – the center of the image will be under the cursor.
Eyedropper Tool
Eyedropper or Eyedropper Tool or Color Picker – allows you to read the color from any primitive and assign it to the selected object. Very useful for selecting a color palette based on images. We already know how to copy the color value from one object and paste it into another. But there is a faster way.
Quick Color Assignment
To quickly copy a color, simply:
- Select one or more objects that need to be repainted. If it has a fill or stroke, the color will be replaced. If the object has both a fill and a stroke, only the fill color will be replaced;
- Press the I key or Ctrl+C to activate the eyedropper;
- Hover the cursor over the area of the workspace from which you want to read the color. Note the magnifying circle with a pixel grid in the upper right corner that appears for your convenience;
- Just click the left mouse button to confirm;
- If the selected object contains a fill color and a stroke and you want to change the stroke color using the eyedropper, you need to click on the stroke color to invoke the color selection window and only then call the eyedropper.
Precise Positioning
Figma has a very convenient tool for precise positioning that shows the distance between objects. To use it:
- Select the object you want to adjust precisely;
- Hold down the Option key on MacOs or Alt key on Windows;
- Hover the cursor over another object to see the distance in pixels;
- Simultaneously adjust the position of the selected object using the arrow keys.
How to Share a Project
Let’s agree that from now on, all homework assignments will be sent as a link. For this, Figma has a Share button in the upper right corner. Instructions:
- Click Share;
- Make sure that in the Who has access section, the setting is Anyone. This means that anyone will be able to view your file if you send them the link. This setting is usually the default in drafts;
- Click Copy link to copy the link to the clipboard;
- Now send the link to the person you want to share your file with. Access will be view-only: anyone who follows the link will not be able to make any changes.
Due to the large influx of those eager to take the course, I am making homework checks paid. $30 (at the current exchange rate), I will transfer 10% to the Armed Forces of Ukraine. For one donation, I will check homework for all lessons.
For details, write to the direct message of Instagram @frusia.pro
The course and lessons remain free of charge.
Homework is no longer checked for citizens of Russia.
- Refer to the file with the first and second tasks from the last lesson and organize it: group and rename layers (come up with meaningful names) so that it is easy to navigate;
- Visit the website Behance (where designers share their work), scroll through the page until you find illustrations (do not confuse with photographs). Illustrations (see the example in the video from the previous section "How to share a project") are perfect for us because it is easier to extract the main colors from them. Copy five images that you like (to make the Copy Image command available, you need to click on the work first, it will enlarge). For each image, draw 4-8 circles of the same size and paint them in the key colors of the illustration (use the eyedropper);
- Enter the search query "UI web app" in the Behance search bar. Try to find a simple website design and redraw it as detailed as you can (ignore what you cannot reproduce yet). Replace illustrations and photos with your own, look for them on the website Unsplash;
- Practice your astonishment. Go to the website Awwwards and browse the websites listed there for at least 10 minutes a day – this is where the best examples of web design are collected. You can also use this site for the preliminary task;
- Advanced difficulty task (optional). Draw one page from any two websites that you find on Behance or Awwwards.
During the execution of these tasks, use groups and hotkeys. Try to practice as many techniques from this lesson as possible. Pay special attention to amazement, do not miss this important exercise.
Today we continued to get acquainted with new techniques for effective work. And although now you know much more, this is not enough for full-fledged work.
Be patient, complete all homework assignments, and review old lessons from time to time. Keep practicing and gaining experience. Think about how much easier it would be to complete the homework from the previous lesson if you knew all the techniques we learned today.
Follow me on Instagram @frusia.pro, stay updated on announcements of new lessons, watch homework checks in stories, ask questions, and also look forward to many useful posts about design.
Continue learning
