Хотите быстрее научиться создавать сайты? Рекомендую эти видеокурсы!

х
Наверх

Выравнивание и умное распределение в Figma

Хотя выравнивать объекты в Фигме можно вручную, все же для повышения скорости работы применяются специальные инструменты. Для того чтобы увидеть, как работает данная функция создадим три четырехугольника. Чтобы выровнять объекты их необходимо выделить при помощи мыши, или выборочно в левой панели. 

выравнивание объектов в FigmaДалее можно воспользоваться функциями выравнивания в правой панели инструментов, или зайти через основную панель инструментов в левом верхнем углу. В разделе «Arrange» вы найдете полный список возможностей выравнивания. Например, «Pack horizontal» выровняет объекты по горизонтали, в результате чего расстояние между объектами будет убрано, и все элементы будут соединены.       

выравнивание объектов по горизонтали в FigmaИнструмент «Pack vertical» выровняет объекты по вертикали. Обратите внимание что все объекты в Фигме выравниваются относительно самого крупного объекта, что является логичным.  

Выравнивание объектов по вертикали в FigmaТеперь рассмотрим инструменты выравнивания, которые находятся в правой панели.

«Align Left» – выровнять по левому краю большего объекта «Alt + A». Как видно на иллюстрации при выборе этой функции круг (меньший объект) выровнялся по левой части со стороной прямоугольника.

выравнивание объекта по левому краю «Align Horizontal Centers» – выровнять горизонтально по центру большего объекта «Alt + H». В данном случае круг выровнялся точно в центре прямоугольника.

выравнивание объекта по центру в Figma«Align Right» – выровнять по правому краю большего объекта «Alt + D». Круг выровнялся с правой стороной прямоугольника. 

выравнивание объекта по правой стороне в Figma«Align Top» – выровнять по верхнему краю большего объекта «Alt + W».

выравнивание объекта по углам в Figma«Align Vertical Centers» – выровнять по верхнему краю большего объекта «Alt + W».  

выравнивание объекта по краю в Figma«Align Bottom» – выровнять по нижнему краю большего объекта «Alt + S». Круг выровнялся по правому нижнему углу прямоугольника. 

выравнивание по нижнему углу в FigmaИ последняя вкладка в этом списке содержит три функции. Первая из них - «Tidy app». Выбрав данную вкладку, в выделенных фигурах появятся небольшие круги.

функция Tidy app в FigmaНаведя курсор на круги внутри объектов, вы сможете менять их местами или регулировать отступы между объектами при помощи курсора мыши.

регулирование отступов между объектами в Tidy app Данные изменения не будут нарушать структуру выравнивания объектов.

сохранение структуры выравнивания объектов при помощи Tidy appЧтобы увидеть, как работает умное выравнивание объектов, создадим произвольно разных размеров прямоугольники. Кроме того, они будут распределены друг от друга на произвольном расстоянии. 

умное выравнивание объектв в FigmaЕсли выделить эти объекты, то в разделе «Tidy app» можно выбрать функцию «Distibute vertical spacing». В результате все объекты выровняются по вертикали.

умное выравнивание по вертикали в FigmaФункция «Distibute horizontal spacing» - произвольно выравнивание объектов по горизонтали. Как видно все объекты имеют одинаковое расстояние друг от друга.

умное выравнивание объектов по горизонтали в FigmaПомимо этого, воспользоваться функцией «Tidy app» можно при выделении объектов. В правом нижнем углу появится специальная вкладка.       

функцией Tidy app в FigmaПри выборе этой вкладки, программа автоматически распределит объекты равномерно в фрейме. Кроме того, между ними будут линии, которые позволят сразу регулировать расстояние между объектами.  

автоматическое равномерное распределение объектов в FigmaЭто удобная функция, например, для равномерного распределения карточек товаров.

Итак, теперь вы знаете как устроено выравнивание и умное распределение объектов в Фигме. Особенно эта функция окажется полезной при работе с большим количеством объектов. 

Полезные ссылки:

Пройдите, пожалуйста, защиту от спама.