Хотя выравнивать объекты в Фигме можно вручную, все же для повышения скорости работы применяются специальные инструменты. Для того чтобы увидеть, как работает данная функция создадим три четырехугольника. Чтобы выровнять объекты их необходимо выделить при помощи мыши, или выборочно в левой панели.
Далее можно воспользоваться функциями выравнивания в правой панели инструментов, или зайти через основную панель инструментов в левом верхнем углу. В разделе «Arrange» вы найдете полный список возможностей выравнивания. Например, «Pack horizontal» выровняет объекты по горизонтали, в результате чего расстояние между объектами будет убрано, и все элементы будут соединены.
Инструмент «Pack vertical» выровняет объекты по вертикали. Обратите внимание что все объекты в Фигме выравниваются относительно самого крупного объекта, что является логичным.
Теперь рассмотрим инструменты выравнивания, которые находятся в правой панели.
«Align Left» – выровнять по левому краю большего объекта «Alt + A». Как видно на иллюстрации при выборе этой функции круг (меньший объект) выровнялся по левой части со стороной прямоугольника.
«Align Horizontal Centers» – выровнять горизонтально по центру большего объекта «Alt + H». В данном случае круг выровнялся точно в центре прямоугольника.
«Align Right» – выровнять по правому краю большего объекта «Alt + D». Круг выровнялся с правой стороной прямоугольника.
«Align Top» – выровнять по верхнему краю большего объекта «Alt + W».
«Align Vertical Centers» – выровнять по верхнему краю большего объекта «Alt + W».
«Align Bottom» – выровнять по нижнему краю большего объекта «Alt + S». Круг выровнялся по правому нижнему углу прямоугольника.
И последняя вкладка в этом списке содержит три функции. Первая из них - «Tidy app». Выбрав данную вкладку, в выделенных фигурах появятся небольшие круги.
Наведя курсор на круги внутри объектов, вы сможете менять их местами или регулировать отступы между объектами при помощи курсора мыши.
Данные изменения не будут нарушать структуру выравнивания объектов.
Чтобы увидеть, как работает умное выравнивание объектов, создадим произвольно разных размеров прямоугольники. Кроме того, они будут распределены друг от друга на произвольном расстоянии.
Если выделить эти объекты, то в разделе «Tidy app» можно выбрать функцию «Distibute vertical spacing». В результате все объекты выровняются по вертикали.
Функция «Distibute horizontal spacing» - произвольно выравнивание объектов по горизонтали. Как видно все объекты имеют одинаковое расстояние друг от друга.
Помимо этого, воспользоваться функцией «Tidy app» можно при выделении объектов. В правом нижнем углу появится специальная вкладка.
При выборе этой вкладки, программа автоматически распределит объекты равномерно в фрейме. Кроме того, между ними будут линии, которые позволят сразу регулировать расстояние между объектами.
Это удобная функция, например, для равномерного распределения карточек товаров.
Итак, теперь вы знаете как устроено выравнивание и умное распределение объектов в Фигме. Особенно эта функция окажется полезной при работе с большим количеством объектов.
Сообщить об ошибке