Advertisement
  1. Web Design
  2. Figma

Советы по компоновке на Figma

by
Read Time:2 minsLanguages:
This post is part of a series called Figma Tips and Tricks.
Figma Component Tips
Figma Handoff and Testing Tips

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

При работе с макетами в Figma (особенно постоянной) требуется уметь изменять размер, положение, интервал, делать выравнивание и маскировку. Вот пять советов вам в помощь!

Просмотр

1. Косые формы для лёгкого изометрического изменения размера

Если вы работаете с изометрическими иллюстрациями в Figma, есть отличный способ скашивания фигур с изменением размеров. Для этого возьмите объект (например, квадрат) и поверните его на 45 °, удерживайте SHIFT и перетащите угол.

Чтобы сдавить этот квадрат, вам сначала нужно сгруппировать его (самого по себе), сбросив boundary box. Теперь, после выделения, вы сможете сгладить его по осям X и Y.

Для изменения размеров по изометрическим линиям разгруппируйте его, а затем измените его размер с помощью ручек.

Skew Shapes For Easy Isometric ResizingSkew Shapes For Easy Isometric ResizingSkew Shapes For Easy Isometric Resizing

2. Быстрая компоновка столбцов

Вы можете расставить столбцы, используя привязку и распределение. Например, привяжите два квадрата по краям рабочей плоскости, затем слегка подтолкните каждый из них внутрь. Добавьте несколько форм между ними, затем выделите все и сделайте Main menu > Arrange > Distribute Horizontal Spacing. Идеальное расположение столбцов для работы!

Quick Column Layouts in FigmaQuick Column Layouts in FigmaQuick Column Layouts in Figma

3. Удаление пробелов между элементами

Можно быстро удалить все пробелы между рядом объектов. Выберите объекты, о которых идет речь, затем нажмите Main menu > Arrange > Pack Horizontal, чтобы избавиться от промежутков. Для вертикальных объектов пройдите Main menu > Arrange > Pack Vertical.

Использование этих опций с инструментами выравнивания поможет вам создавать макеты строк и столбцов.

Remove Space Between Items in FigmaRemove Space Between Items in FigmaRemove Space Between Items in Figma

4. Сделайте более точное выравнивание

Включив направляющие (SHIFT + R), вы расставите объекты более точно, перемещая фигуру, вы увидите её ширину и высоту, представленные в линейках.

Make Alignment Extra Precise with rulers in FigmaMake Alignment Extra Precise with rulers in FigmaMake Alignment Extra Precise with rulers in Figma
Видите эти синие маркеры в направляющих?

5. Быстрое создание масок

Для создания маски в Figma щёлкните правой кнопкой мыши объект и выберите Use Mask. Однако имейте в виду, что объект маскировки должен быть сгруппирован с объектами, которые вы хотите замаскировать.

Create Masks Quickly in figmaCreate Masks Quickly in figmaCreate Masks Quickly in figma

Ресурсы обучения Figma

Эти советы помогут вам с компоновкой в Figma, но для перехода на следующий уровень у нас есть серия углубленных курсов на Tuts +:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.