Lesson 8. Groups. Layers. Pipette. Image import

Module 2. Figma basics.
Free UX / UI design course for a newcomer

To start learning, take tests and track progress, you need to enroll in the course. It's free.

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 you to read the color code from images and shapes.

The last section with new commands concerns setting precise distances between objects, which is important later when working with grids.

This lesson expands our designer arsenal 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

While completing the homework from the last lesson, you must have encountered the problem of managing layers. For example, any button consists of a rectangle (defining the boundaries) and text (which explains what this button does). To move the button, you will have to select each of its components first. And what if you want to move the top part of the site with the navigation menu, which consists of 5 text elements? That will take more time. You will constantly encounter such micro-tasks.

To solve this problem in Figma, there are several methods: using groups, frames, or auto-layouts. For now, we will consider the simplest option, which is 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:

  1. We will 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, thus selecting all the primitives that make up the button. The selected layers are highlighted on the left panel;
  2. Right-click on any of the button components and select Group Selection from the menu. A keyboard shortcut for quick grouping is also available: Command + G on MacOS or Control + G on Windows;
  3. 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;
  4. Now you can work with the button like a regular layer: move, scale, duplicate, and so on without the need to select each layer individually;
  5. 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:

  1. Hover over the layers panel. A small triangular arrow pointing to the right will appear on the left opposite each group;
  2. Click on the arrow and the group content will become visible. The arrow will turn downwards, indicating the expanded state;
  3. To collapse the content again, click on the arrow once more.



Nested Groups

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

Why might this be necessary? For the same purpose: for convenient and quick work. Let's consider an example. Several buttons and a logo with a background can be combined into a so-called site 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 simply a group with other nested groups.

So if we need to move the buttons inside the site 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 add new layers to a group.

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 a 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 the Nested Layer

Let's return to our example with the site header. To select the button, simply double-click on it, which will automatically expand the top group.

To go further down the nesting tree and select the text on the button, just double-click again. As you may have understood, double-clicking 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 levels 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.




Selecting Multiple Layers (New Method)

Press the Command button on MacOs or Ctrl on Windows and click on the layers one by one on the left panel. Hold down the Shift key and combine objects by clicking or dragging a frame 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 Layer Range

If you hold down the Shift key and select two layers in the left panel, all layers that fall between them will be automatically selected.




Selecting a Covered Layer

Sometimes situations arise where a layer is completely covered by another and cannot be selected in the workspace. The only option left is to dig through the layers panel. In this case, simply right-click on the area where the invisible layer is located and from the dropdown menu select Select Layer, and then click on the name of the layer you need.

Another option: hold Ctrl and right-click on the layer's overlapping area. Instead of a context menu, a list of layers will appear immediately, which is significantly faster than the previous method.

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




Removing Selection

To remove a selection in the workspace, press Shift and click on the desired object or use the bounding box.

To deselect an object through 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 techniques for manipulating layers. Locking and hiding will help focus on the desired area of the page, while other commands will help perform repetitive operations faster.

Locking and Hiding Layers

Sometimes you need to work exclusively on one interface element, and accidentally selecting other layers can be distracting. In such cases, it is helpful to lock or hide some part of the design. To do this:

  1. Select the necessary layers;
  2. Hover the cursor over the selected objects in the workspace or layers panel;
  3. Invoke the context menu with the right mouse button;
  4. Select Lock/Unlock to lock or Show/Hide to hide the layer;
  5. If you hover the cursor over a layer in the panel, icons for actions will appear to the right of it: click on the lock to lock/unlock or on the eye to hide/show the layer;
  6. 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;
  7. Unlocking and showing hidden layers are done similarly, but they should be selected 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 completely remove the selection and press Command + V on MacOs or Ctrl + V on Windows.

Copying, cutting, and pasting objects, commands that are familiar from other programs, can surprise some beginners in Figma. The thing is, the position where the object will be pasted depends on the currently selected object type (primitive or group) and the level of nesting it is at. Let's look at some examples:

  • If nothing is selected, the paste will occur in the same location where the copied object was;
  • If a group or primitive inside a group is selected, the paste will occur at the center of that group;

At first, this behavior may seem strange, but once you understand how it works, you'll get used to it over time. Watch the video, pay attention to which type of object is selected before pasting and how this 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 insertion 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 inserted neatly in the top left corner of the selected layer.




Layer Names

Bringing order and making clear the chaos that occurs in the depths of any large project cannot be achieved with grouping alone. A thoughtful naming system will be required. This takes additional time, but will save nerves later when searching for the needed layer, and the frontend developer will say thank you.

Renaming Layers

To rename a layer, you need to:

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

To rename a group of layers, you need to:

  1. Select multiple layers;
  2. Press Command + R on MacOs or Ctrl + R on Windows;
  3. 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 don't know how to translate something, use Google Translate.

It's better to set names without spaces, using a hyphen or underscore instead. The reason is that some layers will later be exported into resource files by developers. For them, it's more convenient to adhere to such rules in file names.

Here's a small list of typical layer names to give you an idea:

  • Header
  • Footer
  • button_cta
  • modal-export
  • Icon_Reload
  • img_banner

In no way do I forbid you to name layers as you wish; 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 the design but also as examples to refer to before starting work. Let's consider a few terms we have already encountered in the second lesson.

References and Mood Boards

Reference, references (from English reference – recommendation, benchmark, 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 site but only to some 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 to the client and get a general impression at an early stage, even before starting work. Through 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 process. As with references, images for the mood board can include designs from other websites, photographs (as examples of successful color combinations), illustrations, fonts, color sets, 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 enough for us.

Moodboard

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. First, let's get acquainted with the simplest one. To insert an image, you need to:

  1. Find any image in your browser;
  2. Right-click on it to bring up the context menu;
  3. Select the Copy Image command, which will make the browser copy the image to the clipboard;
  4. Go back to Figma;
  5. Press Command + V on MacOs or Ctrl + V on Windows to paste the image from the clipboard;
  6. Note that if the image turns out to be large, when you paste it, it will cover the entire workspace. Don't be alarmed, just reduce the image;
  7. You can then work with the image like a rectangle: change its position, size, etc.

Figma has limitations on pasting large raster images: if the width or height of the image exceeds 4096 pixels, the inserted object will be automatically scaled to those dimensions.




Import from File

Sometimes graphic resources are sent in archives or the files are already on your computer. Just drag the image file into 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 picture 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 choosing 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:

  1. Select one or more objects that need to be recolored. If it has a fill or stroke, its color will be changed. If the object has both a fill and a stroke, only the fill color will be changed;
  2. Press the I key or Ctrl+C to activate the eyedropper;
  3. Hover the cursor over the point in 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;
  4. Just click the left mouse button to confirm;
  5. If the selected object contains both fill and stroke colors 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 invoke the eyedropper.



Pixel Color Assignment from an Image

To read colors from images, you just need to follow the same sequence of actions as in the previous section. See how quickly you can select a color palette this way.




Exact Positioning

Figma has a very convenient tool for exact positioning that shows the distance between objects. To use it:

  1. Select the object you want to align precisely;
  2. Hold down the Option key on MacOs or Alt on Windows;
  3. Hover the cursor over another object to see the distance in pixels;
  4. 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:

  1. Click Share;
  2. Check that the setting in the Who has access section is set to Anyone. This means that anyone will be able to view your file if you send them the link. Usually, this setting is the default in drafts;
  3. Click Copy link to copy the link to the clipboard;
  4. Now send the link to the person you want to share your file with. Access will be view-only: anyone who clicks the link will not be able to make any changes.



Homework

From now on, this course is designed for independent study and completing homework assignments. I understand that some tasks may be challenging for you.

For additional support, use the chat in Telegram. Here you can ask questions related to the lessons or view examples of correct completions from other students.

The chat is not available for citizens of Russia.

  1. 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;
  2. Go to the website Behance (where designers share their work), scroll through the page until you find illustrations (not to be confused 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 enable the Copy Image command, you need to click on the work first, it will enlarge). For each image, draw 4-8 circles of the same size and color them in the key colors of the illustration (use the eyedropper);
  3. 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 possible, as much as you can (ignore what you can't recreate yet). Replace illustrations and photos with your own, search for them on Unsplash;
  4. Practice amazement. Visit the website Awwwards and browse the sites posted there for at least 10 minutes a day – this site features the best examples of web design. You can also use this site for the preliminary task;
  5. Advanced difficulty task (optional). Draw one page from any two websites 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 the amazement; do not skip this important exercise.

Conclusions

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 that we learned today.

Follow me on Instagram @frusia.pro, stay updated on announcements of new lessons, watch homework checks in stories, ask questions, and you can also look forward to a lot 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

Leave a comment

Place the handle into the purple zone

Comments

скажена черепаха19 February 2024 11:56  
Дякую, ось виправила.
https://www.figma.com/file/nvSYfkq63m2kn0QDaZHriK/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-%D1%83-Frusia.Pro?type=design&node-id=34%3A2&mode=design&t=CTU6LFuBVSvEDDJa-1

Коментар frusia.pro:

Добрий вечір. Залишила розгорнуті коментарі у фігмі. Ви молодець, що внесли правки. Залишилось розібратись з останнім завданням)

скажена черепахаUkraine flag підтримує ЗСУ 16 February 2024 19:06  
Добрий вечір )
Не вдалося з Behance скопіювати зображення, довелося обмежитися прінтскрінами.

https://www.figma.com/file/nvSYfkq63m2kn0QDaZHriK/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-%D1%83-Frusia.Pro?type=design&node-id=34%3A2&mode=design&t=8S2paSPHPrMLDGzk-1

Коментар frusia.pro:

Привітики, скріншоти цілком підходять. Залишила коментарі у фігмі – деякі завдання потребують доопрацювань. Буду чекати на них!)

ВарвараUkraine flag підтримує ЗСУ 21 November 2022 00:53  
Дякую за зворотній зв'язок!) Ось, доповнила той екран)
https://www.figma.com/file/QIwTSpFf9pMvfRDCs0z1Rp/UX%2FUI-Frusia?node-id=160%3A48&t=btou1eAZmJYDIBsk-1

Коментар frusia.pro:

Тепер все добре. Переходьте до наступного уроку.

ВарвараUkraine flag підтримує ЗСУ 19 November 2022 16:31  
Добрий вечір!) Завдання були дуже цікавими та захоплюючими, з'явилась додаткова порція мотивації та ще більше бажання розвиватись в дизайні. Для виконання 5 завдання, навіть довелось встановити іспанську розкладку на клавіатуру)))
Ось домашнє завдання:
https://www.figma.com/file/QIwTSpFf9pMvfRDCs0z1Rp/UX%2FUI-Frusia?node-id=160%3A48&t=tt7iSvxAUUPmfaed-1

Коментар frusia.pro:

Завдання 1. Навести порядок в попередньому файлі.Переглянула шари, все підписано та зрозуміло. Порада на майбутнє – фігма має англомовний інтерфейс, так само як і в основі коду розробників – англійська. Підписуйте ваші шари у фігмі також англійською.

Завдання 2. Підбір кольорів до іллюстрації. Ви дуже стильні іллюстрації обрали, маєте гарний смак. Кольори підібрали правильно, молодець.

Завдання 3. Перемальовка сайту.. Ви обрали доволі обʼємну сторінку. Дуже непогано відтворили. Бачу ви обрали правильний розмір основного фрейму, що відповідає full-hd монітору по ширині. Також обираєте більш-менш вірні розміри картинок та шрифтів. Зверніть вашу увагу на блок "Testimonials" – ви напевно пропустили там іконку цитати, бо між заголовком та текстом великий відступ, а в оригіналі є ця іконка.

Завдання 5. Перемальовка ще двох концептів.. Ви обрали дуже цікаві ідеї. Я рада, що вам сподобались усі завдання та ви навіть почали освоювати іспанську:) До речі вийшло майже ідентичним до оригінальних екранів сайтів. А вміння підбирати нестандартні шрифти згодиться вам у майбутньому.

Yuliya LepenkoUkraine flag підтримує ЗСУ 18 September 2022 22:56  
Вітаю:)
Дякую за зворотній зв'язок. Виправила)

https://www.figma.com/file/xSk0BHiIjCZakBmALVRkmP/icons?node-id=41%3A18

Коментар frusia.pro:

Привіт! Так, тепер все супер Усі прошарки названо за одним правилом, молодець!

Yuliya LepenkoUkraine flag підтримує ЗСУ 12 September 2022 20:23  
Добрий вечір:)

Під час виконання дз5 виникли складнощі з копіюванням картинок з Behance. Через Copy Image, вставлялось посилання на саме зображення:( довелося через F12 і виділення проводити махінації, щоб використати картинки для виконання 2 завдання.

https://www.figma.com/file/xSk0BHiIjCZakBmALVRkmP/icons?node-id=73%3A264

Коментар frusia.pro:

Добрий вечір

Завдання 1. Навести порядок у файлі попереднього уроку. Бачу, що ви все погрупували, але маю зауваження до того, як саме ви підписуєте прошарки. Намагайтесь дотримуватись одного правила, а саме: кожне слово з великої літери, розділене пробілом. Ось як виглядають назви прошарків зараз у вас:

  • цена товара
  • подпись_товара
  • 2_3_полоски_Налаштування
  • 5 сторінка

А ось, як вони мають виглядати після застосування правила:

  • Цена Товара
  • Подпись Товара
  • Полоски Налаштування
  • 5 Сторінка

Завдання 2. Підібрати кольори. Тут все правильно, молодець!

Завдання 3. Перемалювати сайт. Хороша практика, ви дуже добре перемалювали досить великий сайт, хвалю! Зауважень тут не маю, все добре.

Завдання 5. Перемалювати ще два сайти. Тут також все добре, вийшло дуже схоже на оригінальні сайти. По кольорах і формі все ідеально, плюс самі шрифти дуже схожі, гарна робота.

Чудово попрацювали, але чекаю на виправлення до першого завдання

Юля К.Ukraine flag підтримує ЗСУ 4 August 2022 10:54  
Добрий день :)
Завдання 1:
https://www.figma.com/file/lgmsAkkSUVzybS6R47Sh6f/%D0%B4%D0%B7%2C-%D1%83%D1%80%D0%BE%D0%BA-4?node-id=0%3A1

Завдання 2 - 3
https://www.figma.com/file/4k8qH7JQgWgnqdvXJKmEka/%D0%B4%D0%B7%2C-%D1%83%D1%80%D0%BE%D0%BA-5?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Навести порядок у файлі попереднього уроку. Бачу погруповані екрани, а також елементи всередині них. Є змістовні назви, все супер!

Завдання 2. Підібрати кольори. Також правильно.

Завдання 3. Перемалювати сайт. Ви обрали дуже складний приклад, але справились досить добре! Маю декілька зауважень, будь ласка, виправіть їх:

  • У вас ширина екрану дизайну (фрейму) складає 4444 пікселі. Переробіть його на ширину 1920 пікселів (стандартний розмір для комп'ютерів зі стаціонарним монітором). Також допускається ширина 1440 пікселів для ноутбуків;
  • зверніть увагу на відступи, в деяких місцях вони відрізняються. Використовуйте точне позиціонування, щоб точно розставити елементи (дивіться передостанній розділ цього уроку). Записала відео, що показати, де відступи відрізняються:
    https://drive.google.com/uc?id=1eBECjxoyuxeBf6MS61U5TaGVTzyHPb9c

Чекаю на виправлення

Вікторія ГрищенкоUkraine flag підтримує ЗСУ 19 July 2022 21:30  
Добрий вечір!)
Завдання 1: https://www.figma.com/file/eO9DJ0Vn8gnkJmcM73fflM/%D0%A3%D1%80%D0%BE%D0%BA-4?node-id=0%3A1

Завдання 2, 3, 5: https://www.figma.com/file/gRfMDqNMcqUICl7HsAUXPX/%D0%A3%D1%80%D0%BE%D0%BA-5?node-id=0%3A1

Коментар frusia.pro:

Завдання 1. Навести порядок у файлі попереднього уроку. Бачу погруповані іконки, все ок. На майбутнє також старайтесь давати більш змістовні назви групам. Наприклад: "Icon Calendar", "Icon More" і так далі.

Завдання 2. Підібрати кольори. Також все добре.

Завдання 3. Перемалювати сайт. Ви перемалювали презентацію мобільного додатку на медичну тему. Все добре. Мені подобається, як ви використовуєте зображення з прозорим фоном.

Завдання 5. Перемалювати ще 2 сайти. Також все супер, особливо сподобався сайт про прикраси.

Гарно попрактикувались, переходьте до наступного уроку

ОльгаUkraine flag підтримує ЗСУ 6 July 2022 13:25  
Доброго дня!
Завдання 1, 2 https://www.figma.com/file/tTWDw17gu8GfM5WUW6WhyI/%D1%83%D1%80%D0%BE%D0%BA-5-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1-2

Завдання 3 https://www.figma.com/file/6U3vDEuJReuyaLOU5jxx3g/%D1%83%D1%80%D0%BE%D0%BA-5-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3

Завдання 5 https://www.figma.com/file/abf82q1ToprEsvKWQHo1e9/%D1%83%D1%80%D0%BE%D0%BA-5-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-5

Коментар frusia.pro:

Добрий день! Вибачте, пропустила вашу домашку. Якщо таке трапляється, то нагадуйте мені в Instagram

Завдання 1. Навести порядок у файлі попереднього уроку. Бачу погруповані прошарки та назви по змісту. Все супер!

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3. Перемалювати сайт. Чудово попрацювали, все дуже добре: правильні розміри, однакові відступи, молодець!

Завдання 5. Перемалювати ще два сайти. Ви обрали цікаві приклади. По темному дашборду маю декілька маленьких зауважень:

  • Коли малюєте для десктопу беріть ширину основного фрейму 1920 або 1440 пікселів. У вас 1741;
  • перевіряйте розміри та позицію елементів і уникайте дробної частини. У вас знайшла напис "Revenue", де Х=318.01 пікселі, а ширина=82.13 пікселі;

По світлій адмінці бачу лише проблему у тому, що у табличці немає відступів праворуч від номерів телефонів.

Хочу похвалити вас, дуже добре справились. Зробіть правки та переходьте до наступного уроку

Yana UsachovaUkraine flag підтримує ЗСУ 2 July 2022 15:53  
Добрий день! Дуже цікаві уроки дякую
https://www.figma.com/file/2Px8chcuhtqdFvWFU3eUgx/Lesson-5?node-id=0%3A1

Коментар frusia.pro:

Привіт! Рада, що урок був корисний

Завдання 1. Навести порядок у файлі попереднього уроку. Ви погрупували прошарки й дали змістовні назви. Старайтесь усе називати за одним правилом: кожне слово у назві прошарку повинно йти через пробіл з великої літери. Ось пару прикладів до/після використання правила:

  • picture – Picture;
  • glass – Icon Glass;
  • Menu_header – Menu header.

Іконки краще погрупувати окремо, а не рядами та дати змістовні назви.

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3. Перемалювати сайт. Бачу перший блок сайту про суші, добре справились! Щоб покращити макет наступного разу зверніть увагу на:

  • Відступи та розміри елементів. Намагайтесь дотримуватись так званої 8-піксельної сітки, тобто усі розміри діляться без остачі на 8 (у крайніх випадках 4). Ось приклади таких розмірів: 4, 8, 16, 24, 32, 40 пікселів і так далі. Тобто, наприклад, у вас висота хедеру зараз 77 пікселів, а за цим правилом буде 80 пікселів;
  • якщо вирівнюєте об'єкти по якійсь стороні, то робіть однакові відступи. У вас бачу напис "Magic Sushi" на відстані 375 пікселів від лівої сторони, а от текст нижче 388 пікселів.

Хочу порекомендувати вам у вільний час перемалювати ще декілька сайтів, вам потрібно більше практики, щоб набити руку. А в цілому ви готові переходити до наступного уроку

Марія СUkraine flag підтримує ЗСУ 29 June 2022 23:59  
https://www.figma.com/file/dWGWKQPPPZULkadAnpuvMX/Frusia?node-id=0%3A1

Коментар frusia.pro:

Добрий день!

Завдання 1. Навести порядок у файлі попереднього уроку. Бачу погруповані за змістом елементи. При виборі назви дотримуйтесь простого правила: усі слова з великої літери через пробіл.

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3. Перемалювати сайт. Чудова робота, вийшло дуже схоже. Маю одне зауваження: намагайтесь використовувати розміри й позиції елементів тільки з цілими числами. У вас іноді трапляються відступи з дробною частиною, наприклад, X: 305.67 пікселі.

Ви швидко просуваєтесь, можете переходити до наступного уроку

АннаUkraine flag підтримує ЗСУ 25 June 2022 23:00  
Сорри, надала доступ
Згрупувала та перейменувала прошарки:
https://www.figma.com/file/FGYebaPYrSfAFmQRpzZCjn/Untitled?node-id=0%3A1
Завдання 2,3
https://www.figma.com/file/Qc0rP7ISFNhzUkdohuD48E/Lesson-5.2?node-id=3%3A2

Коментар frusia.pro:

Привіт! Так, тепер є доступ

Завдання 1. Навести порядок у файлі попереднього уроку. Бачу погруповані прошарки і змістовні назви, все ок. Деякі назви можна покращити, але це приходить з досвідом, ось пару прикладів:

  • Main Selection – Navigation;
  • Advertising – Hero Banner;
  • Arrows – Pagination;
  • Icon 5 – Icon Checkbox і так далі.

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3. Перемалювати сайт. Добре попрацювали, молодець! Щоб ще покращити макет наступного разу зверніть увагу на такі моменти:

  • Дотримуйтесь однакових відступів ліворуч і праворуч від елементів, таких як хедер, інформаційні блоки й так далі;
  • старайтесь вирівнювати об'єкти по горизонталі. Так у вас, наприклад, текст "See it with your own eyes" розміщений значно нижче верхнього краю фотографій, що стоять праворуч;
  • уникайте зайвих ефектів, наприклад, тінь на стрілочці.

Чудова робота, рухайтесь до наступного уроку

БогданаUkraine flag підтримує ЗСУ 25 June 2022 15:38  
Вітаю!
Дяка за цікавий урок та насичені домашні завдання ;)

завдання 1 - трішки привела в порядок і погрупувала минулу домашку)
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=16%3A2
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=16%3A76

завдання 3 - цікаво було вигадвати способи. як намалювати іконки)) а ткож відкрила для себе цікавий функціонал фігми в плані створення кругової діаграми та лінійного фарбування))
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=107%3A14

оригінал роботи взяла тут: https://www.behance.net/gallery/123446431/Retax-CRM-System?tracking_source=search_projects%7CUI%20web%20app

Мирного дня та чудового настрою!

Коментар frusia.pro:

Привіт! Будь ласка, рада, що вам сподобалось

Завдання 1. Порядок бачу, все ок. Також можна підписувати і маленькі елементи, наприклад:

  • Vector 1 – Arrow;
  • Layer 2 – Icon Profile;
  • Vector 3 – Divider;
  • icon 5 – Icon Checkbox і так далі.

Завдання 2. Підібрати кольори. Все ок.

Завдання 3. Перемалювати сайт. Молодець, ви самостійно розібрались з еліпсом і лінійним градієнтом. Ви вибрали досить складний приклад з купою іконок і вийшло дуже добре. Відступи трохи гуляють (наприклад у іконок в лівому сайдбарі), але з часом ви це виправите.

Гарно попрацювали, переходьте до наступного уроку

АннаUkraine flag підтримує ЗСУ 24 June 2022 22:49  
Згрупувала та перейменувала прошарки:
https://www.figma.com/file/FGYebaPYrSfAFmQRpzZCjn/Untitled?node-id=0%3A1
Завдання 2,3
https://www.figma.com/file/Qc0rP7ISFNhzUkdohuD48E/Lesson-5.2?node-id=3%3A2

Дуже дякую!

Коментар frusia.pro:

Привіт!

Завдання 1. Навести порядок у файлі з домашкою попереднього уроку. Чомусь не відкривається файл за цим посиланням (File not found). Можливо ви не надали права доступу, перевірте будь ласка.

Завдання 2. Підібрати кольори. З другим файлом аналогічна проблема.

Чекаю на доступи до файлів

Ірина С.Ukraine flag підтримує ЗСУ 20 June 2022 20:41  
Добрий вечір! Надсилаю ДЗ до 5 уроку.
Для 3 завдання брала сайт з Awwwards. Ось посилання: https://home.payground.com/
Щодо дз, то 1 завдання зроблене на одній сторінці, а два інші на другій. Сторінки підписала для зручності.
Ось посилання на ДЗ:
https://www.figma.com/file/UbILOAqBg8rBOAnpGhnDdE/Homework-5?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Навести порядок у файлі минулого уроку. Бачу погруповані й названі в одній манері прошарки. Все добре. Можу порадити давати більш змістовні назви іконкам. Наприклад, замість Icon_5 назвати Icon_Checkbox.

Завдання 2. Підібрати кольори. Правильно.

Завдання 3. Перемалювати сайт. Все дуже добре, чудово попрацювали. Щоб ще покращити макет можу порадити для основного фрейму використовувати ширину 1440 пікселів, що відповідає ширині екрану ноутбука. Також старайтесь дотримуватись відстаней і розмірів, що кратні 8 пікселям (в крайніх випадках допускається 4). Тобто у вас будуть розміри й відстані 4, 8, 16, 24, 32 пікселів і так далі.

Все супер, продовжуйте навчання. Переходьте до наступного уроку

AлінаUkraine flag підтримує ЗСУ 18 June 2022 19:01  
Доброго дня.
https://www.figma.com/file/PHclzIyJi8yHW4T7Kyu4Vq/Untitled?node-id=0%3A1
https://www.figma.com/file/PHclzIyJi8yHW4T7Kyu4Vq/Untitled?node-id=51%3A16
https://www.figma.com/file/PHclzIyJi8yHW4T7Kyu4Vq/Untitled?node-id=51%3A77

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Навести порядок у файлі минулого уроку. Бачу погруповані об'єкти, що об'єднані у смислові одиниці, наприклад, хедер, банер. Щоб ще покращити навігацію всередині макету можна піти далі і також погрупувати більш мілкі елементи, до прикладу, кнопки. Також, можна групи називати за одним правилом. Я рекомендую давати назви через пробіл, кожне слово з великої літери. Але в цілому все добре і завдання зараховано.

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3. Перемалювати сайт. Нажаль, ви не дали посилання на оригінальний референс, тому не можу порівняти. Але з того, що я бачу можу дати декілька порад:

  • Для кожного текстового елементу робіть окремий об'єкт. У вас я бачу один текстовий блок у якому є 3 тексти з різним розміром;
  • обирайте ширину основного фрейму стандартною: 1920 пікселів для десктопу (звичайний монітор) або 1440 – для ноутів. У вас аж 2940 пікселів

В цілому добре попрацювали, можете переходити до наступного уроку

Анна СмірноваUkraine flag підтримує ЗСУ 8 June 2022 17:08  
Доброго дня!
Надсилаю дз)
Спочатку зробила саме веб-ап, потім подумала, що зробила щось не те та відтворила сайт повністю з Біхансу (цей: https://www.behance.net/gallery/137142391/Jart-E-commerce-redesign/modules/775757569) тільки замінила кольори


https://www.figma.com/file/OhlRgx8GxhFCXHhMY1YB12/Untitled?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Навести порядок у завданні попереднього уроку. Бачу, що все погруповано і названо. Все добре, але щоб ще підвищити ваш рівень, намагайтесь все підписувати однією мовою, краще англійською. Також використовуйте одні і ті правила написання назв прошарків. Звичайно дотримуються такого правила: кожне слово з великої літери через пробіл. Наприклад: Header, Hero Banner, Footer.

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3. Перемалювати сайт з Behance. Ви обрали досить складний приклад, а справились дуже добре. Детально промалювали усі іконки, видно що добре розібрались з основними інструментами, особливо сподобалось використання еліпса. Також використали ефекти, які ми не проходили, а саме Layer Blur для імітації тіні карточки. Бачу, що ілюстрація растрова, але не можу тут робити зауваження, бо звичайно їх малює графічний дизайнер або зображення качається зі стоків.

Завдання 5. Перемалювати ще два сайти з Behance або Awwwards. Гарно справились, підібрали хороші фото на заміну і змінили акцентний колір і лого. Молодець! Пару дрібниць, які можна покращити:

  • При масштабуванні іконок затискайте Shift, щоб зберегти пропорції. У вас так постраждала іконка пошуку;
  • не використовуйте шрифт з розміром менше 12 (є у футері);
  • слідкуйте, щоб розміри примітивів і відстані були цілими числами без дробної частини (іконка пошуку).

В цілому дуже добре, продовжуйте навчання

ІннаUkraine flag підтримує ЗСУ 1 June 2022 20:12  
Добрий день, надсилаю Вам домашнє завдання зі всіма завданнями. https://www.figma.com/file/XYZ6aP1DHtKQS4CZdO4dda/Lesson-5?node-id=5%3A54

Дякую!

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Навести порядок у домашці попереднього уроку. Бачу погруповані прошарки за змістом. Все дуже добре. Назви груп також дуже змістовні: в уроках про це не писала, але вам відомий термін Hero block/section.

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3 і 5. Перемалювати сайти. Чудова робота, шрифти вдало підібрані, замінені фотографії добре вписались. Є маленький нюанс по відстанях між об'єктами: намагайтесь дотримуватись чисел, які діляться на 8: 8, 16, 24, 32, 40, 48, 56, 64 пікселі і так далі. Якщо треба можна застосувати 4 і 2 пікселі. Наприклад, у вас на сторінці «Website 1» між заголовком "OUR MODEL" і фотографією вище відстань 129 пікселів. Її в ідеалі треба виставити в 128 пікселів, тому що це число ділиться на 8 без останку. Аналогічно можна пройтись по іншим відстаням та розмірам об'єктів.

У вас дуже добре виходить, продовжуйте навчання

Alona HurUkraine flag підтримує ЗСУ 29 May 2022 14:44  
І стосовно проблем, то в Завданні 3 не змогла встановити саме той шрифт який в референсі, з тінями проблеми і вже після того як зробила домашку побачила в чийомусь домашньому ваше зауваження - що шрифти, здається, менше 10 не використовуємо, так як важко читати, на жаль, побачила запізно.

Коментар frusia.pro:

Нічого страшного, шрифт прям один в один важко підібрати, якщо ви точно не знаєте як він називається, тому просто схожого шрифту більш ніж достатньо.

Тіні ми ще не проходили, так що не засмучуйтесь, це дрібниця.

Дійсно, шрифти менше 12 не треба використовувати, але у вас вони всередині мокапу смартфону, так що це нормально. Тому що ви по суті перемалювали презентацію Behance, а не дизайн мобільного додатку. Тому тут все ок.

Дякую, що написали про проблеми, які виникли під час роботи, бо звичайно ніхто не ділиться

Alona HurUkraine flag підтримує ЗСУ 29 May 2022 14:31  
Доброго дня, ось домашні завдання:
1 - https://www.figma.com/file/FtdbyCaoC2XNm6cPG3pPfF/%D0%A3%D1%80%D0%BE%D0%BA-5%2C-%D0%94%D0%97-1?node-id=0%3A1
2 - https://www.figma.com/file/HGdPBG5I9kouo5YxS7iTqX/%D0%A3%D1%80%D0%BE%D0%BA-5%2C-%D0%94%D0%97-2?node-id=0%3A1
3 - https://www.figma.com/file/aRlxy5vrmvsdiPaTAIhnfR/%D0%A3%D1%80%D0%BE%D0%BA-5%2C-%D0%94%D0%97-3

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Порядок бачу, дуже добре. Всі групи гарно підписані.

Завдання 2. Все правильно, тільки ілюстрацій 6 замість 5-ти, трохи перестарались

Завдання 3. Чудово виконана робота! Ви використали примітив зірка, щоб намалювати шестерню, пишаюсь вами

У вас гарно виходить, зі знанням інструментів теж повний порядок. Продовжуйте навчання.

Аліна П.Ukraine flag підтримує ЗСУ 26 May 2022 15:47  
Добрий день. Відправляю виконане завдання: https://www.figma.com/file/w19GuIUXCpw7fgHjCcuJcO/%D0%A3%D1%80%D0%BE%D0%BA-4?node-id=24%3A369

Коментар frusia.pro:

Завдання 1. Навести порядок у файлі попереднього уроку. Бачу, що ви погрупували деякі елементи, але є пару зауважень:

  • На першому фреймі згрупований хедер і навігаційне меню, але воно не підписане;
  • на решті екранів елементи згруповані частково. Наприклад, можна було б погрупувати логотип, меню, стрілочки і так далі.

Завдання 2. Підібрати кольори. Все правильно.

Завдання 3, 5. Перемалювати сайти. Все супер, гарно підібрані і замінені фотографії.

Чудова робота, переходьте до наступного уроку

КатеринаUkraine flag підтримує ЗСУ 26 May 2022 12:17  
https://www.figma.com/file/Dad32rnxDUyucSLXELNKBG/Untitled?node-id=0%3A1

Исправлено

Коментар frusia.pro:

Завдання 2. Тепер все супер, молодець!

Рухаймось до наступного уроку

КатеринаUkraine flag підтримує ЗСУ 25 May 2022 20:08  
Добрый вечер!
https://www.figma.com/file/Dad32rnxDUyucSLXELNKBG/Untitled?node-id=0%3A1

Коментар frusia.pro:

Завдання 1. Прошарки в макеті цілком ок, молодець!

Завдання 2. Тут ви напевно не зрозуміли завдання. Важливо було знайти саме іллюстрації, а не фото (в коментарі до завдання так і написано). Переробіть це завдання, знайшовши нові класні іллюстрації.

Завдання 3. Вау! Ви дуже добре перемалювали сайт, обрали хороший розмір артборда та навіть використали сітку та векторні іконки. Молодець!

Дар'яUkraine flag підтримує ЗСУ 23 May 2022 23:48  
Доброго дня!
1 завдання: а що робити, ящо завдання були зроблені у FigJam, одразу з текстом?
https://www.figma.com/file/gQBVwZKxfVPXpx76Uyo791/1-%2F2-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F?node-id=0%3A1
Завдання 2: https://www.figma.com/file/E8MSInyF5gLItglx3UIsTv/Untitled?node-id=0%3A1
Завдання 3: Дуже хотілося зробити крутий шрифт для назви, але як є:( Задумка типу сайт крамниці кави
https://www.figma.com/file/DohjGXQmqwFo5kmWHAwYDP/Untitled?node-id=0%3A1
хотілось, щоб було схоже на це :https://www.behance.net/gallery/60867921/Magic-Sushi?tracking_source=search_projects%7CUI%20web%20app%20%20design

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Нічого страшного, просто пропускаємо

Завдання 2. Все добре, але бачу лише 4 картинки, а не 5. Це може показатись дрібничкою, але насправді, коли ви отримаєте справжнє технічне завдання від замовника, то треба бути дуже уважним. Тому тренуємось заздалегідь.

Завдання 3. Цікава задумка, молодець! Підлаштували референс під свою ідею. Все правильно.

Продовжуйте навчання і переходьте до наступного уроку.

Софія13 May 2022 08:48  
Доброго дня, надсилаю 2 та 3 завдання)
https://www.figma.com/file/PzeXpMEI2tHJ4d1AgNSOc4/Untitled?node-id=0%3A1

Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. Сума донату на ваш розсуд від 50 гривень (50% перекажу ЗСУ). За один донат перевірю домашки до усіх уроків.

За реквізитами пишіть в дірект Інстаграму @frusia.pro

Аліна 10 May 2022 22:13  
https://www.figma.com/file/WeRUXQvEqJPkmYKxWFKMlW/day-5?node-id=0%3A1
виконання домашнього завдання)

Коментар frusia.pro:

Завдання 1. Порядок навели?

Завдання 2. Підбір кольорів. Правильно.

Завдання 3. Перемалювати сайт. Дуже добре, підібрали схожу по стилістиці ілюстрацію. Виглядає схоже і водночас акуратно.

Якщо зробили перше завдання, то можете переходити до наступного уроку

Вікторія8 May 2022 15:07  
Доброго дня!
Перші 3 завдання за лінком: https://www.figma.com/file/e3NS1Qrhsa725mXhGBij9s/UI%2FUX-course?node-id=38%3A50
Буду очікувати на фідбек
Дякую вам за приділену увагу!

Коментар frusia.pro:

Добрий день, будь ласка!

Завдання 1. Навести порядок у файлі з попереднього уроку. Дуже добре, все згруповано і підписано.

Завдання 2. Підбір кольорів. Правильно.

Завдання 3. Перемалювати сайт. Початок дуже хороший! Над першим екраном, добре попрацювали. На другому лише не вистачає текстового блоку. На решту сайту треба ще витратити трохи часу, щоб він мав закінчений вигляд.

Постарайтесь допрацювати сторінку з третього завдання (додайте хоча б усі текстові блоки) і переходьте до наступного уроку

Вероніка6 May 2022 14:03  
Добрий день!

https://www.figma.com/file/wiXx67AMZo5LisSdxUwYsL/%D0%A3%D1%80%D0%BE%D0%BA-5?node-id=3%3A91

Тут перші 3 завдання, вони розділені по pages!)

Дякую за відповідь на позаминуле завдання, не побачила свої недоробки, виправлюсь)) Дуже цікаво робити Ваші завдання) Ніч за роботою пролетіла непомітно))

П.С. Перепрошую, забула вставити на всякий випадок сам лінк на сайт) Для зручності зробила колаж в самій фігмі для наочності))

https://www.behance.net/gallery/104384719/Good-games-store?tracking_source=search_projects%7CUI%20web%20app

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Навести порядок у файлі з попереднього уроку. Добре погрупували і назвали прошарки. Одна порада, називайте усе в одній манері, тобто, наприклад, перше слово з великої літери, решта з маленької. А у вас попадаються всі літери капсом (великими буквами) або усі маленькими. Має бути одне правило, як ви даєте назви прошаркам.

Завдання 2. Підбір кольорів. Дуже добре.

Завдання 3. Перемалювати сайт. Зроблено детально з використанням масок і сторонніх іконок, заново підібраних фотографій, я бачу величезний об'єм роботи. Молодець! Тепер до деталей, на які я б хотіла звернути вашу увагу. Як і у одному з попередніх домашніх завдань я бачу спотворені пропорції іконок. Також деякі іконки вирівняні не по центру по відношенню до тексту (наприклад у лівому меню). В цілому ця робота по рівню пропрацьованості виглядає, як справжній дизайн.

Хочу похвалити вас, ви робите великі успіхи, але старайтесь працювати вдень Продовжуйте навчання, чекаю нові домашки від вас.

Маргарита22 March 2022 09:37  
https://www.figma.com/file/fC1P6IChkyp5OuALivFcLO/Figma%2F-Lesson-2?node-id=26%3A72
Большое спасибо за Вашу помощь!

Комментарий frusia.pro:

Домашние задания больше не проверяю для граждан россии. Напишите мне @frusia.pro в директ Instagram, если вы не из россии.

Margarita21 March 2022 11:31  
Здравствуйте
https://www.figma.com/file/fC1P6IChkyp5OuALivFcLO/Figma%2F-Lesson-2?node-id=26%3A72
Большое спасибо за Вашу помощь)

Комментарий frusia.pro:

Домашние задания больше не проверяю для граждан россии. Напишите мне @frusia.pro в директ Instagram, если вы не из россии.

Эльвира17 March 2022 13:43  
Здравствуйте!
1. https://www.figma.com/file/2U1yGOnlBmErCYVLRugpkk/Untitled
2. https://www.figma.com/file/kJLjbXhOq8FLwQZ5IfAt2b/Illustrations
3.https://www.figma.com/file/GGi0NF41FXxyKi72po4o7F/Untitled
http://en.weon.avadev.ru
Спасибо большое!

Комментарий frusia.pro:

Задание 1. Сгрупировали хорошо, молодец.

Задание 2. Отлично получилось. Классный выбор иллюстраций!

Задание 3. Вы проделали большую работу, очень хорошо получилось скопировать сайт. В следующих заданиях обращайте внимание на отступы между логическими блоками. Они должны быть одинаковыми или должна быть какая-то системность, если они разные в некоторых местах.

Андрей10 March 2022 21:09  
https://www.figma.com/file/TIFt0VIwx4ENtve7JfXJgH/%D0%A3%D1%80%D0%BE%D0%BA-4?node-id=0%3A1

Комментарий frusia.pro:

Домашние задания больше не проверяю для граждан россии. Напишите мне @frusia.pro в директ Instagram, если вы не из россии.

Ренат (НиНо)21 February 2022 15:21  
Добрый день!
1. https://www.figma.com/file/T33LsFT18DDc6S3fOJs80M/%D0%A3%D1%87%D1%91%D0%B1%D0%B0?node-id=0%3A1
https://www.figma.com/file/lgvQesW2OcvAseUDINfrff/Untitled?node-id=0%3A1
2. https://www.figma.com/file/xfSeAh1ErtT0jHAUkfy0iJ/Untitled?node-id=0%3A1
3. Не совсем понял, как сдвигать углы прямоугольника, чтобы сделать из него фигуру со скошенными углами. https://www.figma.com/file/DxiBnVQ4rV8nXESJZDX0uk/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Первые две ссылки ведут на задания из предыдущего урока. Не поняла зачем вы добавили их и сюда. Не делайте так пожалуйста, а то это путает и меня, и вас в последствии.

Задание 2. С отображением цветов иллюстраций справились на отлично.

Задание 3. Изучая разделы следующего урока про фреймы и маски, вы поймете как именно можно сделать фигуру, которая была у вас в примере. С заданием справились, но в следующий раз советую вам брать пример, который будет более насыщен деталями, чтобы больше попрактиковаться.

Валерия12 January 2022 17:47  
Добрый день.
Дополнение по заданию выше/
1 и 2 добавила группы на картинках + несколько цветов https://www.figma.com/file/zFfN5ciynRnJ1iXjHMmIgp/Untitled?node-id=0%3A1
3. Очень извиняюсь,забыла добавить ссылку на сайт оригинал: https://www.behance.net/gallery/131261459/E-commerce-website-UIUX-design
Ссылка на перерисованный мной: https://www.figma.com/file/vnktpiRtSDmRwJMllGnhJv/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Задание 1. Стало лучше.

Задание 2. Молодец, что поправили.

Задание 3. Очень неплохо повторили дизайн. Если будет желание улучшить что-то, то обратите внимание как сделан в оригинале блок с логотипами (намного чище и аккуратнее). Также можно было бы поправить отступы между блоками, чтобы они везде были одинаковыми и не менее 70 px.

Валерия31 December 2021 18:44  
Добрый день, прикладываю упражнения по уроку.
Первое и второе задание: https://www.figma.com/file/zFfN5ciynRnJ1iXjHMmIgp/Untitled?node-id=0%3A1
Третье задание (сайт): https://www.figma.com/file/vnktpiRtSDmRwJMllGnhJv/Untitled?node-id=0%3A1
Спасибо!

Комментарий frusia.pro:

Задание 1. Надо бы еще поработать. Многие слои не сгруппированы логически в блоки. И для картинок по прежнему остались непонятные названия.

Задание 2. Вы почему-то на всех иллюстрациях ограничили себя в рамках 4-х цветов. Хотя в задании указано от 4-х до 8-ми возможных. Например в первых трех иллюстрациях (обувь, девушка с сакурой и зима) неплохо было бы отобразить еще парочку цветов, потому что считаю цветовую гамму отображенной не в полной мере.

Задание 3. Очень хорошо! Правда я бы могла написать больше, если бы прикрепили ссылку на источник, откуда вы перерисовали дизайн. Также прошу вас обратить внимание на отступы между блоками на странице. Они должны быть одинаковыми.

Виктория22 October 2021 19:35  
Здравствуйте, большое спасибо за урок) Проверьте пожалуйста задания:
1) https://www.figma.com/file/Kd2OvT9WccJ0my53jQyo7B/Untitled?node-id=0%3A1
2) https://www.figma.com/file/G2Qm8k0JEBF0jnGRIsgwvP/Planty?node-id=0%3A1
3) https://www.figma.com/file/9XuzvgsP79mEIqfPUBLj3e/Travel
4) https://www.figma.com/file/bk9s0g5EhbXPOHbfnTHkJ6/Hotel

Комментарий frusia.pro:

Задание 2. Хороший выбор иллюстраций! По ключевым цветам тоже отлично справились.

Задание 3. Выполнили правильно. Довольно точно повторили структуру примера из Behance, а еще по видимому нашли сервис, который удаляет фон на фотографиях. За смекалку огромный +.

Задание 5. Давайте по порядку.

Мобильное приложение Travel (в фиолетовой гамме) Так как ссылка на Behace вела уже на готовый Figma-файл и отдельно на иллюстрации, мне сложно сделать вывод что именно из этого вы перерисовали сами. Похоже вы взяли за основу уже готовые макеты и вставили иллюстрации. Но задача была не в этом. Эти задания вы выполняете, не столько чтобы получить 100% красивый результат на выходе, а чтобы научиться использовать инструменты нашей программы для решения практических дизайн-задач.

Мобильное приложение Hotel (в зеленной гамме) Тут вы молодец, повторили очень хорошо. Попробуйте также не искать уже готовые иконки, а абсолютно все-все иконки попробовать самостоятельно нарисовать. Еще несколько нюансов , которые увидела

  1. Иконка колольчика по идее должна дублировать ту, что в боковом меню;
  2. Серый более грязноват и темнее, чем на примере;
  3. Иконка отличается, попробуйте в следующий раз все-таки нарисовать аналогичную;
  4. Стрелка смещена вниз относительно текста, а должна быть отцентрована.
Полина21 September 2021 22:22  
Добрый вечер!
Спасибо за ваш труд и что проверяете домашнюю работу.

Выполненные домашки:
1. https://www.figma.com/file/R10535bzgjRI2axH7ved67/DODO?node-id=0%3A1
2. https://www.figma.com/file/Nv3a3sZDDm5xqJnD0QJYxk/Illustrations?node-id=0%3A1
3. https://www.figma.com/file/SsLiQfjZ6xgIBNTfZBKWR4/Gewerly?node-id=0%3A1
4. https://www.figma.com/file/O4g8QtVfwuKolwLHdQY0Jr/Waves?node-id=0%3A1

Заранее благодарю!)

Комментарий frusia.pro:

Задание 1. Хорошо поработали со слоями и компонентами, молодец!

Задание 2. Классный выбор иллюстраций, все цвета подобраны правильно.

Задание 3. Очень хорошо! Вам удалось полностью возсоздать макет из Behance.

Задание 4. Тоже отлично. Я заметила вы берете такие легкие минималистичные дизайны. Попробуйте в следующий раз ради практики взять что-то чуть потяжелее: например макеты, где используют тени или те, где очень много мелких деталей (админ панели).

Нина17 August 2021 02:50  
Здравствуйте, тут дополнение дз
https://www.figma.com/file/FdJvXlgwmQbx70majwmCi5/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Задание 2. Отлично подобрали ключевые цвета для иллюстраций, молодец!

Задание 3. Рада, что вы вернулись к третьему заданию и дорисовали еще несколько блоков. Все получилось, единственный совет: сравнила иконки с сайтом референсом и увидела разницу в стиле. А именно, вы добавили тени http://joxi.ru/vAW8j7WtBajO7r и немного не попали в общий плоский стиль. Сейчас мы просто изучаем Figma и пока не затрагиваем основы дизайна, но хотелось чтобы вы уже обращали на такие вещи внимание.

Нина14 August 2021 02:34  
Для задания 3 был выбран этот дизайн сайта
https://www.behance.net/gallery/124650477/Grien-Cooking-App-Case-Study?tracking_source=search_projects_recommended%7CUI%20web%20app
вот ссылка на получившуюся работу
https://www.figma.com/file/FdJvXlgwmQbx70majwmCi5/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Задание 3. Вам удалось повторить дизайн из Behance, хорошо. Но хотелось чтобы вы попробовали нарисовать больше, чем первые два экрана. Также вопрос, почему вы отправили только одно задание из этого урока?

Настя9 July 2021 18:55  
Доброго времени суток))
Спасибо за уроки :)
Домашние задания:
1. https://www.figma.com/file/FM0JC1ZJzMqjnQOhUxTs1N/%D0%97%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-No2?node-id=0%3A1

2. https://www.figma.com/file/YI9g9ugbrEpETMZsnoyuGh/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Добрый вечер! Извините за долгое ожидание :)

Задание 2 (определение цветовой схемы). Вы отлично подобрали основные цвета, все правильно.

Задание 3. Великолепно проделанная работа! Качество и мобильного и десктопного макетов на высоком уровне. Могу лишь придраться к фоновой картинке с картой в конце (видна пикселизация, поищите файл с большим разрешением) и отсутствию футера. Продолжайте обучение, жду новых домашек.

Александр10 May 2021 16:32  
Добрый день! Проверьте пожалуйста:
Задание 2 - https://www.figma.com/file/rwVTCdR40nuv6bmN9NaotL/Untitled
Задание 3 - https://www.figma.com/file/oiKhUlob4n8wRY5wwXI7g8/Untitled?node-id=0%3A1 (Ссылка на источник там же)

Комментарий frusia.pro:

Задание 2 (определение цветовой схемы). Супер! Все 5 иллюстраций отвечают выбранным цветам.

Задание 3. Вы отлично справились! Могу засчитать вам сюда же и 5-е задание этого урока, так как вы нарисовали аж 4 страницы. Советую вам еще больше практиковаться в этом направлении, чтобы набить руку. Например отрисовать перерисовать еще один пример, но уже в более сложном стиле. Например с тенями, градиентами, иконками и т.д.

Serhio29 April 2021 23:54  
Последнее задание к данному уроку
https://www.figma.com/file/w8boeCvVWg1NRKLhUJC3h1/Untitled?node-id=0%3A1

Ссылка на оригинал
https://www.behance.net/gallery/97209083/Nike-Training-Club-website-redesign

Комментарий frusia.pro:

Задание выполнили отлично! Очень хорошо прорисовали все детали. Есть небольшое замечение: обратите внимание на выравнивание (центровку) кнопок.

Комментарий frusia.pro ошибка дизайна Serhio

Также обратите внимание на отступы, в примере из Behance они другие.

Комментарий frusia.pro ошибка дизайна Serhio-2

Подскажите, остальные задания вы тоже выполнили?

Сергей11 February 2021 19:47  
Добрый вечер!
1) https://www.figma.com/file/JZ9TdtlmYpDehy8KzN1D7d/YouTube?node-id=0%3A1
2) https://www.figma.com/file/JZ9TdtlmYpDehy8KzN1D7d/YouTube?node-id=73%3A6
3) https://www.figma.com/file/JZ9TdtlmYpDehy8KzN1D7d/YouTube?node-id=81%3A0

Комментарий frusia.pro:

Привет. Открыла ссылки, которые вы прикрепили и увидела, что задание выполнено частично к этому (5-му уроку) и частично к 4-му уроку.

Задание 2 к уроку 5 (подбор цвета в иллюстрациях). Все супер! Вы отлично выделили ключевые цвета иллюстрации.

Задание 1 к уроку 4 (выбрать сайт и максимально приближенно отрисовать его). Нарисовали отлично, молодец!

Задание 2 к уроку 4 (нарисовать иконки по примеру). Очень аккуратно и правильно нарисовали иконки.

Замечание. Во избежание путаницы в дальнейшем, скидывайте пожалуйста ссылки на домашние задания только те, которые актуальны выбранному уроку . Жду остальные домашние задания!

Mila25 November 2020 23:16  
Привет!
1. https://www.figma.com/file/Tg3AHQQsdMW51VPyYzlRqF/Mila-Kovalchuk-Design-Agency?node-id=47%3A4
2. https://www.figma.com/file/Tg3AHQQsdMW51VPyYzlRqF/Mila-Kovalchuk-Design-Agency?node-id=82%3A0
3. https://www.figma.com/file/Tg3AHQQsdMW51VPyYzlRqF/Mila-Kovalchuk-Design-Agency?node-id=87%3A10
Очень жду фидбек!) Спасибо!

Комментарий frusia.pro:

Задание 1. Иконки нарисованы хорошо, есть небольшие огрехи, но учитывая, что вы новичок – все ок. Один из пунктов этого задания состоял в том, чтобы дать осмысленные названия иконкам. Тут к сожалению вы не справились, видимо немного недопоняли (смотрите скрин) https://prnt.sc/vtw6vc . Осмысленность заключается в том, чтобы дать название, которое соответствует содержанию иконки. Например: "check", "flower", "calendar".

Задание 2. Вы повторили небольшую ошибку прошлых учеников и тоже частично взяли не иллюстрации, а фото. Но цвета отлично отражают гамму, поэтому молодец!

Задание 3. Вы проделали большую работу, класс! К сожалению не кинули ссылку на оригинальный сайт или концепт сайта, но явных ошибок в дизайне я не увидела, поэтому все отлично! Обязательно продолжайте в том же духе!

Айдана24 November 2020 08:52  
2 задача - https://www.figma.com/file/c758Ow2nxeTK8FVDeroxmX/Untitled?node-id=0%3A1
3 задача - https://www.figma.com/file/qONBMdHjh2UOoqiOY7qneF/Untitled?node-id=0%3A1
https://www.figma.com/file/ABmNPxNV3bTIEvc0DjG7aJ/Untitled?node-id=0%3A1
4 задание - https://www.figma.com/file/MBB8SdDgI6Gm0WnbORmLts/jjj

Комментарий frusia.pro:

Задание 2. Вы использовали фото, а нужно было найти иллюстрации. Вы скорее всего не разобрались с заданием, так как цвета подобраны неверно. Нужно выбирать ключевые цвета иллюстрации (то есть те, которые преобладают на ней), их не обязательно дожно быть 4. И самое важное при заливке круга нужно использовать пипетку, наводя на иллюстрацию и выбирая нужный цвет. Попробуйте повторно сделать задание.

Задание 3. К сожалению вы не прикрепили примеры сайтов, которые перерисовали в этом задании. По первой ссылке (Chobani) все сделано довольно хорошо. К второй ссылке (планер) есть вопрос: вы перерисовали этот дизайн с какого-то примера? Или нарисовали его самостоятельно?

Задание 4. В этом уроке задание 4 звучит совсем по-другому. Видимо вы что-то напутали и отправили иконки из предыдущего урока сюда.

Анастасия23 November 2020 22:39  
Задание к пятому уроку
1.1 https://www.figma.com/file/n12dKY4eXUDv3877xT1RFk/lesson-5-tasl-1.1?node-id=0%3A1
1.2 https://www.figma.com/file/7DJySPSju0QGzOw26gLQ0x/lesson-5-task-1.2?node-id=0%3A1
2 https://www.figma.com/file/E4dIuEQkxaruugoClEwCn0/lesson-5-task-2?node-id=0%3A1
3 https://www.figma.com/file/aXwW4c6Ywva1Yk7mD5mvxD/lesson-5-task-3?node-id=2%3A0

Комментарий frusia.pro:

Задание 1. Все слои носят осмысленные названия, отлично.

Задание 2. Вы почему-то в 4 из 5 артбордов использовали фото вместо иллюстрации. Но цвета подобрали хорошо.

Задание 3. Вы молодец что нарисовали длинную страничку сайта. В целом все сделано очень хорошо. К сожалению вы не скинули пример, с которого вы перерисовывали сайт, поэтому я подмечу визуальные ошибки, которые есть в этом задании. Например: отсутствие контраста: темный фон/ темные иконки (смотрите скрин) http://prntscr.com/vt4od6

Мария23 June 2020 15:39  
Первая часть заданий
https://www.figma.com/file/LUgwagNiuNT8D0rIUioRM3/001?node-id=0%3A1
https://www.figma.com/file/29a4Yu6sLzI9pAJjZrcrVT/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Задание 1 из четвертого урока. Вы отрисовали главную страницу Google. Хорошая работа, логотип и другие элементы отрисованы в мельчайших деталях.

Задание 2 из четвертого урока. Иконки тоже хороши.

Задание 1 из пятого урока (этого). Сгруппировано хорошо.

Задание 2 из пятого урока. Ключевые цвета подобраны правильно. Непонятно почему вы использовали фотографии, впрочем это не столь важно. Засчитывается.

Задание 3 из пятого урока. Отрисовано, картинки заменены. Засчитывается.

В целом отлично, переходите к следующим урокам.

To start learning, take tests and track progress, you need to enroll in the course. It's free.