Lesson 7. Registration. Interface. First steps

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.

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

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

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

Why choose Figma?

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

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

How to get started?

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

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

    Main page of the Figma website

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

    Registration button on the Figma website

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

    Registration form on the Figma website. Step 1

  4. We fill out the second step of the registration form — create a password and enter it in the Password field. You can change your email and password later if necessary.

    Registration form on the Figma website. Step 2

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

    Account confirmation via email

    Confirming email in Figma

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

    Specify a name for your Figma account

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

    Choosing a direction when working with Figma

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

    Choosing status when working with Figma

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

    Collaborative use of Figma

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

    Inviting other participants during registration in Figma

    What do you need Figma for right now? This is the next question. Since you do not currently aim to create commercial projects, and most likely each of you has your own goal: to test your skills as a designer, to learn the program, or anything else, the easiest option would be to choose Other (Other).

    Survey from Figma

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

    Have you used Figma

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

    Choosing a Figma pricing plan

    Next, Figma offers you to immediately choose one of three interaction options: creating design in a file (what we will be doing 95% of the time), creating a board in FigJam (an additional Figma product that is convenient for organizing research results and conducting joint "brainstorming" sessions), or open Figma Slides (functionality for creating presentations). I recommend that you skip this step to avoid confusion.

    Figma functionality

  9. All set! — Figma is ready to work. Maximize your browser to get the most useful space. There are a few nuances before we start;

    Figma is ready to work

  10. As you can see, we have been redirected to the Figma page with recently edited projects (files). Figma saves all your projects on a remote server (also known as "in the cloud"). This means you do not need to save anything on your computer; everything is done automatically. On the right, you can see images of your projects. Look, Figma has added a few for you to explore.

    Page with recently edited projects in Figma

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

    Creating the first design file

Main Page of Figma and Creating a New File

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

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

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




Overview of the Figma Interface

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

Overview of the Figma Interface

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

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

  1. Selecting the tool — on the toolbar;
  2. Using the tool — in the workspace. For example, adding a rectangle or text;
  3. Selecting an existing object — using the workspace or the layers panel;
  4. Modifying the selected — using the properties panel (changing position, size, color) or using the context command from the main menu (making a copy);
  5. Changing the display order of objects — using the layers panel;
Each of these points you repeat hundreds of times in different sequences to achieve the desired result. Now let's move on to practice and everything will become clearer.

Drawing a Rectangle

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

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

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




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

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

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

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

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

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

Selecting, Moving, and Resizing Objects

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

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

Let's practice with rectangles:




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

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

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



Navigation

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

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

These three techniques allow you to navigate the space very quickly:




Object Properties Settings

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

Rectangle Properties

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

Rectangle Properties

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

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




Color Picker Window

Let's take a closer look at the color picker window. It allows you to flexibly adjust its hue, saturation, and even transparency. Additionally, each color has its precise value that can be copied and pasted into the fill or stroke color of another object.

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




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

Adding Text

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

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

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




Drawing a Line and an Arrow

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




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

Why are layers needed?

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

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

  • To enable selection and focus on an object – additionally, the layers panel has a search by name;

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

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




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

Useful Commands

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

Homework

From now on, this course is designed for independent study and completion of 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 execution from other students.

The chat is not available for citizens of Russia.

  1. Select one website and try to draw its main page (just the first screen will do) as closely as possible, using the tools from this lesson. Try to pick similar colors, sizes, proportions of blocks, and fonts. Send links to the images of the drawn screens. You can take a photo with your smartphone if you don't know how to take a screenshot. Also, don't forget to specify the address of the website you are redrawing. Share what difficulties you encountered;
  2. Draw one icon from each row listed below, using the tools you learned. You should have a good understanding of the properties of shapes to complete this task. You don’t need to try to replicate the icons exactly; they can differ slightly;

    Homework for drawing icons

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

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

Conclusions

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

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

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

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

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

Руслана18 March 2025 16:28  
Зробила завдання 1-3, і умовно половину 4
https://www.figma.com/design/NpFute24BtuEukTxLnJeYH/%D0%A3%D1%80%D0%BE%D0%BA-7?node-id=0-1&t=qkPBYXg1pqrAzDDU-1
скажена черепахаUkraine flag підтримує ЗСУ 24 November 2023 14:01  
ок, практично все виправила окрім першого -- закрити макет і додати фон. Я про висячі елементи. Чомусь не виходить їх сховати (

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

Бачу ви знайшли рішення, переходьте до наступних уроків

скажена черепахаUkraine flag підтримує ЗСУ 22 November 2023 14:28  
Дякую сердечно за курс! Полюбила працювати у Figma, тішуся, мов мала дитина )).
Ось що вийшло. Чекаю з нетерпінням на фідбек.
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-2&mode=design&t=wVQMrLResBoDtqYc-0

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

Залишила коментарі до трьох виконаних вами завдань у фігма-файлі. Буду чекати на виправлення.

Antanas Romualdas Kolyta. kolyta.ar@gmail.com10 December 2022 05:42  
Очень хорошее изложение для осваивающих Figma
Считаю что я нашёл оптимальный вариант.
Всё изложено глубоко и доходчиво.Без воды. Эсли я внимательно всё это прочитаю и попрактикуюсь то приобрету предельную ясность о Фигме.
Захар8 November 2022 13:27  
https://www.figma.com/file/5dFKsw7QGNdyrW2sh8rK9c/Untitled?node-id=0%3A1

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

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

ВарвараUkraine flag підтримує ЗСУ 31 October 2022 20:13  
https://www.figma.com/file/QIwTSpFf9pMvfRDCs0z1Rp/UX%2FUI-Frusia?node-id=128%3A2

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

Завдання 1.У вас гарно вийшло, молодець!

Завдання 2. У іконках не знайшла помилок, все дуже детально відтворили. Хвалю, що вирішили намалювати усі.

Завдання 3. Бачу ваші відмальовані флоу, супер!

Завдання 4. Два інші сайти також вийшло відтворити. Особливо хочу похвалити, що встановили собі шрифт Дії та дуже точно передали стиль!

Yuliya LepenkoUkraine flag підтримує ЗСУ 7 September 2022 14:32  
Добрий день! Дякую за зворотній зв'язок. Спробувала виправити помилки.

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

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

Тепер все значно краще, молодець! Переходьте до наступного уроку.

Yuliya LepenkoUkraine flag підтримує ЗСУ 3 September 2022 15:14  
https://www.figma.com/file/xSk0BHiIjCZakBmALVRkmP/icons

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

Завдання 1. Відмальовка сайту.Знаю, що це ваша перша спроба, тому це за помилку не рахую, але надалі спробуйте малювати сайти під розмір в ширину 1920 або 1440 пкс. Це стандартні розміри моніторів або екрана ноутбука, які використовують дизайнери у своїх макетах. Також перевіряйте, щоб величина ваших текстів ніколи не була меншою 12. Наприклад, ось ці тексти замалі по розміру та стоять задалеко від фото https://monosnap.com/file/K1q83Vq4M2hacOKTlkUEyzsENAEGvA. На рахунок відтворення сайту – питань майже не було, відмалювали дуже схоже.

Завдання 2. Іконки. В деяких іконках є неточності по відмальовці. Кидаю скрін https://monosnap.com/file/YGf23H3BTArJ3eT3dhJmpoYti0jpVe :

– 1 та 2 – ширина ліній має бути більшою;

– 3 – галочка вийшла зжатою по ширині, спробуйте відтворити прямокутниками поверх оригінальної картинки;

– 4 та 5 – по висоті ці іконки мають бути більшими;

– 6 – зверніть увагу на прямокутники біля цифр, вони не мають мати таких скруглених кутів.

Завдання 3. Вайфлоу. Все супер!

Завдання 4. Відмальовка ще одного сайту. Тут актуальні ті ж коментарі, що і у завданні 1, про величини шрифтів та ширину макету.

МаргаритаUkraine flag підтримує ЗСУ 19 August 2022 16:34  
Доброго дня! Домашнє завдання було дуже цікавим. Спочатку здавалося, що буде складно і я ніколи його не закінчу. Але чим далі, тим легше було зорієнтуватися. Завдання з малюванням головної сторінки розвиває надивленість.

https://www.figma.com/file/CgNaoc2ojvJcUnA4AAehuD/%D0%A3%D1%80%D0%BE%D0%BA-4.-%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1%2C-2%2C-4.?node-id=0%3A1\

Я не дуже зрозуміла як робити 3-те завдання, що саме потрібно зробити?

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

Добрий день! Так, спочатку завжди дуже важко, але потім все стає на свої місця

Завдання 1. Перемалювати сайт. Дуже якісна робота, хочу похвалити за розмір головного фрейму у 1440 пікселів і в цілому за деталізацію, структуру і точність відмальованого макета (усі без виключення іконки та лого чудово відтворенні). Маю декілька зауважень, щоб ще покращити макет:

  • Використовуйте розмір шрифту не менше ніж 12 пікселів;
  • не використовуйте дрібну частину у розмірах шрифтів. Наприклад, побачила у вас 11.5,
  • округлюйте розміри елементів до цілих чисел. Наприклад, якщо подивитись на розмір юзерпіків авторів відео (аватарок), то там буде 35.72 на 36.66 пікселів, а має бути 36 на 36 пікселів;
  • для текстів у декілька рядків використовуйте один текстовий блок. У вас заголовки у відео зроблені через два текстових блоки. Щоб налаштувати проміжок між рядками у текстовому елементі використовуйте властивість Line Height, яка знаходиться одразу під випадаючим меню з насиченністю шрифта (у вашому випадку там написано ExtraBold).

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

Завдання 3. Перемалювати вайрфлоу з попереднього уроку. Наскільки я пам'ятаю, ви зробили це завдання одразу у Figma (у вас був сайт Makeup). А от якби ви малювали вайрфрейми у блокноті, то треба було б перемальовувати. Тому це завдання зараховується автоматом

Завдання 4. Перемалювати ще два сайти. Бачу Youtube Music та TheStartupBros. Тут все дуже добре, шрифти та іконки, як і решта елементів вийшли дуже схожими.

У вас дуже добре виходить, чекаю на виправлення до першого завдання

Вікторія ГрищенкоUkraine flag підтримує ЗСУ 9 July 2022 16:09  
Добрий день! Дякую за відповідь! Виправила)

https://www.figma.com/file/fPVAREH9cjVynZqap7NNck/%D0%A3%D1%80%D0%BE%D0%BA-4.-%D0%92%D0%B8%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%BE?node-id=0%3A1

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

Привіт! Так, тепер все добре, переходьте до наступного уроку

Вікторія ГрищенкоUkraine flag підтримує ЗСУ 7 July 2022 15:20  
Добрий день!
Мені дуже сподобалось виконувати завдання, не могла відірватись від компʼютера!) Та коли перший раз прочитала завдання, всі вони здавались мені дуже складними, але потім потроху почала виконувати, розбиратись з Фігмою і виконала усе)

https://www.figma.com/file/eO9DJ0Vn8gnkJmcM73fflM/%D0%A3%D1%80%D0%BE%D0%BA-4?node-id=0%3A1

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

Добрий вечір! Рада, що вам сподобалось

Завдання 1 і 4. Перемалювати сайти. Ви відмалювали всі три сайти, чудово попрацювали. Бачу лише одну проблему: головний фрейм дуже широкий. Спробуйте перемалювати хоча б один сайт, щоб ширина його фрейму була 1440 пікселів. Що відповідає ширині екрана більшості ноутбуків (дотримуйтесь цього розміру й надалі). Відповідно до нової ширини у вас зміняться розміри й усіх елементів всередині.

Завдання 2 і 4. Перемалювати іконки. Ви намалювали усі іконки, хороша практика, все добре.

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

Чекаю на виправлення до першого завдання. Достатньо перемалювати у новому розмірі лише один сайт

Yana UsachovaUkraine flag підтримує ЗСУ 1 July 2022 17:08  
Добрий вечір, дуже цікаве завдання, дякую, сподіваюсь, що в мене хоч трошки схоже
https://www.figma.com/file/2Px8chcuhtqdFvWFU3eUgx/Untitled?node-id=0%3A1

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

Добрий вечір! Будь ласка

Завдання 1. Перемалювати сайт. Вийшло досить добре, молодець!

Завдання 2 і 4. Перемалювати іконки. Ви намалювали усі іконки, все супер. По розмірах вони в цілому трохи відрізняються, але це не суттєво.

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

Переходьте до наступного уроку

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

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

Привіт!

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

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

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

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

АннаUkraine flag підтримує ЗСУ 27 June 2022 12:40  
переробила свої помилки, а саме: всі блоки деталізувалаю
https://www.figma.com/file/FGYebaPYrSfAFmQRpzZCjn/Untitled?node-id=0%3A1

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

Привіт! Так, стало набагато краще, молодець! Зверніть увагу, що контраст можна зробити трохи вищим, бо, наприклад, напис на кнопці «Заказать» важкувато розрізнити. Але в цілому дуже добре, завдання зараховується. Рухайтесь до наступного уроку

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

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

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

Завдання 1. Перемалювати сайт. Бачу два екрани з Youtube Music, все дуже добре. Навіть розмір фрейму відповідає по ширині типовому ноутбуку. Також бачу, що ви вже розібрались з градієнтами, молодець!

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

Завдання 3. Намалювати вайрфлоу з попереднього уроку. Все дуже добре, особливо сподобався останній екран з мапою. У тому, що сайт змінив назву, поки ви робили домашку немає нічого страшного Маю невеличку пораду: не використовуйте шрифти з розміром менше 12. У вас знайшла 11-й розмір на елементі, що вказує кількість зупинок.

Гарна робота, переходьте до 5-ого уроку

АннаUkraine flag підтримує ЗСУ 20 June 2022 23:54  
https://www.figma.com/file/FGYebaPYrSfAFmQRpzZCjn/Untitled?node-id=0%3A1
Це було дійсно складно, як для першої спроби. Багато запитань, але думаю згодом опаную.
Ваш матеріал дуже цінний, дякую за вашу роботу.

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

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

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

Завдання 2 і 4. Перемалювати іконки. Ви відмалювали усі іконки, молодець! На деяких є зайва тінь, але це дрібниці.

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

Гарний початок, але треба трохи допрацювати третє завдання, чекаю на доповнення

Ірина С.Ukraine flag підтримує ЗСУ 18 June 2022 20:52  
Добрий день! Надсилаю дз до 4 уроку.
https://www.figma.com/file/DQpfkbv7kMTPnI9or7ECcP/Homework-4?node-id=0%3A1

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

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

Завдання 1. Перемалювати сайт. Все дуже добре, відмальовано 1 в 1.

Завдання 2 і 4. Перемалювати іконки. Гарно попрацювали, бачу усі іконки відмальовані дуже схоже. Можу докопатись до розбіжностей у розмірах, наприклад, іконка у правому нижньому куті. Але це дрібниці.

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

Завдання 4. Перемалювати ще два сайти. Бачу ще один сайт, який відмальовано дуже добре. Лише треба забрати заокруглення табів посередині (пошукачу, роботодавцю). Я спочатку дуже здивувалась наскільки точно ви відтворили флаг, що знаходиться зліва, а потім зрозуміла, що ви дістали svg-файл з самого сайту. Схоже, що ви дуже добре вмієте користуватись інспектором до браузера, молодець!

У вас все дуже добре виходить, переходьте до 5-ого уроку

Анна СмірноваUkraine flag підтримує ЗСУ 6 June 2022 14:49  
Доброго дня!
Дуже крутий курс!
Дуже зрозуміло і легко подана інформація + дз складені так, аби реально добре можна було поправкикуватись.
Дякую вам!
Надсилаю посилання на виконане дз:
https://www.figma.com/file/XLJ8Id8aNBwcOC9ss2O5ut/UI%2FUX-home-work-lesson-4?node-id=0%3A1

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

Добрий вечір, дякую за відгук!

Завдання 1. Перемалювати сайт. Все добре: гарно підібрали шрифти і відмалювали іконки.

Завдання 2 і 5. Перемалювати іконки. Молодець, відмалювали усі іконки. Вийшло дуже схоже.

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

Завдання 4. Відмалювати ще два сайти. Все дуже схоже, добре попрактикувались. Помітила лише одну дивну деталь. На останньому сайті чомусь три текстові блоки внизу об'єднані через булеву операцію додавання (Union). Це ж стосується й іконок. Щоб об'єднувати прошарки, використовуйте звичайні групи або фрейми.

Все йде дуже добре, продовжуйте навчання

ІннаUkraine flag підтримує ЗСУ 29 May 2022 14:46  
Доброго дня,
Дуже дякую за такий чудовий курс!
Ось посилання на виконане домашнє завдання https://www.figma.com/file/I5saUtUkJM2PGC8WXt6gel/

Гарного дня)

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

Добрий вечір! Будь ласка

Завдання 1 і 4. Перемалювати сайти. Бачу три чудово відмальоватих сайти. Деякі іконки ви вставили як растрові зображення, але це цілком ок, не заморочуйтесь (до того ж ви відмалювали всі іконки у наступному завданні).

Завдання 2 і 4. Відмалювати іконки. Дуже акуратно виконана робота. Пропорції і розміри дуже схожі, молодець!

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

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

БогданаUkraine flag підтримує ЗСУ 23 May 2022 20:25  
Вітаю!
Дяка за чудовий та цікавий урок ;)

Завдання №1
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=16%3A2
Завдання №2, 4
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=16%3A188

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

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

Завдання 1. Перемалювати сайт. Про це не вказано в уроці, але запам'ятайте на майбутнє, що завжди треба використовувати розмір шрифту 12 або більше. Інакше буде важко прочитати текст. По решті все дуже добре.

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

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

За винятком дрібних деталей все добре, після правок можете переходити до наступного уроку

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

Добрый вечер!
ссылка к первому заданию в названии первого фрейма
Прикрепляю работу

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

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

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

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

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

У вас дуже добре виходить. Зауваження, що я залишила досить незначні. Переходьте до наступного уроку

Дар'яUkraine flag підтримує ЗСУ 16 May 2022 18:21  
Доброго дня !
виконане завдання :
https://www.figma.com/file/DVdNRePXoAtzrcXrQB3nkF/Untitled?node-id=4%3A2669

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

Добрий день!

Завдання 1. Відмалювати сайт. Бачу список контактів додатку-месенджері для смартфону. Добре, зараховується.

Завдання 2, 4. Відмалювати іконки. Гарний початок! Є декілька зауважень:

  • Іконки досить сильно відрізняються за розміром, намагайтесь їх вписати в однаковий по розміру уявний квадрат (контейнер);
  • деякі елементи намальовані сірим кольором, треба їх перефарбувати у білий;
  • останні дві іконки (знизу праворуч) не дуже схожі, треба їх допрацювати.

Завдання 3. Відмалювати вайрфлоу. Бачу сценарій перегляду деталей фільму. Правильно.

Після правок переходьте до наступного уроку

АлінаUkraine flag підтримує ЗСУ 15 May 2022 19:09  
Доброго дня)
Всі виконанні завдання : https://www.figma.com/file/w19GuIUXCpw7fgHjCcuJcO/%D0%A3%D1%80%D0%BE%D0%BA-4?node-id=0%3A1

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

Добрий день!

Це дуже схоже на ідеально виконане завдання: перемальовано три сайти і всі іконки. Молодець! Лише один момент мені незрозумілий по вайрфлоу. Екран продовження покупок можна не дублювати, а вказати стрілочкою на перший екран або взагалі її видалити. Це ж можна зробити з юзер флоу, але то не суттєво. Продовжуйте навчання

Ольга11 May 2022 13:02  
доброго дня :)
1,2 завдання https://www.figma.com/file/ZDQoI6gO14FLCkUXWLTAg5/1%2C2-task?node-id=0%3A1
3 завдання https://www.figma.com/file/pqXRg5Ey30yjJ4PJYcWsBs/3-task?node-id=0%3A1
дякую!

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

Добрий день!

Завдання 1. Перемалювати сайт. Дуже гарно зроблена робота

Завдання 2, 4. Перемалювати іконки. Хочу вас похвалити, ви намалювали усі іконки і погрупували їх.

Завдання 3. Намалювати вайрфлоу. Я так розумію, це флоу по перегляду товару. Все добре.

Переходьте до наступного уроку

Aліна8 May 2022 20:52  
1. добрий день. завдання один. https://www.figma.com/file/PHclzIyJi8yHW4T7Kyu4Vq/Untitled?node-id=1%3A2

не зрозуміла як робити тіні(в цьому випадку зверху и внизу сайта)
тому просто зробила квадрат, multiplay. linear.

З верхнью тінню- така авантюра вдалась) а от з нижньою ні.

завдання 2. https://www.figma.com/file/k7wzRfG3SWTs2wFncz0P18/Untitled?node-id=0%3A1

іконки малювала вибірково

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

Добрий день!

Завдання 1. Перемалювати сайт. Гарно справились. Ідея з тінню у вас правильна. Достатньо вказати режим накладання Normal і змінити колір градієнту для обох ключових кольорів набагато ближче до темного і все буде ок. Для нижньої частини зробіть дублікат прямокутника з тінню і переверніть його на 180 градусів. Вийде те, що вам потрібно.

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

  • Усі іконки мають бути приблизно одного розміру;
  • між іконками має бути більші відступи, бо зараз все трохи на купі;
  • непогано було б розмістити їх в ряд.

А що по третьому завданні?

Вікторія7 May 2022 11:58  
Доброго дня! Відправляю практичну :) Очікую на вашу відповідь. Дякую!
https://www.figma.com/file/e3NS1Qrhsa725mXhGBij9s/Untitled?node-id=0%3A1

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

Завдання 1. Відмалювати сайт.Цікаво, що ви далеко не йшли та відмалювали частинку мого сайту. Декілька важливих моментів: для екрану все ж потрібно було б задати білий фон. Також зверніть увагу на стрілочку поруч з вибором мови. Вона в мене на сайті має форму трикутника. Лінії прямокутника на іллюстрації мають замикатись по кутах вгорі.

Завдання 2. Іконки. Тут все добре.

Завдання 3. Вайрфлоу. Тут також все супер. Єдине що, для кращої читабельності тексту краще обирати більш світлі сірі кольори для фону.

Тетяна6 May 2022 21:34  
Доброго вечора! Дякую Вам за таке чудове і детальне пояснення. Виконала домашнє завдання, можливо не зовсім акуратно! Коли робила головну сторінку, довго не могла акуратно намалювати стрілочку (в кінцевому результаті не зовсім вийшло акуратно). Дякую завчасно, якщо матиме змогу подивитись подивитись.

https://www.figma.com/file/uNcUg2U2lbbxIRR6RocGgt/Урок-4-ДЗ-2

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

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

Було б непогано, якби ви також виконали завдання на відмальовку іконок. Практика ніколи не завадить.

Вероніка5 May 2022 15:57  
Доброго дня! Виконала лише одне завдання, не хотіла і Вас зайвий раз турбувати, просто доводилось вже робти іконки, тому вирішила зробити лише завдання з сайтом! Дякую завчасно якщо зможете подивитись))

https://www.figma.com/file/9T6qHtek3VfNe7xZqC5Y6b/JYSK?node-id=0%3A1

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

Добрий вечір, можете турбувати, нічого страшного

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

Переходьте до наступного уроку. А ще можете намалювати іконки до цього уроку

Alona Hur3 May 2022 11:26  
Доброго дня, Люба!
Хочу подякувати за такий детальний і зрозумілий урок та й взагалі курс для "чайників". Так все класно і зрозуміло розписано і розкладено по полицях, що виконувати домашки - одне задоволення!)
1. https://www.figma.com/file/FtdbyCaoC2XNm6cPG3pPfF/%D0%A3%D1%80%D0%BE%D0%BA-4%2C-%D0%94%D0%97-1?node-id=0%3A1
2. https://www.figma.com/file/Ulf0S0o6ax8CqmYI830vUZ/%D0%A3%D1%80%D0%BE%D0%BA-4%2C-%D0%94%D0%97-2
3. https://www.figma.com/file/z8WWeRhQBJFLVhvIfLbedB/%D0%A3%D1%80%D0%BE%D0%BA-4%2C-%D0%94%D0%97-3

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

Добрий день, дякую за відгук, дуже приємно

Завдання 1. Відмалювати сайт. Дуже добре, ви відмалювали навіть іконки в хедері.

Завдання 2. Іконки. Ви детально пропрацювали усі іконки, це хороша практика, молодець. У подальшому ви побачите наскільки все можна спростити за допомогою нових інструментів і прийомів.

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

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

Эльвира19 February 2022 00:04  
Доброго времени суток. Люба, большое спасибо за урок!
Высылаю задания!
https://www.figma.com/file/WqTSJ9KBdrYL5WeuQCM7xA/Untitled
https://www.figma.com/file/2U1yGOnlBmErCYVLRugpkk/Untitled
https://www.figma.com/file/BoPuqtvIMuHnFYcuhxdOrj/Untitled

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

Задание 1

В целом превый экран выглядит хорошо. Но старайтесь обращать внимание на детали: выровняйте мелкий текст и кнопку сверху фотографии по центру. Тоже самое касается и выравнивания текста на белом фоне (и маленького, и большого).

Задание 2

По иконках есть несколько замечаний:

  • Первые четыре иконки нарисованы хорошо, а последние пять почему-то мельчат относительно первых.
  • Иконка-галочка получилась кривая, попробуйте перерисовать её с нуля еще раз.
  • Первая иконка (пауза): прямоугольники должны быть одинаковыми, а сейчас они разной толщины.
  • Иконка в форме окна (первая в нижнем ряду) – внутри неодинаковые расстояния от перемычек до контура.

Задание 3

Вайфрейм вы отлично сделали, молодец.

Ренат (НиНо)18 February 2022 13:51  
Любовь, добрый день!
Очень прикольно, особенно практическая часть.
1 - е задание: https://www.figma.com/file/T33LsFT18DDc6S3fOJs80M/%D0%A3%D1%87%D1%91%D0%B1%D0%B0?node-id=0%3A1
2 - е задание: https://www.figma.com/file/lgvQesW2OcvAseUDINfrff/Untitled?node-id=0%3A1
3 - е задание: https://www.figma.com/file/hVbp7pUN6kSxz6nnBgvjrB/Untitled?node-id=0%3A1

Комментарий frusia.pro: Добрый вечер

Задание 1

Главный вопрос, который у меня возник, при просмотре этого задания: почему вы не нарисовали фон? Без фона элементы выглядят довольно странно, будто парят в воздухе. Сами элементы перерисованы хорошо. Замечания только к деталям. Обратите внимание на отображения курса валют, было бы хорошо в точности отобразить его.

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

Задание 2

Верхняя иконка (пауза) у вас имеет чуть более острые углы, чем в оригинале. Нужно добавить больше скругления. Остальные – хорошо.

Задание 3

К сожалению ссылка ведет на пустой файл фигмы.

Margarita9 February 2022 11:34  
1-e задание https://www.figma.com/file/H81hJipyaLuWZgFf3AY61h/Main-page?node-id=0%3A1
2-е задание https://www.figma.com/file/4PcKsxfEWuoMVosHMt2j8Y/Icons?node-id=0%3A1
Спасибо большое за Вашу помощь в развитии!)

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

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

Klkiv20 November 2021 06:34  
Thank you, your site is very useful!
Валерия6 November 2021 13:11  
Добрый день, задание отправила Вам в Инстаграм. С какими сложностями столкнулась: сайт магазина - так и не смогла разрисовать значок России в триколор, не знаю как поделить круг. Были сложности с иконками где зубы, долго не могла сделать одну сторону круглой. Иногда случайно нажимала какую-нибудь кнопку и могло что-то исчезнуть, это скорее неопытность)

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

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

modOity31 October 2021 14:19  
Спасибо за информацию.
PandOi26 October 2021 12:35  
Спасибо.
Виктория13 October 2021 18:51  
Здравствуйте! Проверьте пожалуйста задания)
Задание 1: https://www.figma.com/file/iGBzivbxRygUXEWwhO1yoP/Premier
Задание 2: https://www.figma.com/file/larVyUQU3p2GeCXUFl6oK9/%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8
Задание 3: https://www.figma.com/file/NiotUocgzImcizKFDO48F8/Coursera

Комментарий frusia.pro: Добрый вечер

Задание 1

Неплохой выбор странички, нарисовали хорошо! Молодец. Есть замечание по работе со слоями: обратите внимание, что у вас весь контент лежит не в середине фрейма с фоном, а просто раскидан. Лучше поместить его внутрь фрейма. Когда вы будете двигать вашу страницу, то весь контент будет одним целым.

Задание 2

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

Задание 3

Задание сделано хорошо. Единственное что мне до конца не ясно: выполняли ли вы предыдущие задание? И рисовали ли флоу как продолжение третьего урока? Потому что комментария с подписью "Виктория" я к сожалению не нашла в третьем уроке.

Люба Фурсеева2 September 2021 13:19  
Julius Shevchenko, пожалуйста!
Julius Shevchenko2 September 2021 13:00  
Спасибо за урок)

Полина29 August 2021 14:36  
Добрый день!

Прошу вас проверить мою домашнюю работу.
1. https://www.figma.com/file/R10535bzgjRI2axH7ved67/DODO?node-id=0%3A1
2. https://www.figma.com/file/JnnclXg9Ci3SusDOow5KOF/Untitled?node-id=0%3A1
3. https://www.figma.com/file/cE0Ygh0Q6XKw9IuzMiFeKL/%D0%92%D0%B0%D0%BA%D0%B0%D0%BD%D1%81%D0%B8%D0%B8-%D0%97%D0%AF?node-id=0%3A1
4. https://www.figma.com/file/3ZmZoeiSZWmWBuzH0PtGOq/%D0%97%D0%AF?node-id=0%3A1

Заранее благодарю и жду обратную связь! Спасибо за ваш труд.

Комментарий frusia.pro: Добрый вечер

Задание 1

Додопицца хороший пример, молодец. Нарисовали все очень детально и правильно. Хвалю, что использовали компоненты.

Задание 2

Иконки – все отлично!

Задание 3

Рассмотрела ваш флоу из предыдущего задания. В целом вы своим макетом передали только общую тематику. А мы же ведь делаем флоу, чтобы потом было проще сделать этот самый прототип уже в Figma. Чтобы все смысловые детали были уже проработаны и мы просто отобразили их графически. В вашем флоу из предыдущего урока много экранов и взаимодействий, к сожалению вы их не показали.

Буду рада если переделаете и отправите на проверку снова.

Задание 4

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

Александр29 April 2021 18:36  
Здравствуйте, проверьте пожалуйста ДЗ:
1. Можно в режиме презентации https://www.figma.com/file/Ue7bkDWqpWTzAr8YiZBtoS/SPACEX
2. https://www.figma.com/file/AYzDsZcVUNBtJQUSjEmJOm/ICONS
3. https://www.figma.com/file/4mTk3bTdNAVWEGndenQzFU/Untitled

Комментарий frusia.pro: Добрый вечер

Задание 1

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

Задание 2

В целом иконки отрисовали отлично. Чтобы было идеально вам стоит обратить внимание на иконку галочки в первом ряду (она немного вытянута, будто искажена) и иконку AZ со стрелкой (стрелка слишком угловата, ей нужно добавить скругления, как на остальных фигурах).

Задание 3

Молодец, вайрфреймы хорошие, довольно детальные и грамотно сделаны. Продолжайте выполнять задания!

Владимир21 April 2021 06:35  
https://www.figma.com/file/OwHmODPToeIpKKbDEs4sgx/2?node-id=0%3A1

Комментарий frusia.pro: Добрый день, вы отрисовали 9 иконок и отлично справились с вторым заданием, замечаний нет. Жду остальные задания

Настя26 March 2021 08:35  
Доброго времени суток! Огромное спасибо за задания)

1. Иконки https://www.figma.com/file/5J51nZpbLYLtI9sZeKeacN/%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8?node-id=0%3A1

2. С вайрфлоу решила на 1 окне сделать, чтобы если я делаю что-то ошибочно, не плодить ошибки далее)
https://www.figma.com/file/uLGXkg8UvrxS6kG6858jEs/Untitled-Copy?node-id=0%3A1

3. https://www.figma.com/file/lGEkztWtxdorgBYZyvHPan/%D0%93%D0%BB-%D1%81%D1%82%D1%80-ivi?node-id=0%3A1

Комментарий frusia.pro: Добрый вечер

Задание 2

Все, кроме первой иконки нарисованы отлично. В первой иконке искажена форма кружков, поэтому она не совсем передает суть.

Задание 3

В целом во флоу нет ошибок, но было бы хорошо если бы вы прикрепили ссылку на предыдущее задание, где вы рисовали флоу от руки.

Задание 4

Вы нарисовали только один экран сайта, но все выглядит хорошо, очень похоже на оригинальный сайт. Молодец!

Serhio4 January 2021 17:51  
Корректная ссылка
https://www.figma.com/file/AKRUQrNAPzg4XyoRe9bqSi/Untitled?node-id=0%3A1
Иконки
https://www.figma.com/file/0pr0HTLmNgEXKEt7Q6V4d6/Untitled?node-id=0%3A1

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

Задание 1

Отлично. Было бы хорошо, если бы вы расписали, с какими трудностями столкнулись при выполнении этого задания. Могу придраться к диагональным надписям "Black Friday" в цветных прямоугольниках, так как это растровые изображения, а не текстовые блоки.

Задание 2

Вы исправили все отмеченные мной моменты, замечательно!

Хорошо справились, продолжайте обучение.

Serhio14 December 2020 23:31  
Добрый вечер
https://www.figma.com/file/xhHeIutfErisEdjcp9yqqG/Untitled?node-id=0%3A1
https://www.figma.com/file/0pr0HTLmNgEXKEt7Q6V4d6/Untitled?node-id=0%3A1
https://www.figma.com/file/JQ8DuaLIGotuk45GATWfPI/Untitled?node-id=0%3A1

Комментарий frusia.pro: Добрый вечер

Задание 1

Первая ссылка не работает, получаю сообщение "File not found". Пришлите рабочую ссылку.

Задание 2

Иконки отрисованы хорошо, отлично справились. Есть пару мелких замечаний:

  • Третья иконка слева сверху. Обратите внимание, что высота всех иконок должна быть примерно одинаковой, у вас эта иконка значительно выше остальных;
  • третья иконка справа в среднем ряду. У вас получилась отраженная галочка, хотя по задумке – это стрелка вниз;
  • крайняя иконка справа внизу. У вас получилось, что внутри белых элементов кружки, хотя это два ряда зубов.

Задание 3

Вижу вайрфлоу по сценарию просмотра деталей курса, хорошая работа.

В целом хорошо, жду первое задание.

Анастасия9 November 2020 16:38  
1-е задание: https://www.figma.com/file/E1zoCNyGwFm7r4l1UhnZrG/lesson-4-task-1?node-id=0%3A1
2-е задание: https://www.figma.com/file/jkn4VxRMCBXUcEh3PInOXM/lesson-4-task-2?node-id=0%3A1
3-е задание: https://www.figma.com/file/SFZBxzWJqS9Kbt4BA52l4D/lesson-4-task-3?node-id=0%3A1

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

Задание 1

Отлично сделали, молодец. Подметила что в вашем дизайне правильная величина контейнера, шрифтов и кнопок.

Задание 2

С иконками вы тоже справились.

Задание 3

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

Люба Фурсеева23 June 2020 23:45  
Мария, стараюсь, спасибо!
Мария23 June 2020 13:21  
Все расписано понятно и доступно!
Люба Фурсеева11 June 2020 19:19  
Alexander, спасибо! Следующий урок уже готов. Будет опубликован 13 июня.
Alexander 11 June 2020 14:29  
отличные уроки! с нетерпением жду очередной!

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