Lesson 9. Frames. Grids. Guides. Components

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
• Creating a Frame. Changing Size and Fill
• How to Place Objects Inside a Frame
• Simple Mask – Cropping Frame Content
• Adding a Grid
• Adding Columns and Rows
• Guides and Ruler
• Examples of Using Frames
• Frame Content Behavior When Resizing
• First Encounter with Components
• Types of Constraints
• How to Fit Frame Size to Content
• Pages and Files
• Organization of Pages
• Project Hierarchy
• Homework
• Conclusions

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

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);
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;
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, I will need access to the Figma file with edit permissions to view the structure of the frames and the set constraints. To do this, please make sure you have selected the can edit option next to Anyone with the link. Next, click on Copy link and send it to me in direct. Please, in the future, send all homework with these settings. If you forgot how to share a file, I wrote about it 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.

The material is very complex, especially regarding the components and constraints. Review it in a few days, practice. It is not absorbed 100% 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 updated on announcements of new lessons, watch homework checks in stories, ask questions, and you can also look forward to many useful posts about design.