Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma
Webdesign

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

by
Difficulty:BeginnerLength:ShortLanguages:
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 Resizing

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

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

Quick Column Layouts in Figma

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

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

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

Remove Space Between Items in Figma

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

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

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

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

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

Create Masks Quickly in figma

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

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

Advertisement
Advertisement
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.