Frusia Pro
Learning
EN
Sign up

  • To start learning free UX/UI design course for beginners, please sign up

    just now

Search

Lesson 9. Frames. Grids. Guides. Components

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.

In the third part on the basics of Figma, we will learn to work with frames, pages, and files, so we don't get lost in the structure of a large project. We will see how powerful the capabilities of a frame are, how grids and columns help distribute objects and set margins. We will learn to use guides. For the first time, we will get acquainted with constraints and components.

You will be one step closer to working with large and serious projects.

Frames. Comparison with Groups

Frames in other programs are called artboards (artboard). But in Figma, they went their own way and invented a unique name. And quite reasonably, because frames have greater capabilities and flexibility than artboards; for example, in Sketch, it is impossible to place one artboard inside another.

Frame translates from English as frame, structure, skeleton. To simplify, frames can be compared to a painter's canvas or a working area. Typically, a frame (artboard) contains the design of a single page in a specific size. For example, a designer may place several frames side by side with one page for a laptop screen, tablet, and smartphone.

In previous lessons, while drawing whole pages, we unknowingly used groups instead of frames. Let's correct this shortcoming. Now, while working with the page/screen design, we will place all elements inside the frame.

Groups allow you to combine primitives and create logical units within a frame, significantly simplifying the work with the project. Frames are similar to groups but have a number of unique capabilities:

  • The frame has size and can have a fill color. In groups, the size is determined automatically based on the size of all objects inside. This feature allows exporting images with padding on both sides, which is useful when saving icons. In the frame settings, you can find a large list of size templates from various device screens (popular smartphones, smartwatches, and tablets) and even to Instagram stories or Facebook posts;
  • Each frame has its own coordinate system. The coordinates of objects inside will be calculated relative to the top left corner of the frame's boundary;
  • The frame can crop its content that goes beyond its borders. That is, everything outside the frame will be hidden if the Clip content option is enabled. This feature is called masking;
  • The frame can display layout guidelines, namely a grid, vertical and horizontal columns, and can also include guides. These tools are designed for precise placement and alignment of layout objects;
  • When resizing the frame, you can specify how the objects will behave. For example, a button can stick to the top of the screen and stretch across the width. This feature is called constraints.

Now we will review and learn to use each of the listed functions.

Creating a frame. Changing size and fill

The process of creating a frame is no different from that of a rectangle. Besides, you need to select the tool with the grid image or press F. Then, hold down the left mouse button in the workspace and drag the mouse. Release the left mouse button to set the dimensions.

Next comes the most interesting part. In the right panel, similar to the rectangle, the background fill color (Fill section) will already be set. You can resize the frame using the old methods, by dragging the edge or entering an exact size in the W (Width) and H (Height) fields. But now we have a new dropdown menu with size templates in the top left corner of the properties panel – Frame. Check out what templates are available there and try applying at least a few of them.

How to Place Objects Inside a Frame

There are several simple ways:

  • Select and drag all objects within the frame boundaries;
  • Select, cut the necessary objects (Command + X on macOS or Ctrl + X on Windows) and paste (Command + V on macOS or Ctrl + V on Windows) after selecting the frame.

After these manipulations, the objects will be inside the frame, which will be visible in the layers panel, as the inserted objects will be displayed with an offset (just like in groups). Try selecting the object inside the frame, pay attention to the values of X and Y – they have changed, as now the top left corner of the frame is the new origin of the coordinates.

Simple mask – trimming the frame content

Using the Clip content option in the properties panel, you can trim the content of a frame to its rectangular boundary, which depends on the width (parameter W – Width) and height of the frame (parameter H – height). This technique is called a mask. Thus, you can hide parts of objects using the shape of another object; in our case, this is a frame and a rectangular shape. Here’s an analogy: by cutting a square hole in paper and placing it over a photograph, you get an example of using a mask in the real world.

Adding a Grid

Frames allow displaying auxiliary grids that can be flexibly adjusted to facilitate the alignment and positioning of objects. To do this:

  1. Select the frame;
  2. Click on the plus sign + next to the Layout Grid section – a grid with standard red settings and a 10-pixel step will be displayed;
  3. Click on the icon to the left of the Grid (10px) label to configure the grid. In the dropdown window, you can set the grid step (Size), line color (Color), and opacity;
  4. The grid can be temporarily hidden or removed by clicking the eye icon or minus accordingly on the right;
  5. You can add several grids of different colors within the same frame if needed.
  6. To temporarily hide grids on all frames, press Ctrl + G. Repeat the key combination to show them again.

The grid can be used as an assistant for drawing shapes, banners, and illustrations. Its main advantage is that when moving objects, they seem to "stick" to the grid lines, thus helping you position the object in the desired location. The same goes for scaling – the object's edges stick to the grid guides.

In general, grids are used quite rarely. However, the columns that will be discussed next are used constantly.

Adding Columns and Rows

Vertical columns are often used in web page design. Their configuration is slightly more complex than a grid:

  1. Select the frame;
  2. Click on the plus sign + next to the Layout Grid section – a standard grid will be displayed;
  3. Click on the icon to the left of the Grid (10px) label. In the dropdown window, click on Grid in the upper left corner;

  4. In the dropdown menu, select Columns. Immediately after this, in addition to color and opacity, a row of new parameters will appear:

    • Count – the number of columns;
    • Type – the type of column construction. You can choose one of the options: Left – columns are placed on the left edge, Right – on the right, Center – aligned to the center, Stretch – stretched across the full width of the frame;
    • Width – the width of the column in pixels. This parameter is calculated automatically if the column type is set to Stretch;
    • Offset – left margin if the column type is set to Left. For the Right column type, this is the right margin. For the Stretch type, this is the margin on both sides. This parameter is automatically calculated for the Center column type;
    • Gutter – the distance between columns.

Let's set up a popular grid from the Bootstrap framework that developers often use when designing web pages. For this, we will need a frame that is 1440 pixels wide and 900 pixels high, which corresponds to the dimensions of a typical laptop screen. The grid itself is 1140 pixels wide and consists of 12 columns. The width of each column is 65 pixels, and the space between them is 30 pixels.

Similar to a grid, objects will stick to the edges of the column, which is very convenient for quickly aligning primitives in a line and aligning them in blocks.

Besides columns, there is the possibility to set rows. To do this, simply select Rows from the dropdown menu. All parameters are identical to columns, only Width is replaced with Height. I have not had to use this type of grid, but perhaps in certain cases it may be useful.

Guides and Ruler

Various types of grids make the designer's job easier, but there is an even more useful tool – guides. This is a vertical or horizontal line that the designer can place anywhere. There can be many of these lines, and you can reproduce any grid using only guides. Objects will snap to these lines just like they do to grids. To create a guide:

  1. Select the frame if you need a line specifically inside the frame;
  2. Enable the ruler using the keyboard shortcut Shift + R. It appears at the top and left edges of the workspace and shows the boundaries of selected objects in pixels. Remember that guides are only displayed when the ruler is enabled;
  3. Click and hold the left mouse button inside the top or left ruler to create a horizontal or vertical guide accordingly;
  4. Drag the cursor to the center of the screen. As soon as you go beyond the ruler onto the workspace, a guide will appear. Drag it to the point you need;
  5. Release the left mouse button to fix the position of the guide;

To change the position of the guide, drag it to a new position.

To remove a guide, you need to select it by clicking on it. The selected line will change to blue. Then press the Delete button on the keyboard. You can also simply drag the guide area of the ruler, and it will be removed as well.

To temporarily hide all guides, hide the ruler using the Shift + R keys.

And now an important moment. As you remember from the previous lesson, by selecting any object and holding down the Option key on MacOs or the Alt key on Windows, you can see the exact distance in pixels by hovering the cursor over another object. This same technique works for guides, which can be very handy. Let's see how this looks in practice (snapping objects to guides and distance hints to them):

Examples of Frame Usage

This list of frame capabilities is not exhaustive, but before we continue, let's look at a few typical examples of their use. Therefore, frames are often used as containers for:

  • Web page design for various devices (desktop PC, laptop, smartphone);
  • Design of mobile application screens for tablets, smartphones, smartwatches;
  • Set of basic colors;
  • Set of interface components (buttons, switches, icons, sliders, cards, header, footer, etc.);
  • Set of fonts (different weights and sizes);
  • Social media materials (stories, posts, banners, illustrations, infographics).

Behavior of frame content when resizing

If an object is inside a frame, you can specify how it should behave when the frame is resized. This capability is called constraint, which is read as констрейнт, and translates to limiter. It defines the behavior when resizing the frame:

  • Allows you to anchor the object's position to the vertical or horizontal side of the frame. In this case, when the frame is resized, it will maintain its size;
  • Or stretch the object by the width and/or height of the frame.

It will be easier to understand with an example. Look at the two squares below. The figure on the left is placed in a frame. The figure on the right is in a group along with a beige rectangle that serves as a background. Let's try to change the size of the frame and the group one by one. Note that the square on the left maintains its size and sticks to the bottom side of the frame according to the selected constraints. When selected, dashed lines appear indicating which constraints are active. On the right, when selecting the square, no auxiliary lines are displayed, and all components of the group stretch.

A reasonable question arises: why is this feature needed? After all, you can take several frames of different screen sizes for the same page and thus show how the content will behave. The benefit of this function is fully realized when using components.

First acquaintance with components

Components – are a special type of objects created based on frames for building commonly used interface elements. It sounds complicated, but in reality, components are used to create templates for buttons, dropdown menus, navigation, and more. To avoid drawing, for example, a button every time, you copy the button component, set the desired size and color, change the text – and you're all set! Sets of such components in Figma terminology are called component libraries. And for designers, they are referred to as UI Kit (pronounced yu-ai kit).

Why complicate everything? In fact, components can save dozens of hours of work. Imagine a situation: you have 50 screens in a web application. Each has buttons. Suddenly, you receive a revision to "round all buttons." If the design was created using components, you only need to change the parent component (button template), and the rest of the changes will happen automatically. If everything was done without components, you would have to manually change each button.

This is where the power of components lies. And constraints play one of the key roles here.

We will dedicate a separate material to components, do not be afraid of their complexity. Moreover, components have other features that we will gradually touch upon. For now, we are just laying the groundwork for further work. In the meantime, to understand the benefits of components, take a look at the example below. At the top is the parent component (template), and at the bottom are three child components that inherit its properties. At the very bottom is a button made based on a regular frame. By changing the parent component, we automatically change all the children.

As you can see, the bottom button remains untouched because it is just a frame, not a component. I hope you already have your first impression of components and their usefulness in a designer's work.

While you do not yet know how to create components, it is necessary to fully understand how constraints work inside a frame first. Therefore, let's return to them.

Types of Constraints (Constraints)

Let's create a few buttons inside frames with different constraint settings. We will consider the simplest of them:

  • Vertical Limits:

    • Top – the object sticks to the top edge of the frame;
    • Center – the object is centered in height within the frame;
    • Bottom – the object sticks to the bottom edge of the frame.

  • Horizontal Limits:

    • Left – the object sticks to the left edge of the frame;
    • Center – the object is centered in width within the frame;
    • Right – the object sticks to the right edge of the frame.

I created 9 frames (buttons) with all possible combinations of the aforementioned constraints. See how the objects behave inside the frames during scaling.

There are several types of constraints:

  • Left & Right – a type of horizontal constraint. Forces the left edge of the object to stick to the left side of the frame, and the right edge to the right side of the frame. Allows the object to stretch in width with fixed margins on the left and right;
  • Top & Bottom – a type of vertical constraint. Forces the top edge of the object to stick to the top side of the frame, and the bottom edge to the bottom side of the frame. Allows the object to stretch in height with fixed margins on the top and bottom;
  • Scale – the object scales proportionally to the frame in width and/or height. In this case, the margins to the frame are not fixed and will change proportionally to its size.

Experiment with different combinations of constraints and make sure you understand how they work. If you have any questions, leave a comment under this lesson. The topic is not easy for beginners.

How to adjust the frame size to fit the content

If you need to trim the frame exactly around its objects, just click the corresponding button in the properties panel:

Pages and Files

In addition to frames in Figma, there are higher-level structural units:

  • Pages – contain frames within themselves;
  • Files – consist of pages;

All this time we have been working within a single page of one file. To create a new page:

  • Click on the name of the current page Page 1 in the top right corner of the left panel to show the list of all pages;
  • Click on plus + to create a new page;
  • Enter the name of the new page;
  • Press Enter to save the name.

Now you can work with the new page, navigate to another page by clicking on the title, or hide the page panel by clicking on the title of the selected page in the upper right corner of the left panel. Additionally, by right-clicking on the page title, you can:

  • Copy Link to Page – copy the link to the page to the clipboard to share;
  • Duplicate Page – make a copy;
  • Delete Page – delete. This command is available only if you have at least two pages;
  • Rename Page – rename the page. As with layers, double-clicking works.

Let's see how working with pages looks in practice:

Don't forget to give your files meaningful names. To rename your file, simply click once on its name in the upper left corner.

To select another file or see others, just go back to the file list in the Drafts section and select the file you are interested in from the right panel.

Page Organization

Let's take a look at what makes up a typical project. At first, it's a single Page 1, but as it grows, pages with the following names appear:

  • User flow name – the name of the user flow/scenario. That is, each individual scenario is placed on a separate page. In some cases, several scenarios can be placed on one page if they are similar (for example, registration, password reset, site login scenarios);
  • References/Moodboards – references from the client and moodboards created based on them. There may also be information about the project here;
  • Thumbnail – the page with the project cover that is displayed in the preview in the Drafts/Recent section. To apply it, you need to create a frame sized 1920x960 pixels, draw the cover itself, and in the drop-down menu from the right-click on the frame, select Use as Thumbnail;
  • Components – the page with the components that you use. Often, entire libraries of components have to be imported; in this case, the name of the library and its version is written. For example, Ant Design UI Kit (1.2) (ant.design v4 update) (Light Theme);

Each designer has their own rules and habits for naming and structuring pages; there are no strict dogmas here. I just showed how this looks in some cases for me. Another example: a UI page is created with a bunch of screens (frames) of the final design and UX – for all the wireframes.

Project Hierarchy

Usually, one file is enough, but in large projects, sometimes separate files distribute the design across platforms. For example: Web, Mobile, Desktop. Sometimes a separate file contains the component library, but keep in mind that you will need a paid subscription.

For a beginner, one file per project will be sufficient. With experience, at some point, you will realize that you feel cramped and digging through dozens of pages takes a lot of time. Or you may want to use more advanced features of Figma.

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 Telegram chat. Here you can ask questions related to the lessons or view examples of correct work from other students.

The chat is not available for citizens of Russia.

Task 1. Select a website of your choice and draw its header, footer, or any other part using constraints. Your task is to set up the content of the frame in such a way that part of the elements sticks to the left side, while the other part sticks to the right. For example, the logo may use the Top and Left constraints. A correctly completed task should contain a frame for each part of the website (a separate frame for the header, a separate frame for the footer, and so on). All these frames should be inside another frame (the design of the site);

Task 2. Create 9 buttons and set the constraints in such a way that they replicate the behavior shown in the first video in the section Types of Constraints of this lesson. To check, select all 9 frames and resize them as shown in the video. Use combinations of constraints including top, center, bottom, left, right. Each button should be a separate frame and contain at least a fill and text;

Task 3. Draw a feedback form. It should include fields for "Name", "Email", "Message", and a "Send" button. The fields should stretch along with the form when we change its width. Hint: you will need Left and Right constraints. The feedback form should be in a separate frame.

To check this homework, please provide a link to the file with viewing permissions. If you forgot how to share a file I wrote in this lesson.

Conclusions

Now you have an understanding of frames, constraints, and even a bit about components. Make sure you are well acquainted with all the topics of this lesson. Most often, you will need to use guides and grids. Please note, that the material is pretty complex, especially regarding the components and constraints. Review it in a few days, practice. It is not absorbed 100% the first time.

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

Figma Design education
Views: 4,319
Leave a comment







Place the handle into the purple zone


Comments
Marho24 August 2025 10:43  
Hello! https://www.figma.com/design/rBAKV50B0k6gSRTYrBLtbM/Untitled?node-id=10-2&p=f&t=rQCV5A2ZUFz3fiZB-0
Comment from frusia.pro:
Task 1. I see a website with a header and footer that nicely adjusts to width changes. The central part does not "stretch", but that is not important for this task. The constraints are set correctly, well done!
Good start, but I don't see the second and third tasks. Let me know when you finish working on them.
Anastasiia7 August 2025 12:39  
Good day. 

Homework for lesson 9

https://www.figma.com/design/7EKGDZKooAbVNbvGmAJ5mN/HOMEWORK--9-10-?node-id=0-1&t=8iZI12u0CCOm2hJW-1
Comment from frusia.pro:
Hello!
Task 1. I see a food delivery website and a header with set constraints. Everything is correct!
Task 2. You have accurately repeated the behavior of the frames; they work just like in the lesson.
Task 3. I see a form with set constraints for text fields, everything is also working correctly.
You have done very well with the frames and their constraints, great job! Move on to the next lesson!
skazhena cherepakha26 February 2024 11:22  
I agree.... I really messed things up. 

But I've fixed everything now! :)
Comment from frusia.pro:
I reviewed it, everything is fine. The only thing is, please check the settings again on these two buttons.
Constraints for them should not be "Top".
skazhena cherepakha20 February 2024 14:36  
oh, these constraints... how often do designers use them? I still couldn't get the feedback form right...

and also -- even after the first stretching of the frame, the figures inside no longer have whole numbers, but fractions. As far as I know, designers should avoid that... (by the way, can you explain why?) 

the topic is not easy, but still, thank you very much for the course! ))



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=210%3A17&mode=design&t=wPUifMLtsxU6ED9y-1
Comment from frusia.pro:
Hello! I’m answering your question:
About constraints. Understanding how constraints work is fundamental and useful, especially when working on larger projects. This knowledge lays the groundwork for an even more advanced level of tool mastery – auto-layouts. So I recommend rereading this topic a few times and trying different reproduction options in practice.
About the harm of half-pixels. We try to avoid fractional numbers because it makes it difficult to align objects relative to each other. Small discrepancies appear, and they are hard to work with. Check in your Figma the following setting, it should eliminate fractional numbers in your layouts in the future.
About the usefulness of half-pixels. The setting from the screenshot can sometimes be useful to enable. For example, when you are drawing icons with small details in Figma.


About your homework. I left detailed comments that should help you. My advice, if you get confused (not only here, in other topics too), start the task from the beginning. Reread it and try again. I wish you good luck, and write if something doesn’t work out 
Yuliya LepenkoUkraine flag підтримує ЗСУ 18 September 2022 23:10  
Hello:)

Thank you for the feedback. After creating separate frames, I grouped them together, I didn't realize that they should be combined into a single frame)) I fixed it. 



https://www.figma.com/file/xSk0BHiIjCZakBmALVRkmP/icons?node-id=90%3A2
Comment from frusia.pro:
Hello! Yes, now the site elements are inside the frame and properly configured. As a result, everything stretches correctly, well done! I'm looking forward to the homework for the next lessons 
Yuliya LepenkoUkraine flag підтримує ЗСУ 16 September 2022 12:09  
Good day!)



https://www.figma.com/file/xSk0BHiIjCZakBmALVRkmP/icons?node-id=90%3A2
Comment from frusia.pro:
Good evening 
Task 1. Set up the site element constraints. Each element is correctly configured separately, but keep in mind that instead of the main frame, you used a group. Ideally, a frame should also be applied. To fix this, simply convert the group into a frame and adjust the other frames accordingly. I showed in the video how to do this:

https://drive.google.com/uc?id=1t5FaiLxWETNAA_MYA0le_oB_piQBBYMo
Task 2. Set up the button constraints. Everything is correct!
Task 3. Set up the feedback form constraints. Everything is also perfect!
I am waiting for your correction on the first task 
Viktoriia HryshchenkoUkraine flag підтримує ЗСУ 8 August 2022 21:07  
Good evening! I fixed it) Thank you for the video!

https://www.figma.com/file/PoTVfPtGJw6X5Rn3Ga7kXk/%D1%83%D1%80%D0%BE%D0%BA-6?node-id=0%3A1
Comment from frusia.pro:
Good day! Yes, now everything is great, the site elements move together with the main frame, well done! This homework is completed, there are no more comments.
I see that you have already submitted the homework for the next lesson, I will check it soon 
Viktoriia HryshchenkoUkraine flag підтримує ЗСУ 6 August 2022 19:07  
Good evening!

https://www.figma.com/file/PoTVfPtGJw6X5Rn3Ga7kXk/урок-6?node-id=0%3A1
Comment from frusia.pro:
Task 1. Set up the site element constraints. Overall, everything is great, you figured out how to set the constraints. There are a few minor comments, I corrected everything and showed it in the video. The main thing that can be improved is to set the frame constraints inside the main frame. I also showed this in the video:

https://drive.google.com/uc?id=16N9VRBQMhsLBsZdAEAl52oe2ow4FwSP4
Task 2. Set up the button constraints. Everything is correct.
Task 3. Set up the feedback form constraints. Everything is also correct!
I am waiting for the corrections to the first task 
Mariia SUkraine flag підтримує ЗСУ 9 July 2022 19:20  
Good day, I fixed the footer in the first task. Thank you for the video!)

https://www.figma.com/file/dWGWKQPPPZULkadAnpuvMX/Frusia?node-id=22%3A714
Comment frusia.pro:
Hello! Please  Yes, everything is fine now. Proceed to studying the next lesson 
BohdanaUkraine flag підтримує ЗСУ 9 July 2022 14:01  
Liuba, congratulations!

Thank you for the video explanation of my corrections! It helped a lot, and from my own example, I finally understood the purpose of these alignments and what to do with them ;) I tried to make corrections on the example of another site with the footer and header, and of course, I corrected the homework for this lesson)



https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=202%3A18



Thanks for the review! Have a great day ;)
Comment from frusia.pro:
Hello! I'm very glad that the video helped 
Now everything is correct for all tasks, well done! In the new site, the white line at the top of the footer is not stretching, but I think it was just missed because the same line at the bottom stretches as it should.
This is a very complex topic, but it seems that you have understood it well. Move on to the next lesson 
Mariia SUkraine flag підтримує ЗСУ 6 July 2022 16:18  
Good day

https://www.figma.com/file/dWGWKQPPPZULkadAnpuvMX/Frusia?node-id=22%3A714



If you need editing access, I will send an invite to your email
Comment from frusia.pro:
Hello! Editing access is not needed, as I always create a duplicate of the file that is already available for editing, but thank you for offering 
Task 1. Set up site element constraints. The header is great, but I have questions about the footer. Specifically, the arrow stretches when the frame width changes. Also, the footer elements on the right are not fixed to the right side. I recorded a video on how to fix it:
https://drive.google.com/uc?id=1QCLshYmBVKlKpbgDr0nczx4WEcBqAJvF
Task 2. Set up button constraints. Everything is correct.
Task 3. Set up form constraints. Everything is also correct, well done!
I am waiting for the corrections on the first task 
OlhaUkraine flag підтримує ЗСУ 6 July 2022 13:54  
Good day) 

https://www.figma.com/file/hKkNTKgqHq9oqASXYO0qPs/%D1%83%D1%80%D0%BE%D0%BA-6?node-id=0%3A1
Comment from frusia.pro:
Good day!
Tasks 1-3. Everything is done perfectly, well done! I also really liked how each task was executed from a visual point of view.
Proceed to lesson 7 
Yana UsachovaUkraine flag підтримує ЗСУ 6 July 2022 13:03  
Good day, thank you for the feedback, I tried to fix everything, but I might be a bit of a fool(((

https://www.figma.com/file/NDNqWzbRGvrA8Xctl1jaT9/Page-1?node-id=0%3A1
Comment from frusia.pro:
Good day! You corrected everything correctly for each task, well done! When you have time, periodically return to the constraints, as the topic is quite complex.
Proceed to the next lesson 
Yana UsachovaUkraine flag підтримує ЗСУ 4 July 2022 15:02  
Good day, thank you for the opportunity to learn from you

https://www.figma.com/file/NDNqWzbRGvrA8Xctl1jaT9/Page-1?node-id=0%3A1
Comment from frusia.pro:
Good day! Please 
Task 1-3. Each task has mistakes, so I recorded a video on how to fix them. Try to repeat it, and most importantly, understand why the selected constraints are used in each case.
https://drive.google.com/uc?id=1KdXPxFZObXlVPX_LG9wT7ymDMm1iPglz
Also, to better understand, create an empty frame and add a rectangle inside. Then sequentially change the constraints of the rectangle, and then change the size of the frame. Pay attention to how the rectangle behaves with different constraint settings.
I am waiting for the corrections 
BohdanaUkraine flag підтримує ЗСУ 3 July 2022 07:58  
Hello!

Most likely there are mistakes in the homework, but I want you to take a look and give your recommendations. Because my head is not working anymore...

Thanks for the new and interesting info, I understand that if I figure this topic out, I will be able to save a lot of time on little things ;)

https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=144%3A2



Wishing you a peaceful day and a wonderful mood!
Comment from frusia.pro:
Hello! Likewise 
Yes, there are mistakes, but nothing serious. Constraints are quite a complex topic. I recorded a video for each task. It should be clearer this way. The main thing is to understand that constraints activate on the object when the size of the frame they are in changes. There can be a situation where one frame is inside another frame, and within it is the object for which we are setting the constraints. Here, the constraints of the object + the frame that is inside the frame will have an effect. It's better to experiment on simple examples to understand.
Tasks 1-3. I recorded a video on how to fix it, try to repeat and understand what is wrong.
https://drive.google.com/uc?id=1hxpPFmc69hWQe_nsQ92rDHUrXz4C1__n
https://drive.google.com/uc?id=1eU9CqnjYcDp7tWsbP3F5vsPg1Tdm6QlC
I am waiting for the corrections 
AnnaUkraine flag підтримує ЗСУ 29 June 2022 14:28  
https://www.figma.com/file/TCjqOcRMlzbumDDwZsl0fM/Untitled?node-id=5%3A34



Good day, I have corrected it!

I am very grateful for the video, it helped me a lot.

I really haven't realized many logical moments yet.
Comment from frusia.pro:
Good day! Please, now everything is pulling correctly, well done! Over time, you will master all the nuances 
You have understood the constraints well. This is actually a very complex topic, but for now, it's enough. Move on to the next lesson 
AnnaUkraine flag підтримує ЗСУ 28 June 2022 14:45  
Good day) I am sending this knowing about the mistake in task 1. The header and footer stretch separately, but not together. I don't know what to do anymore( 

https://www.figma.com/file/TCjqOcRMlzbumDDwZsl0fM/Untitled?node-id=5%3A2
Comment from frusia.pro:
Good evening!
Task 1. Set the constraints for the header and footer. There are several reasons why they do not stretch together:
  • The group with the footer "Footer" is not located in the center of the frame "Site Design". You can verify this by looking at the layers panel. So we need to move it to the center of the main frame;
  • The footer and header are grouped, but they should be frames. So we convert them into frames;
  • You need to set the constraints for the header and footer to "Left and Right";
  • Make sure that the inner elements of the header and footer have "Left" or "Right" constraints.
I recorded a video to make everything clear:
https://drive.google.com/uc?id=1xxKQOpPNqhs7twxxuWA_7BUnUgAo_akN
Task 2. Set the constraints for the buttons. Everything is correct.
Task 3. Set the constraints for the form. Everything is fine here except for the text alignment. The text fields need to have left alignment. I also recorded a video:
https://drive.google.com/uc?id=1Bj_TCwcEjjwpGJfluhLhbGh8aQuMVYVl
I am waiting for the corrections 
Iryna S.Ukraine flag підтримує ЗСУ 22 June 2022 21:09  
Good evening! I'm sending the edited homework. Regarding the footer, it shows me that everything is set up as you indicated; perhaps I didn't change something last time. I also corrected the 3rd task.

https://www.figma.com/file/DAscpBPpOZt1qCWW6Ca83a/frusia.pro-%D0%94%D0%B7-6-%D0%86%D1%80%D0%B8%D0%BD%D0%B0-%D0%A1.?node-id=0%3A1
Comment from frusia.pro:
Good day! Yes, now everything is fine: the footer stretches and the text in the form fields is aligned to the right.
Proceed to the next lesson 
Iryna S.Ukraine flag підтримує ЗСУ 21 June 2022 22:07  
Good evening! I am sending the homework for lesson 6.

https://www.figma.com/file/DAscpBPpOZt1qCWW6Ca83a/Homework-6?node-id=0%3A1
Comment from frusia.pro:
Good day!
Task 1. Set up constraints for the header and footer. I see the header is set up correctly and the footer is partially set up. To ensure the latter behaves correctly when the width changes, it is enough to specify a horizontal constraint on the Right for About_company, Values. For the Subscription group, a constraint should be set on the Left and right.
Task 2. Set up constraints for the buttons. Everything is correct.
Task 3. Set up constraints for the form. Everything is also correct. It remains to align the text to the left for the name, email, and message.
Good job, but I am waiting for the corrections 
Alona HurUkraine flag підтримує ЗСУ 10 June 2022 21:18  
Good evening, here is the link to the homework: https://www.figma.com/file/co8AdXKU0E13pdJN92XMek/%D0%A3%D1%80%D0%BE%D0%BA-6%2C-%D0%94%D0%97-1?node-id=0%3A1
Comment from frusia.pro:
Good day!
Task 1. Set up constraints for the header and footer. The footer is correct, but there are comments regarding the header:
  • The image 1 element needs to have constraints set for Left and right;
  • The Rectangle 1 element also needs constraints for Left and right.
After this, the header will stretch correctly.
Task 2. Set up constraints for the buttons. Everything is correct, well done!
Task 3. Set up constraints for the form. Everything is also correct.
Very good, please correct the constraints in the first task and move on to the next lesson 
Anna SmirnovaUkraine flag підтримує ЗСУ 9 June 2022 14:36  
Good day!

Thank you for such a useful lesson!!!

I’m sending a link to the homework: https://www.figma.com/file/XvJv4GfKTam2WuwAKxGlHm/UI%2FUX-course-hw's?node-id=0%3A1



Could you please tell me why we place the header and footer in different frames within one? Do they behave differently then? I just tried it both ways and didn’t see any difference, I would like to understand. I would be very grateful for your answer!
Comment from frusia.pro:
Good evening, I’m glad the lesson turned out to be useful 
Task 1. Set up constraints for the website elements. I see the footer and the message window are set up. Correct.
Task 2. Set up constraints for buttons in frames. All button constraints are set up correctly. It’s also interesting that the button itself is made as a component, well done!
Task 3. Set up constraints for the form. Everything is done correctly, the fields stretch, the button is fixed.
Regarding your question. Complex components should always be made inside frames because you can very flexibly adjust their behavior when resizing using constraints. That is, yes, the content of the frame will behave differently. Of course, buttons, tabs, icons, header, footer, and other elements are made as frames. It’s especially convenient to use frames for components. At this stage, you don’t need to overthink and can create groups when it’s convenient for you.
You’ve gained a good pace, keep moving forward 
InnaUkraine flag підтримує ЗСУ 7 June 2022 18:37  
Good day, I am sending the link to my homework https://www.figma.com/file/WA1X3Mq1qkL2n2DveCtO6y/Lesson-6?node-id=0%3A1 

Thank you for the lesson!
Comment from frusia.pro:
Hello!
Task 1. Very good, the header and footer stretch correctly. For practice, try setting the left and right, top constraints for the header frame. Set the left and right, bottom constraints for the footer. Now change the size of the main frame (which includes the header and footer) and see how the elements behave.
Task 2. Everything is correct, well done!
Task 3.  Everything is also correct.
Great job, everything is done clearly according to the task. Move on to the next lesson 
KaterynaUkraine flag підтримує ЗСУ 30 May 2022 10:17  
https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/Untitled?node-id=137%3A642



Good day!)

I am sending it for a re-check))
Comment from frusia.pro:
Good morning!
Tasks 1 and 3. Now everything is okay, the Send and Load more buttons stretch as they should when changing the width of the main frame.
Proceed to the next lesson 
KaterynaUkraine flag підтримує ЗСУ 28 May 2022 23:05  
Good evening!



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



I made the corrections)
Comment from frusia.pro:
Good evening!
Task 1. Maybe I didn't explain it quite right. In your case, you need to set the Left and right, Bottom constraints for the Rectangle 80 shape. For the text block with the title Load more, you need to set the constraints to Center, Center. After that, when changing the width of the main frame, the button will stick to the left and right edges. Try doing it this way. Ideally, it would be good to wrap the fill and text of the bottom black button in a frame.
Task 3. The button stretches incorrectly when changing the width of the main frame with the form. You need to set the Left and right, Bottom constraints for the background button Rectangle 65. For the text block Send, you need to set the constraints to Center, Center. Then everything will work correctly.
Try to make the corrections 
KaterynaUkraine flag підтримує ЗСУ 28 May 2022 11:43  
https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/Untitled?node-id=0%3A1



Good day

the link to the first task is in the title
Comment from frusia.pro:
Good day!
Task 1. Correct, but please set the text element of the button at the bottom to have constraints set to Center and Center, so that the text is centered.
Task 2. Everything is correct.
Task 3. Good, the form elements behave correctly, but the icon in the button should not stretch. So set its constraints to Right and Center. For the button text, you need to set the constraints to Center, Center. Try it and see how the behavior changes when you adjust the width of the main frame.
I am waiting for the corrections 
Sofiia13 May 2022 14:44  
Good day, I am sending the assignment for review)

https://www.figma.com/file/PzeXpMEI2tHJ4d1AgNSOc4/Untitled?node-id=7%3A153
Due to the large influx of those wishing to take the course, I am making the review of homework paid. $30 (at the current exchange rate), I will donate 10% to the Armed Forces of Ukraine. For one donation, I will review the homework for all lessons.

For the payment details, please write to the direct message on Instagram @frusia.pro
Veronika7 May 2022 13:00  
Good day!



I have taken your comments regarding the unified style of names for groups and frames into account, thank you for the feedback on the icons, I didn't pay attention to that!



In the first task, I again based my design on the website from bihens. I encountered a problem with the first task due to a misunderstanding of proper website adaptability (that is, what and how should change, scale/move, etc.), I tried to make it so that the elements in the footer and header stretched proportionally. I did this through the specific placement of the logo (outside the main grid), although in another case I might have done it so that all elements remained in their positions relative to the center (like the main content, which does not scale or stretch for me).



I decided to keep the main content fixed relative to the center without stretching; I just don't know yet what other options might be for such a situation due to my lack of knowledge))



All tasks are in different pages))



Thank you once again for your feedback, after each submitted task I really look forward to your comments, it's interesting to learn your remarks and thoughts))



https://www.figma.com/file/qRUbBNt7m59btkeIPtIQaa/%D0%A3%D1%80%D0%BE%D0%BA-6?node-id=6%3A2
Comment from frusia.pro:
Good day! Yes, at first it may be unclear which constraints to use in which case, but with practice everything will fall into place. The main thing is to get into the habit of setting constraints and not to forget about them. This is not always necessary, but while you are learning, do this whenever possible.
Centering and fixing the main content by width is quite a typical and correct solution, everything is good.
Task 1. Very good, but try to change a few constraints (I labeled them according to the names of the layers in your file) and see how much better the website design behaves when changing the width of the main frame. I described it in as much detail as possible:
  1. Sidebar (with logo): Top, left. Now the position of the logo and the links to social networks do not shift when scaling. This is how it should ideally be.
  2. Main page → image: Left & right, top. Similarly, the margins from the left of the image will become constant.
Task 2. 9 buttons with different constraints. Everything is correct, well done.
Task 3. Feedback form. Also correct.
I want to praise you, it seems you have figured out the constraints. Moreover, you are already using components. The names of the layers are also fine now 
Proceed to the next lesson!
Veronika6 May 2022 14:36  
Good day!



I have a question about how to calculate the actual size of a website (that is, to take into account not just the size of the screen itself, but also the space taken up by the browser's top panel with tabs and the bottom panel of the operating system).

For example, if I want to ensure that the content of the main page is not cut off when the website is opened, how can I consider the real parameters of the visible space of the website in the browser?



I understand that one can, for example, take a screenshot of the browser and calculate the visible part of the website that way, but I'm curious how this is actually done))



I hope I explained it clearly! Thank you in advance if you can respond!)
Comment from frusia.pro:
Good evening!
There is no exact answer; you need to orient yourself to the screen size for which you are designing. For example, a 15-inch laptop will have a size of 1440x900 pixels. From the height, subtract approximately the height of the browser and the main system menu to get the height of the first screen. The problem is that the height of the browser and system menus will vary for everyone, depending on the operating system (macOS, Windows, Linux) and settings (the start menu can be either horizontal or vertical).
Therefore, the method you proposed for calculating the height of the first screen, when we take a screenshot and calculate the height ourselves, is not as far from the truth as you might think 
Elvira8 April 2022 11:18  
Good day, Liubov!

Thank you for your work!

https://www.figma.com/file/Qh7v8Z0DP3MNCILBK9Wtpo/HW6?node-id=0%3A1
Comment from frusia.pro:
Task 1. I don't know if you checked the correctness of the settings yourself, but there is one mistake in the responsiveness of your header. The pink background under the menu item should remain unchanged in size, as the word itself will not change; this can be achieved by combining these menu items into a separate frame and anchoring it to the left. You can also inquire separately about what auto layout is and how it works, but this is not covered in this lesson, so it's not necessary.
 On this site, all footer elements are essentially centered, so the width constraints should be set to center. Another mistake is that the country flags are stretching (losing their shape). This can be fixed by setting each flag to have a left constraint instead of scale. And for the overall frame with them – again, center.
Task 2. The buttons are fine, good job.
Task 3. The form works correctly, but there are issues with the icons in the first field. They have the scale setting specified, and it looks like this. You need to set the right constraint for both icons.
Andrii D'iachenko13 March 2022 20:06  
Thank you very much for the lesson!!! I learned a lot of new and very useful things!!! You are the best!!!
Liubov Furseieva27 November 2021 13:19  
Klkiv, thanks!
Klkiv20 November 2021 03:49  
Thank you, your site is very useful! 
Polina16 November 2021 19:46  
Good evening, thank you very much!



I became interested in what tool you used to extract 3D illustrations from the website?

-Settings->Additional tools->Developer tools.

There are usually photos, images, and icons from the website in the first folders :)
Comment from frusia.pro:
Super! It's great that you have such knowledge.
Viktoriia11 November 2021 12:22  
Hello! I have corrected the third assignment: https://www.figma.com/file/yfkhD232HoDEdTkllydu9z/Wildberries
Comment from frusia.pro:
Assignment 1. In the footer this part should ideally be attached to the right edge, try changing the settings.
Assignment 3. For all settings to work correctly, you need to work with frames, not groups. This is described in the lesson. You can switch from a group to a frame like this.
Polina10 November 2021 19:55  
Good evening!

Thank you for your hard work and knowledge, excellent lesson!) I kindly ask you to check my homework: https://www.figma.com/file/J94maPnOyH0MiMh60eKPuB/London-Express-(Copy)?node-id=0%3A1

Thank you in advance.
Comment from frusia.pro:
Task 1. Wow! You did much more than required. Very good approach, keep it up! The site copy is beautiful and neat. The task itself – the header and footer work as they should. Everything is great!
I'm curious, what tool did you use to extract the 3D illustrations from the site?
Task 2. Everything is correct.
Task 3. Everything is also correct. It's great that you applied the right settings not only for the margins but also for the block with the form, including the illustration.
Viktoriia28 October 2021 12:15  
Hello) Thank you for the assignments, please check the works:

1,3) https://www.figma.com/file/yfkhD232HoDEdTkllydu9z/Wildberries

2) https://www.figma.com/file/TEnpRdbzfmNOZ2ftukakUb/Buttons
Comment from frusia.pro:
Assignment 1. Overall, you did it correctly, but there are a few mistakes to pay attention to. Please take a look at this screenshot.
  1. If you start stretching the header, the location icon near the city gets stretched. You need to set the Constraints to "Left/Top";
  2. Also, double-check the settings for the search and camera icons. They currently have the "Scale" setting, which causes them to stretch when the width of the frame with the header changes. We can set the same settings for them as for the previous icon. You can also work on the search field, turning it into a separate frame, and set it up so that when we stretch the header, the field also stretches;
  3. The composition of the footer requires that this text is always centered in the layout and anchored to the bottom edge of the footer. Try turning the group with its content into a frame and set the "Center / Bottom" settings for them;
Assignment 2. Everything is correct.
Assignment 3. Unfortunately, it has been done incorrectly. Please try again to create such a form or correct the current one by re-reading the lesson or looking at the form settings from student Nina, which I attached in the comments above.
Nastia2 September 2021 13:18  
Good day :) Oh, it was quite challenging to figure out the constraints. I still feel like I'm getting confused by them))



https://www.figma.com/file/lp95cfAww18L0N8cvdyMP8/Untitled?node-id=0%3A1
Comment from frusia.pro:
Task 1, 3. Wonderful! You completed two tasks in one frame, it turned out great! Well done for using components.
Task 2. Everything is correct.
 For everyone who will be completing this task, Nina did an excellent job on her homework. It might help someone: Example of homework from Nina
Nina18 August 2021 00:56  
Here is the link to this homework

https://www.figma.com/file/IfxtvDK0cNvhOsZ77Tthgj/%D0%94%D0%B7-6?node-id=0%3A1
Comment from frusia.pro:
Task 1. Everything is great! The correct settings are specified for the objects, well done!
Task 2. Everything is also correct.
Task 3. Unfortunately, you made mistakes here, so when you stretch the frame, the objects behave incorrectly. Try to fix it by making different settings: the shape inside the frame needs to be anchored to the right edge of the screen, but right now you have the setting (scale). Also, keep in mind that when we group objects, we also need to specify the settings for each group. Try to redo it and send it again.
Maryna10 June 2021 14:14  
Liuba, thank you for the feedback))

I made corrections on tasks 1 and 3. I hope I fixed everything and didn’t miss anything)

https://www.figma.com/file/AMFpJ4Ys3pTswJ2DnwJ2cA/Lesson-6?node-id=109%3A2
Comment from frusia.pro:
Yes, you corrected everything correctly, well done! I hope it’s now clear why Left and Right limits are needed.
Maryna8 June 2021 13:44  
Thank you very much for your lessons! This lesson turned out to be quite difficult ( 

please take a look))

I am waiting for feedback)

https://www.figma.com/file/AMFpJ4Ys3pTswJ2DnwJ2cA/Lesson-6?node-id=109%3A2
Comment from frusia.pro:
Please , yes, the lesson is indeed not easy. If you have time, please write what moments were the most difficult to understand. Let's move on to the task breakdown:
Task 1. All header elements are not combined into one frame. You are also using a horizontal constraint of Scale, rather than Left or Right. Because of this, when you change the size of the main frame (which contains the entire page design), the header elements do not stick to the edges and gradually shift, causing the left and right margins to be inconsistent. To fix this, you need to:
  1. Set a Left constraint for the logo and menu items (TV channels, Movies, Series, ... Promotions) so that the elements stick to the left edge of the parent frame;
  2. and for the search icon, login, and menu items Login | Registration, set a Right constraint so that all these elements stick to the right edge of the frame.
The footer is better, all its elements are placed in a separate frame. But the horizontal constraint is set to Scale, which also makes the side margins inconsistent. Just select the footer frame and set the Left and Right constraints.
Task 2. You have two frames there, and in the second one (named Desktop - 2) everything is done correctly. Well done!
Task 3. A similar mistake as in the first task. Set Left and Right constraints for the fields so that they stick to the left and right edges. Also, set a Left constraint for the hints in each field. After that, the form will stretch as it should.
Otherwise, you did well! If there are any unclear points regarding the constraints, please ask questions, as this topic is very complex.
Liubov Furseieva31 March 2021 01:01  
Maria, please  You can use both frames and groups. The beauty of frames is that we can adjust the behavior of their content depending on the sizes. For simplicity, a beginner can use frames only for individual screens. For other elements, groups are sufficient. Later, we will go through many examples using frames. Additionally, frames are used as the basis for components.
Mariiа29 March 2021 22:18  
Thank you very much for the lesson! Did I understand correctly that most website elements (for example, product cards, buttons, forms, etc.) should be placed in separate frames, rather than in groups? And what about icons and images, for instance? Should they also go in frames? Or can they be in groups?
Anastasiia3 December 2020 14:36  
Liuba, I corrected the mistakes in the first and second assignments. Please take a look

1) https://www.figma.com/file/qA8yH5f6YU0D08R0KHWik0/task-6.1-wikium.ru?node-id=1%3A3

2) https://www.figma.com/file/goQ9YbLIjlRNcawqhFIvQ8/task-6.2_buttons?node-id=12%3A6
Comment from frusia.pro:
Everything is correct now in both assignments! You did a great job, move on to the next lesson!
Anastasiia26 November 2020 16:27  
Liuba, thank you for your time and feedback)



Homework:

1) https://www.figma.com/file/qA8yH5f6YU0D08R0KHWik0/task-6.1-wikium.ru?node-id=1%3A3

2) https://www.figma.com/file/goQ9YbLIjlRNcawqhFIvQ8/task-6.2_buttons?node-id=2%3A0

3) https://www.figma.com/file/E3GM5X6QQjd7gFuAI8JuVj/task-6.3_form?node-id=0%3A1
Comment from frusia.pro:
Please , let's go through each task:
Task 1. Very good, but the yellow button "Get Premium" would be better attached to the right edge, as you did with the gift icon and user avatar.
Task 2. There are a few mistakes:
  1. The left button in the center has incorrect constraints. It needs to be changed to Left and Center;
  2. The central top button needs to be set to Center and Top;
  3. The right bottom button – Right and Bottom;
  4. Wrap each button in a separate frame and add text.
Task 3. Everything stretches as it should. Well done!
When you correct the mistakes, leave a comment so I can double-check. Don't give up!
Aydana24 November 2020 14:44  
Lesson 6 - https://www.figma.com/file/4gL9aka1jNzjo8LjGMfAeI/Untitled?node-id=5%3A25
Comment from frusia.pro:
You forgot to set the editing access for the file (using the blue Share button). It's not a big deal, I just made a copy of the file.
Task 1. The constraints are set correctly in both the header and the footer. However, the text alignment in the header's navigation menu is incorrect (left-aligned), which prevents it from stretching properly. You just need to set the text alignment to right (see the screenshot http://prntscr.com/vtwn87). Also, an important note: the header, footer, and form should be inside separate frames, not in groups. Any object to which we apply constraints must be inside a frame for it to work correctly.
Task 2. The constraints are set correctly, but you just drew rectangles instead of buttons. A button should have at least text. To create a button, place the text inside the frame. Remove the rectangles themselves and use the frame's fill to set the color. This way, we will have 9 frames (buttons) inside the original frame (background).
Task 3. The feedback form has mistakes.
  1. All elements of the feedback form should be inside a frame, not a group;
  2. The components of each field (background and text) should have Left & Right constraints to stretch correctly.
Everything else is good. Please correct the mentioned issues and let me know so I can double-check the homework. If anything is unclear (the topic is very complex), don't hesitate to ask questions. I will try to explain it in simple terms.
Liubov Furseieva21 October 2020 23:10  
Ilya, I will try to finish as soon as possible 
Ilia21 October 2020 18:22  
I hope this topic will be revealed to us by the end of the year)
Ilia21 October 2020 18:21  
I meant after the topic "Portfolio and job search"
Liubov Furseieva19 October 2020 21:38  
Ilya, good luck, but this is far from the last lesson 
Ilia19 October 2020 18:20  
I hope I can find a job after the last step)
Ilia19 October 2020 18:19  
finally )















Cookie Policy

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

the terms of their processing.