how to work with mesh in Figma
Figma is one of the most convenient modern graphic design tools. The ability to open in a browser, a simplified interface, and a free access mode allow even children and teenagers to quickly master web design. We're at school Pixel We teach graphic and web design to children of different ages, and also publish free video tutorials on Figma. Today we will share one of the materials. More useful guides for beginners can be found in this collection.
We will devote this lesson to working with typography in Figma. You'll learn how to work with modular grids in Figma.
A grid is a system of vertical and horizontal lines that are used to align and organize content within a layout. In the field of typography, such grids are a tool for achieving harmonious distribution of text, graphics, and other design components.
The grid is a frame property, so to use it you must first integrate a new frame into your project.
How to Add a Grid in Figma
We will add a built-in frame for computers. We will leave the width as it is, but the length can be increased arbitrarily, since web pages are scrolled down by the user and always have a unique length, depending on the content and tasks of the site.
To add a grid, you need to click on the plus sign next to Layout grid in the properties panel on the right.
By default, a grid consisting of 10 pixel cells will be added.
In total, Figma has 3 types of grids: grid (cells), columns and rows.
Let's take a closer look at each of them.
Types of grids
Figma has a modular grid (grid) is a tool for creating and customizing a grid structure in a design.
A very convenient feature of its use is that if you move an object using the arrows, it will move exactly 1 pixel, and if you hold down the Shift key, the object will move 10 pixels at once. That is, exactly along the modular grid.
If necessary, the size of the grid cells can be adjusted using the Size property.
You can also change the color and transparency of any modular grid if it matches the colors on the layout. The default grid color is pale red. And the transparency value is 10%.
The next type of mesh is speakers.
This type in Figma is one of the most popular ways to organize a modular grid in a design. It allows you to divide your canvas into equal or proportional columns, making it easier to align elements and create a balanced composition.
By default, the layout is divided into 5 columns. But their number can be changed based on design needs.
The 12-column modular grid is widely used in design due to its versatility and flexibility. This grid makes it easy to divide the layout into equal parts: 2, 3, 4, 6 columns, etc.
With 2-column division, you can create layouts with two equal columns, which is often used to split content into two parts or to create a sidebar.
When divided into 3 columns, you can create layouts with three equal parts, which is usually used to display content in three columns, for example, to display a list of products or services.
When divided into 4 columns, you can create layouts with four equal parts, allowing you to effectively organize content on a page, such as placing images or text in four columns.
These different 2-, 3-, and 4-column layout options give designers and developers more flexibility when creating layouts and adapting content to suit different needs and design styles.
Overall, the 12-column modular grid is a popular design choice due to its flexibility, ease of use, adaptability, and widespread adoption in the industry.
Share your observations in the comments: sites with visual division into how many columns do you most often encounter?
You can also edit the indents between columns. The margins may vary depending on the design and project requirements. Typically, padding is used in the range of 16-32 pixels, but they can also be customized at the request of the designer.
The last type is line modular grid. It divides the layout horizontally, but is used very rarely. Why?
First, a vertical modular grid generally better matches the natural way most people read and perceive information. People are used to scrolling up and down a page rather than left and right, so dividing content vertically into columns is usually more user-friendly.
Second, horizontal column division can be more difficult to implement and manage, especially when adapting to different devices and screens. A vertical modular grid usually adapts more easily to different screen resolutions and devices, making it more convenient for creating responsive designs.
Column alignment
Let's return to the grid, which divides the layout into columns. How columns are aligned can be defined in the types. The default type is Stretch. It determines the width of the modular grid based on the width of the layout. And the width of each column is calculated automatically. This type is often chosen due to its versatility.
When you select the Center orientation type, the columns are positioned in the middle of the layout. Here the user can configure not only the indents between columns, but also the width of the columns in the Width property.
The right or left orientation types work similarly. In addition to setting the width, they have an Offset property – an offset relative to the edge of the layout.
The Figma editor has the convenient ability to apply several modular grids to one frame at the same time. If necessary, they can be made invisible.
If you want to customize your grid to use when developing various pages of the site, then Figma has the ability to implement it.
You need to click on the 4 dots next to the Layout Grid property of the frame where you developed the grid. Then click on the plus sign, come up with a name and, if necessary, a description for your grid. Then click on Create Style. And you're done!
Now this grid can be applied to other frames.
Using a modular grid helps create more user-friendly interfaces and also speeds up the design and development process by making it easier to align and distribute elements on a layout.
Video: how to make a mesh in Figma
You can learn more about the capabilities of Figma in the video from collections. The lesson was prepared by the Pixel programming school for children. We teach web design to schoolchildren aged 9-13 and 12-17 years old. Come visit us to learn work with website design and Tilda constructor.
