Lesson 5. Groups. Layers. Pipette. Image import

Модуль 2. Основи Figma.
Free UX / UI design course for a newcomer

We continue our acquaintance with the basics of Figma. Today we'll learn new tricks for working with layers, including selection, moving, grouping, locking and hiding.

Let's learn how to insert a bitmap image into a project and learn how to work with a new tool - an eyedropper that reads colors from images and other objects.

The last section with new commands deals with setting exact distances between objects, which is important in the future when working with meshes.

This tutorial expands our designer's arsenal with new tricks that speed up and simplify the design process. For example, it's hard to imagine working on a large project without grouping layers.

Groups

Doing the homework from the last lesson, you will definitely encounter the problem of managing layers. For example, any button consists of: a rectangle (defining borders) and a text block (explaining what this button does). To move a button, you will first have to select each of its components. But what if you want to move the top of the site with a navigation menu that consists of 5 text elements? This will take some time. You will encounter such micro-tasks all the time.

To solve this problem, there are groups that allow you to work with several objects as if with one layer.

For example, a rectangle and a text block can be combined into one group by meaning – it will be a button. This is very convenient and significantly speeds up the work.

Group — this is a special layer that contains other layers and is designed to combine and simplify further work with them. The group works with a large number of layers, as with one.

Creating and deleting a group

Suppose we want to combine several primitives that make up a button into a group. For this:

  1. Let's use the technique from the last lesson, holding down the left mouse button from the top left and dragging it to the bottom right corner, thereby selecting all the primitives from which the button is built at once. The selected layers will be highlighted in the panel on the left;
  2. Press the right mouse button over any of the button components and select Group Selection from the drop-down menu. A hotkey combination is also available for quick merging: Command + G on MacOs or Control + G on Windows;
  3. Please note that in the layers panel, instead of two selected primitives, one layer has appeared with a new icon and the name Group 1 – this is our button;
  4. Now you can work with the button like with a normal layer: move, scale, duplicate and so on without having to select each layer;
  5. To break a group back into its components, select the button and select 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 can see, once a group is created, its contents are automatically hidden. This state is called a collapsed group. To show all the content, the group needs to be expanded:

  1. Move the cursor inside the layers panel. To the left of each group, a small triangular arrow will appear pointing to the right;
  2. Click on the arrow, the contents of the group will become visible. The arrow will turn down, signaling the expanded state;
  3. To collapse the content again, click the arrow again.



Nested groups

Groups can contain other groups. To do this, just select several layers with a group and make another group. The layer that is inside the group is called the child. The group layer that contains the other layers is called the parent.

Why would you need it? All with the same goal: for convenient and fast work. Consider an example. Several buttons and a logo with a background can be combined into a so-called site header (in English – header, read hede) – a design element that is repeated on all pages and usually contains quick navigation aids. In Figma's eyes, it's just a group with other nested groups.

So, if we need to move the buttons inside the header of the site, then we can expand the corresponding group and work with the group of each button.




Regroup

Sometimes you may need to move a layer from one group to another or add new layers to a group.

To do this, just drag the layer to the desired group in the – and he will instantly be inside. You can also drag a layer to the desired location between layers within an expanded group. If the layer needs to be removed from the group, then it must be dragged to the area above the group or below it, as shown in the video:




Select layers

We already know how to select objects by clicking on them in the workspace or on the layers panel. Also, we know how to select several layers using a frame by holding the left mouse button in the workspace. Now let's get acquainted with the new tricks and learn how to select nested layers without expanding the group.

Select nested layer

Let's go back to the website header example. To select a button, just double-click on it, which will automatically expand the top group.

To go down the nesting tree and select the button label, just make one more double click. As you already understood, double-clicking allows you to select objects one nesting level below the current one.

Double-clicking speeds up selection when working with nested layers and much faster than manually expanding groups. But what if there are more than one nesting level? After all, you will have to do a few double clicks. To select an object at the lowest nesting level, just hold down Command on MacOs or Ctrl on Windows and click on the – this is called deep selection.




Select multiple layers (new way)

Hold the Command button on MacOs or Ctrl on Windows and click on the layers one by one in the left pane. Hold down the Shift key and select objects with a click or a frame in the workspace. Each new selection will be merged with the old one. This method is very useful when creating groups and in combination with deep selection.




Selecting a range of layers

If you hold down the Shift button and select two layers in the panel on the left, then you will also select all the layers that are between the extreme layers.




Selecting the overlay

Sometimes there are situations when a layer is completely covered by another and it cannot be selected on the stage. It remains only to delve into the layers panel. In this case, it is enough to right-click on the area where the invisible layer is located and select Select Layer, from the drop-down menu and then click on the name of the layer you need.

Alternatively, hold down Ctrl and right-click on the layer's overlap area. Instead of the context menu, a list of layers will immediately appear, which is much faster than the previous method.

These selection methods work for locked layers too, but not for invisible ones!




Deselecting

To deselect the workspace, hold down Shift and click on the desired object or use the frame.

To deselect an object via the layers panel, click on the selected object while holding down the Command key on MacOs or Ctrl on Windows.




Working with layers

We continue to get acquainted with new tricks for manipulating layers. Locking and hiding will help you focus on the right part of the page, and other commands will help you perform routine operations faster.

Lock and hide layers

Sometimes you're working exclusively on one UI element and randomly highlighting other parts of your design just gets in the way. In such cases, it is useful to block or completely hide some of the layers. For this:

  1. Select the desired layers;
  2. Move the cursor over the selected objects in the work area or in the layers panel;
  3. Right-click context menu;
  4. Select Lock/Unlock to lock or Show/Hide to hide the layer;
  5. If you hover over a layer in the layers panel, action icons will appear to the right of it: click on the lock to lock/unlock the layer or on the eye to hide/ show it;
  6. But it's better to use hotkeys: block – Shift + Command + L on MacOs or Shift + Control + L on Windows; hide – Shift + Command + H on MacOs or Shift + Control + H on Windows;
  7. Unlock and show hidden layers in the same way, but they should be selected, for obvious reasons, in the layers panel.


Copy, cut and paste 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 or deselect the object altogether and press Command + V on MacOs or Ctrl + V on Windows.

Copying, cutting and pasting objects, such commands familiar to other programs, some newcomers to Figma are perplexed. The fact is that the position where the object will be inserted depends on what type of object is currently selected (primitive or group) and at what nesting level it is located. Consider everything with examples:

  • If nothing is selected, then the insertion will occur in the same place where the original object is located;
  • If you select a group or primitive within a group, then the insertion will occur in the center of this group;

At first, this behavior seems strange, but if you understand how it works, then over time you will get used to it. Watch the video, pay attention to what type of object is selected before pasting and how this changes the insertion position.

Another important point: in the layers panel, the pasted object is always above or below the selected object (which is also somewhat strange, since in other similar programs the paste is always above the selected layer).




Insert at the position of another object

The position of any object in Figma is its upper left corner. To make the insertion position more predictable, after copying or cutting, select the object and press Shift + Command + V on MacOs or Shift + Ctrl + V on Windows. The new object will be inserted neatly in the upper left corner of the selected layer.




Layer names

To streamline and make clear the chaos that occurs in the depths of any large project cannot be fixed by one grouping. You need a good naming system. This takes extra time, but then it will save you the nerves when finding the right layer and the frontend developer will thank you.

Renaming layers

To rename a layer is enough:

  1. Select the desired object on the stage or in the layers panel and press Command + R on MacOs or Ctrl + R on Windows;
  2. Change layer name;
  3. Press Enter to save changes;
  4. You can also double click on the layer name in the layers panel to enter edit mode.

To rename a layer group:

  1. Select multiple layers;
  2. Press Command + R on MacOs or Ctrl + R on Windows;
  3. In the Rename to field, enter a new name and press Enter.



Give meaningful titles

The names should be clear not only to you, but also to the developers who will work with your project in the future. If you work with a foreign company, then the names must be set exclusively in English. If you don't know how to translate something, use Google Translate.

Names should be given without spaces; for separators, use a minus sign or underscore. The fact is that in the future, some layers will be exported to resource files by developers. And for them it is more convenient to set just such 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

No one forbids you to name layers the way you want, adjusting to the needs of your project and team. This is just a parting word for a beginner.

Import images

Photos and illustrations can be used not only as an integral part of the design, but also as examples that you should focus on before starting work. Let's take a closer look at a few of the terms we've already encountered in Lesson Two.

References and moodboards

Reference, references (from English reference – recommendation, standard, hint, link) — one or more sample images that the customer provides to show what he wants to get as a result of your work. The reference may not refer to the entire site, but only to some specific aspect of it. For example, colors will be asked, as on the first site, the header structure – as on the second, the navigation menu of the mobile version of – like the third one. References accompany the terms of reference and make it more understandable. The reference can be not only an image, but also a link to a website or even a photo/video.

Moodboard (from English mood board – mood board) — this is a selection of images that a designer compiles in order to show the customer and get feedback at a very early stage, even before work begins. With the help of such selections, we try to feel the taste of the client, to understand his preferences. The best instances from the moodboard can later be used as a starting point for the design (as references). As in the case of references, images for a moodboard can be designs from other sites, photographs (as examples of successful color combinations), illustrations, fonts, color sets, and so on.

There are special free services for creating moodboards: Milanote, Pinterest . But do not rush to register there, for a start we will have enough Figma features.

Moodboard

Import from clipboard

In order to work with references and create moodboards, we need to somehow insert images directly into the workspace. Figma has several mechanisms for doing this. First, let's get acquainted with the simplest of them. To insert an image you need:

  1. Find any image in the browser;
  2. Right click on it to bring up the context menu;
  3. Select the Copy Image command, which will cause the browser to copy the image to the clipboard;
  4. Switch back in Figma;
  5. Press Command + V on MacOs or Ctrl + V on Windows to paste the image from the clipboard;
  6. Please note that if the image is large, then when you paste it, it will cover the entire workspace. Do not be afraid of this, just zoom out the image;
  7. Further on, you can work with the image as with a rectangle: change the position, size, and so on.

Figma has a restriction on inserting large bitmaps: if the width or height of the image exceeds 4096 pixels, then the inserted object will be automatically scaled to the specified values.




Import from file

It happens that graphic resources are sent in archives or the files are already on your computer. It is enough to drag the image file onto 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.




Pipette tool

Pipette or Eyedropper Tool or Color Picker – allows you to read a color from any primitive and assign it to the selected object. Very useful for color matching based on images. We already know how to copy a color value from one object and paste it into another. But there is a faster way.

Quick color assignment

For quick color copying, enough:

  1. Select one or more objects to be recolored. If it has a fill or stroke, then its color will be replaced. If an object has both a fill and a stroke, then only the fill color will be replaced;
  2. Press the I or Ctrl + C button to activate the pipette;
  3. Place the cursor on the workspace point from which you want to read the color. Note the pixel grid magnifying circle in the upper right corner that appears for your convenience;
  4. It remains to click the left mouse button to confirm;
  5. If the selected object contains a fill color and a stroke, and you want to change the stroke color using the eyedropper, then you need to click on the stroke color to bring up the color picker and only then call the eyedropper.



Assigning color to image pixels

To read colors from images, just follow the same sequence of steps as in the previous section. See how quickly you can match colors this way.




Precise positioning

Figma has a very handy precision positioning tool that shows the distance between objects. To use it:

  1. Select the object you want to fit exactly;
  2. Hold down the Option button on MacOs or Alt on Windows;
  3. Hover over another object to see the distance in pixels;
  4. Simultaneously change the position of the selected object using the arrow buttons.



How to share a project

Let's agree that you will now send all your homework as a link. To do this, Figma has a Share button in the upper right corner. Do the following:

  1. Click the Share button;
  2. Click on Only people invited to this file;
  3. In the drop-down list, select Anyone with the link to make the file linkable;
  4. Click on Copy link to copy the link to clipboard;
  5. Now send the link to the person you want to share your project with. Access will be only for viewing: anyone who follows the link will not be able to change anything.



Homework

  1. Go back to the file with the first and second task from last lesson and clean up: group and rename the layers (give meaningful names), to make them easier to navigate;
  2. Go to Behance (where designers share their work), scroll until you find illustrations (not to be confused with photographs). Illustrations (see an example in the video from the previous "How to share a project" section) are ideal for us, as they are easier to highlight the primary colors from. Copy yourself 5 pictures that you like (for the Copy Image command to become available, you must first click on the work, it will increase). For each picture, draw 4-8 circles of the same size and color them in the key colors of the illustration (use an eyedropper);
  3. Type "UI web app" into the Behance search bar. Try to find a simple website design and redraw it in as much detail as you can (ignore what you can't recreate yet). Replace illustrations and photos with your own, look for them on the website Unsplash;
  4. Train your eyesight. Visit Awwwards and browse the sites hosted there for at least 10 minutes a day – here are some of the best examples of web design. You can also use this site for the previous assignment;
  5. A task of increased complexity (optional). Draw any page from the other two sites you find on Behance or Awwwards.

Use groups and hotkeys during these tasks. Try to practice as many of the tricks from this lesson as possible. Pay special attention to observation, do not skip this important exercise.

Conclusions

Today we continued to learn new tricks for effective work. And although now you know much more and will feel freer, this is not enough for a full-fledged work.

Be patient, do all your homework, and reread old lessons from time to time. Keep practicing and gaining experience. Think about how much more convenient it would be to do the homework from the previous lesson if you knew all the tricks from this one.

Follow me on Instagram - @frusia.pro - stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.

Stay tuned!

Figma Design education




Leave the first comment. Start a discussion




Cookie Policy

Frusia.pro uses cookies for personalization and ensuring the proper functioning of the site. By continuing to use this site, you confirm your agreement to use cookie files. If necessary, familiarize yourself with the terms of terms of their processing .