Lesson 6. Frames. Grids. Guides. Components

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

In the third part on the basics of Figma, we will learn how to work with frames (artboards), pages and files, so as not to get lost in the structure of a large project. Let's see how powerful the frame is, how grids and columns help distribute objects and set indents. Learn how to use guides. Let's take a look at constraints for the first time and take a quick look at components.

You will no longer be afraid of large projects, you can easily structure any file and quickly navigate through its parts.

Frames. Comparison with groups

Frames are called artboards (artboard) in other programs. But Figma went their own way and came up with a unique name. And for good reason, since frames have more power and flexibility than artboards, for example, in Sketch it is impossible to put one artboard inside another.

Frame is translated from English as a frame, frame, skeleton. To simplify, frames can be compared to an artist's canvas or workspace. Usually a frame (artboard) contains the design of one page in a certain size. For example, a designer can place several frames side by side with the same page for a laptop, tablet, and smartphone screen.

In previous tutorials, when drawing entire pages, we unknowingly used groups instead of frames. Let's correct this omission, now working with page/screen design we will place all elements inside a frame.

Groups allow you to combine primitives and create logical units within a frame, making it much easier to work with a project. Frames are similar to groups, but have a number of unique features:

  • The frame has a size and can be filled with color. In groups, the size is set automatically, based on the size of all the objects that are inside. This difference allows you to export images with padding around the edges, which is useful when saving icons. In the frame settings, you can find a large list of size templates from all kinds of device screens (popular smartphones, smartwatches and tablets) and even Instagram stories or Facebook posts;
  • Each frame has its own coordinate system. The coordinates of objects inside will be relative to the upper left edge of the frame border;
  • A frame is able to clip its content that goes beyond its borders. That is, everything outside the frame's borders will be hidden if the Clip content option is enabled. This feature is called mask;
  • A frame can display layout layout, such as a grid, vertical and horizontal columns, and include guides within it. These tools are designed to accurately position and align layout objects;
  • When resizing a frame, you can specify how 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 (constraints).
Now we will look at and learn how to use each of the listed functions.

Creating a frame. Change the size and fill

The process of creating a frame is the same as a rectangle, except that you need to select the grid tool or press F. Next, hold down the left button on the workspace and drag the mouse. Release the left mouse button to set the dimensions.

Next, the most interesting. In the right panel, like a rectangle, the background fill color will already be set (Fill section). You can resize the frame the old way by dragging the edge or by setting the exact size in the W (Width) and H (Height) fields. But now we have a new drop down menu with size templates in the top left corner of the – Frame. See what templates are there and try to apply at least a few of them.

How to place objects inside a frame

There are some easy ways:

  • Select and drag all objects inside the frame borders;
  • Select, cut the desired objects (Command + X on macOs or Ctrl + X on Windows) and paste (Command + V on macOs or Ctrl + V on Windows) after the frame is selected.

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

Simple mask – clipping frame content

Using the Clip content option in the properties panel, you can clip the content along a rectangular border that depends on the width (W – Width parameter) and the height of the frame (H – height parameter). This technique is called mask. Thus, it is possible to hide some objects using the shape of another object, in our case it is a frame and a rectangular shape. Here's an analogy for you: by cutting a square hole in paper and overlaying it on a photograph, you get an analogue of a mask in the real world.

Adding a grid

Frames allow you to display auxiliary grids that can be flexibly configured to help you align and position objects. For this:

  1. Select the frame;
  2. Click on the plus sign + opposite the Layout Grid – a grid with standard red color settings will be displayed in 10 pixel increments;
  3. Click on the icon to the left of Grid (10px) to set up the grid. In the drop-down window, we can set the grid step (Size), line color (Color) and transparency;
  4. The mesh can be temporarily hidden or removed by clicking on the eye icon or minus respectively on the right;
  5. You can add multiple grids of different colors within the same frame if needed.
  6. To temporarily hide the grids on all frames, press Ctrl + G. Repeat the keyboard shortcut to show them again.

The grid can be used as an assistant for drawing forms, banners, illustrations. Its main beauty lies in the fact that when moving objects, they seem to "stick" to the grid lines, thereby helping you to position the object in the desired position. With scaling, the same story – object borders stick to grid guides.

In general, grids are rarely used. And here are the columns that will be discussed further – constantly.

Adding columns and rows

Vertical columns are very common in web page design. Setting them up is a bit more complicated than the grid:

  1. Select the frame;
  2. Click on the plus sign + opposite the Layout Grid – the same standard grid will be displayed;
  3. Click on the icon to the left of the inscription Grid (10px). In the drop-down window, click on the Grid in the upper left corner;

  4. In the drop-down menu, select Columns. Immediately after that, in addition to color and transparency, a number of new parameters will appear:

    • Count – number of columns;
    • Type – column construction type. You can select one of the options: Left – columns are placed on the left, Right – right-aligned, Center – center aligned, Stretch – stretch across the entire width of the frame;
    • Width – column width in pixels. This parameter is calculated automatically if the column type is set to Stretch;
    • Offset – indent to the left if the column type is set to Left. For the Right column type, this is the indent, respectively, on the right. For the Stretch type, this is the padding on both sides. This parameter is calculated automatically for the Center column type;
    • Gutter – spacing between columns.

Let's set up one popular grid from the Bootstrap framework, which developers often use when laying out web pages. To do this, we need a frame that is 1440 pixels wide and 900 pixels high, which is the size of a typical laptop screen. The grid itself is 1140 pixels wide and consists of 12 columns. The width of each column – 65 pixels, and the distance between them – 30 pixels.


Like a grid, objects will stick to the column borders, which is very convenient for quickly lining up primitives in one line and aligning them in blocks.

In addition to columns, it is possible to set rows. To do this, simply select Rows from the drop-down menu. All parameters are identical to columns, only Width (width) is replaced by Height (height). I haven't used this kind of grid, but it might be useful in rare cases.

Guides and Ruler

All kinds of grids make the designer's job much easier, but there is an even more useful – guides. This is a vertical or horizontal line that the designer can place anywhere. There can be many such lines and you can recreate any grid using only guides. Objects will stick to these lines, as well as to grids. To create a guide:

  1. Select the frame if you need a line inside the frame;
  2. Turn on the ruler with the key combination Shift + R. It appears at the top and left along the edges of the workspace and shows the borders of the selected objects in pixels. Note that guides only display with the ruler enabled;
  3. Click and hold the left mouse button inside the top or left ruler to create a horizontal or vertical guide respectively;
  4. Drag the cursor to the center of the screen. As soon as you go beyond the boundaries of the ruler, a guide will appear on the workspace. Drag it to the point you need;
  5. Release the left mouse button to fix the position of the guide;

To reposition a guide, drag it to a new position.

To remove a guide, select it by clicking on it. The selected line will turn blue. Next, press the Delete button on the keyboard. You can also simply drag a guide over the ruler area and it will also be deleted.

To hide all guides temporarily, use Shift + R to hide the ruler.


And now the important point. As you remember from the previous lesson, after selecting any object and holding down the Option button in MacOs or Alt on Windows, you can see the exact distance in pixels by hovering over another object. So, the same technique works for guides, which is very handy. Let's see what it looks like in practice (sticking objects to guides and hints about distance to guides):

Examples of using frames

The list of frame features doesn't end there, but before we continue, let's take a look at a few typical examples of their use. So frames are often used as containers for:

  • Web page design for various devices (desktop, laptop, smartphone);
  • Design of screens of mobile applications for tablets, smartphones, smart watches;
  • Set of base colors;
  • A set of interface components (buttons, switches, icons, sliders, cards, header, site footer, and so on);
  • A set of fonts for typography (all kinds of styles and sizes);
  • Social media content (stories, posts, banners, illustrations, infographics).

Behavior of frame content when resized

If the object is inside a frame, you can specify how it behaves when the frame is resized. This feature is called constraint (read constraint), which translates as a limiter. It sets the behavior when the frame is resized:

  • Allows you to fix the position of the object on the vertical or horizontal side of the frame. In this case, when stretching the frame, it will retain its size;
  • Or stretch the object to the width and/or height of the frame.

It will be easier to understand with an example. Look at the two squares below. The instance on the left is framed. The instance on the right is in a group, along with a beige rectangle that serves as the background. Let's try to change the size of the frame and the group one by one. Note that on the left, the square keeps its size and sticks to the bottom side of the frame, according to the selected constraint. When selected, dotted lines appear to indicate which limiters are active. On the right, when a square is selected, no auxiliary lines are shown, all the constituent parts of the group are stretched.


A reasonable question arises: why is this feature needed? After all, you can make several frames of different screen sizes for the same page and thus show how the content will behave. This feature comes in handy when using components.

Components Getting Started

Components – this is a special kind of objects that are created on the basis of frames to build commonly used interface elements. It sounds complicated, but in essence, using components, they create templates for buttons, drop-down menus, navigation, and more. In order not to draw, for example, a button every time in the future, you copy the button component, set the desired size and color, change the – ready! Sets of such components are called component library in Figma terminology. And designers call them UI Kit (it reads yui kit).

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

That's the power of components. And Constraints play one of the key roles here.

We will have a separate lesson on the components, do not be afraid of their complexity. Moreover, the components have other features that we will gradually touch on. Now we are just preparing the foundation for further work. In the meantime, to understand the usefulness of the components, 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 on the basis of a regular frame. By changing the parent component, we automatically change all the "children".


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

You don't know how to create components yet, because you first need to fully understand how constraints work inside a frame. Therefore, we return to them.

Constraints

Let's create some buttons inside frames with different limiter settings. Let's look at the simplest of them:

  • Vertical Delimiters:

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

  • Horizontal borders:

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

I created 9 frames (buttons) with all possible combinations of the above limiters. See how objects inside frames behave when scaled.


There are several more types of delimiters:

  • Left & Right – type of horizontal limiter. Causes the left edge of the object to snap to the left side of the frame and the right edge of the – to the right side of the frame. Allows you to stretch the object in width with fixed margins on the left and right;
  • Top & Bottom – type of vertical limiter. Causes the top edge of the object to snap to the top side of the frame and the bottom edge of the – to the bottom of the frame. Allows you to stretch the object in height with fixed top and bottom margins;
  • Scale – the object is stretched in proportion to the frame in width and/or height. In this case, the indents to the frame are not fixed, but will change in proportion to the size of the frame.

Experiment with different combinations of restrictions and make sure you understand how they work. If you have any questions, leave a comment or write to direct. The topic is not easy for beginners.

Size frame to fit content

If you need to crop a frame strictly along the boundaries of its objects, then just click the appropriate button in the properties panel:

Change frame orientation

The frame can be quickly set to portrait or landscape orientation. In other words, you can set the height of the frame to the value of the width, or vice versa:

Pages and files

In addition to frames, Figma has structural units of a higher order:

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

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

  • Click on the name of the current page Page 1 in the upper right corner of the left panel to show a list of all pages;
  • Click on plus sign + 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, switch 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. In addition, by right-clicking on the page title, you can:

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

Let's see what pages look like in practice:


To create a new file, you need:

  1. Go to the list of files by clicking on the main menu icon in the upper left corner in the browser version of Figma, and then selecting the first item in the dropdown menu Back to Files;

  2. Once on the main screen on the left you will see a list of sections:

    • Your name – the very first item on top. Here you can customize your profile: change your display name, email address and password. The rest of the settings are not important now;
    • Search – search for projects by name. When you have a lot of files, this section can be useful;
    • Recent – recently opened files. Everything is arranged in chronological order. Most recently used files at the top;
    • Community – community developments: templates, plugins and other usefulness. We'll talk about them in the next lessons, it's too early;
    • Drafts – a complete list of all the files you have worked with.
  3. Click on the Drafts section. A list of all files will appear;
  4. Click on the plus sign + in the upper right corner or opposite Drafts. A new file will be created with the name Untitled;
  5. Double click on the file name in the top center, type in a new name and press Enter to confirm;
  6. Done! You have just created a new file.

To select another file, just go back to the list of files in the Drafts section and select the file of interest in the right panel.

Page organization

Let's see what a typical project consists of. At the very beginning, this is a single Page 1, but as it grows, pages with such names appear:

  • User flow name – the name of the user flow/scenario. That is, each individual script is placed on a separate page. In some cases, you can place several scripts on the same page if they are similar (for example, scripts for registration, password reset, login to the site);
  • References/Moodboards – references from the client and moodboards created on their basis. Also, incoming information on the project can be placed here;
  • Thumbnail – the project's cover page, which is displayed on the preview in the Drafts/Recent section. To apply it, you need to create a frame with a size of 1920x960 pixels, draw the cover itself and in the drop-down menu, right-click on the frame, select Use as Thumbnail;
  • Components – page with used components. Often you have to import entire libraries of components, in which case the name of the library and its version are 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 it looks in some cases for me. Another example: they create a UI page with a bunch of screens (frames) of the final design and UX – for all wireframes.

Project Hierarchy

Usually one file is enough, but on large projects, sometimes the design is divided into separate files across platforms. For example: Web, Mobile, Desktop. Sometimes a component library is taken out in a separate file, but please note that in this case you will need a paid subscription.

For a beginner, one file per project will suffice. With experience, at some point you yourself will realize that you are cramped and digging through dozens of pages takes a lot of time.

Homework

  1. Select a site of your choice and draw its header (header), footer (footer) or any other part of it using Constraints. Your task is to adjust the content of the frame in such a way that some of the elements stick to the left side, and the other part to the right. For example, a logo might use Top and Left constraints. A correctly completed task should contain a frame for each part of the site (a separate frame for the header, a separate frame for the footer, and so on). And already all these frames should be inside another frame (website design);

  2. Create 9 buttons with all possible combinations of the following limiters: top, center, bottom, left, right. See the Constraints section of this lesson for an example. Each button must be inside a separate frame and contain at least a fill and text;

  3. Draw a feedback form. There should be "Name", "Email", "Message" fields and a "Submit" button. The fields should stretch with the form when we change its width. Hint: the left & right constraint will come in handy. Make a separate frame for the feedback form.

In order to test this homework, I'll need access to a Figma file with the ability to make edits to look at the frame structure and limiters set. To do this, make sure you select the can edit option next to Anyone with the link. Next, click on Copy link and send it to me in direct. Please send all your homework with these settings in the future. If you forgot, I wrote about how to share a file in this lesson.

How to give access to edit a file in Figma by link

Conclusions

Now you have an idea about frames, delimiters, and even a bit about components. Make sure you are well versed in all the topics in this tutorial. Most often, you will have to use guides and grids.

The material is very complex, especially when it comes to components and constraints. Re-read after a few days, practice. It's not 100% digestible the first time. The next lessons will be shorter, but I will try to write them more often.

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

Stay tuned!

Figma Design education




Leave the first comment. Start a discussion




Cookie Policy

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