In the third part of the Figma basics, we will learn how to work with frames, pages, and files, so as not to 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 on 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 on Resize
- First Introduction to Components
- Types of Constraints
- How to Fit Frame Size to Content
- Pages and Files
- Organizing Pages
- Project Hierarchy
- Homework
- Conclusions
Frames in other programs are called artboards (artboard). But Figma has taken its own path and invented a unique name. And quite reasonably, because frames have greater capabilities and flexibility than artboards; for example, in Sketch, it is not possible to place one artboard inside another.
Frame translates from English as frame, framework, skeleton. To simplify, frames can be compared to a painter's canvas or a working area. Usually, 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 for one page for a laptop screen, tablet, and smartphone.
In the previous lessons, while drawing entire pages, we unknowingly used groups instead of frames. Let's correct this shortcoming. Now, while working with the design of the page/screen, we will place all elements inside a frame.
Groups allow you to combine primitives and create logical units within a frame, significantly simplifying work on the project. Frames are similar to groups but have a number of unique capabilities:
- The frame has a size and can have a color fill. In groups, the size is determined automatically based on the size of all the objects inside. This distinction 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 measured relative to the top left corner of the frame's boundary;
- The frame can clip its content that goes beyond its borders. That is, everything outside the frame will be hidden if the Clip content option is enabled. This capability is called masking;
- The frame can display layout markup, namely a grid, vertical and horizontal columns, as well as include guides. These tools are intended 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 capability is called constraints.
Now we will review and learn how to use each of the listed features.
The process of creating a frame is no different from a rectangle. In addition, you need to select the tool with the grid image or press F. Next, hold down the left mouse button on the workspace and drag the mouse. Release the left mouse button to set the dimensions.
Next, 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 upper left corner of the properties panel – Frame. Check out what templates are available there and try applying at least a few of them.
- Select and drag all objects inside 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 to select an object inside the frame, pay attention to the values of the coordinates X and Y – they have changed, as now the top left corner of the frame is the new origin of the coordinates.
Using the Clip content option in the properties panel, you can crop 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 masking. Thus, you can hide part of the 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 a piece of paper and placing it over a photograph, you get an example of using a mask in the real world.
Frames allow you to display auxiliary grids that can be flexibly adjusted to facilitate the alignment and positioning of objects. To do this:
- Select the frame;
- Click on the plus sign + next to the Layout Grid section – a grid with standard red settings with a 10-pixel step will appear;
- 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 transparency;
- The grid can be temporarily hidden or removed by clicking the eye icon or minus accordingly on the right;
- You can add several grids of different colors within one frame if needed.
- 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, illustrations. Its main advantage is that when moving objects, they seem to "stick" to the lines of the grid, thus helping you position the object in the desired place. The same story applies to scaling – the edges of the object stick to the grid guides.
In general, grids are used quite rarely. However, the columns that will be discussed next are used constantly.
Vertical columns are often used in web page design. Their configuration is a bit more complex than a grid:
- Select the frame;
- Click on the plus sign + next to the Layout Grid section – the same standard grid will be displayed;
- Click on the icon to the left of the Grid (10px) label. In the dropdown window, click on Grid in the upper left corner;
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 aligned to the left, Right – to the right, Center – centered, 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 offset if the column type is set to Left. For the Right column type, this is the right offset. For the Stretch type, this is the offset on both sides. This parameter is calculated automatically for the Center column type;
- Gutter – the distance between columns.
Let's set up a popular grid from the Bootstrap framework, which is often used by developers when laying out web pages. For this, we will need a frame that is 1440 pixels wide and 900 pixels high, which corresponds to the screen size of a typical laptop. 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 snap to the edges of the column, which is very convenient for quickly aligning primitives in a single line and aligning them in blocks.
In addition to columns, there is the option 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 it may be useful in certain cases.
Guides and Ruler
Various types of grids make a 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 such lines, and you can recreate any grid using only guides. Objects will snap to these lines just like they do to grids. To create a guide:
- Select the frame if you need a line right inside the frame;
- 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;
- Click and hold the left mouse button inside the top or left ruler to create a horizontal or vertical guide accordingly;
- Drag the cursor to the center of the screen. As soon as you go beyond the ruler into the workspace, a guide will appear. Drag it to the point you need;
- Release the left mouse button to lock the position of the guide;
To change the position of the guide, drag it to a new location.
To remove a guide, you need to select it by clicking on it. The selected line will turn blue. Next, press the Delete key 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 also works for guides, which can be very useful. Let's see how it looks in practice (snapping objects to guides and tips about the distance to them):
- Web page design for various devices (desktop PC, laptop, smartphone);
- Mobile app screen design for tablets, smartphones, smartwatches;
- Set of basic colors;
- Set of interface components (buttons, switches, icons, sliders, cards, header, footer, etc.);
- Set of fonts (various weights and sizes);
- Materials for social media (stories, posts, banners, illustrations, infographics).
- 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 the beige rectangle, which serves as a background. We will try to change the size of the frame and the group in turn. Note that on the left, the square maintains its size and sticks to the bottom side of the frame according to the selected constraint. When selected, dotted lines appear indicating which constraints are active. On the right, when the square is selected, no auxiliary lines are shown, and all components of the group stretch.
A reasonable question arises: why is this feature needed? After all, you can take several shots 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.
Components – are a special type of objects created based on frames for building frequently used interface elements. It sounds complicated, but actually, components are used to create templates for buttons, dropdown menus, navigation, and more. To avoid drawing every time, for example, a button, you copy the button component, set the desired size and color, change the text – and it's ready! Sets of such components in Figma terminology are called component library. And among designers, they are called UI Kit (pronounced yoo-eye kit).
Why complicate everything? In fact, components can save you dozens of hours of work. Imagine a situation: you have 50 screens of a web application. Each one has buttons. Suddenly, you receive a request 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 foundation 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 below 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 child components.
As you can see, the bottom button has remained untouched because it is just a frame, not a component. I hope you have already formed your first impression of components and their usefulness in a designer's work.
While you do not yet know how to create components, you need to fully understand how the limits within the frame work first. So let's go back to them.
Vertical Constraints:
- Top – the object sticks to the top edge of the frame;
- Center – the object is centered vertically in the frame;
- Bottom – the object sticks to the bottom edge of the frame.
Horizontal Constraints:
- Left – the object sticks to the left edge of the frame;
- Center – the object is centered horizontally in 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 inside the frames behave during scaling.
There are a few more 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 at 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.
Pages and Files
Besides frames in Figma, there are higher-order 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 upper 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 name, or hide the page panel by clicking on the name of the selected page in the upper right corner of the left panel. Additionally, by right-clicking on the page name, 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 only available if you have at least two pages;
- Rename Page – rename the page. Similar to layers, a double click 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 choose the file you are interested in from the right panel.
- User flow name – 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 scenarios, password reset, site login);
- References/Moodboards – references from the client and moodboards created based on them. There may also be project information here;
- Thumbnail – the page with the project cover that appears 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 dropdown menu from the right-click on the frame select Use as Thumbnail;
- Components – a page with the components you use. Often, entire libraries of components need to be imported; in this case, you write the name of the library and its version. 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 only 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.
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 is dedicated to 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 functionality of Figma.
From now on, this course is designed for independent study and completing homework assignments. I understand that some tasks may not be easy for you.
For additional support, use the Telegram chat. Here you can ask questions related to the lessons or view examples of correct completion from other students.
The chat is not available for citizens of Russia.
- Select a website of your choice and draw its header, footer, or any other part using constraints. Your task is to set up the frame content in such a way that some elements stick to the left side, while others stick to the right. For example, the logo can 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). All these frames should be inside another frame (the site design);
- Create 9 buttons and set up the constraints so that they replicate the behavior shown in the first video in the section Types of Constraints in 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;
- Design a feedback form. It should have fields for "Name," "Email," "Message," and a "Send" button. The fields should stretch along with the form when we change its width. Hint: Left and right constraints will be needed. 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 look at the structure of the frames and the set constraints. For 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 ensure that all future homework submissions are sent with these settings. If you forgot how to share a file, I wrote about it in this lesson.
Now you have an idea about frames, limits, and even a bit about components. Make sure you are well acquainted with all the topics of this lesson. Most often, you will have to use guidelines 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.
Continue learning
