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

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

Далее можно воспользоваться функциями выравнивания в правой панели инструментов, или зайти через основную панель инструментов в левом верхнем углу. В разделе «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» можно при выделении объектов. В правом нижнем углу появится специальная вкладка.       

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

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

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

Представляем Figma Smart Selection

Большая часть работы дизайнера посвящена изучению ограничений и возможностей, что часто является очень итеративным процессом. Мы пробуем и то и сё, мы документируем свои выводы, а затем пересматриваем свои вчерашние действия.

Большая часть этой работы связана с повторяющимися задачами, такими как «Что, если плотнее скомпоновать иконки?» или «Если передвинуть эти элементы, станет лучше?»

Эта утомительная работа может отнять огромное количество времени. Простое увеличение высоты некоторых элементов списка может означать выполнение 10 операций по изменению размера, 9 операций перемещения, при этом необходимо отслеживать в уме расстояние и выравнивание.

Это не должно быть так трудно. В конце концов, в нашем распоряжении есть удивительно мощные компьютеры, одним из фундаментальных аспектов которых является эффективное копирование и повторное использование. То есть компьютер способен отлично повторять одно и то же действие несколько раз с высокой скоростью, что используется профессиональными копирайтерами, инженерами-программистами, исследователями данных и другими. Но не так сильно, как дизайнерами.

Сегодня мы рады представить новую функцию, которая позволит дизайнерам уменьшить количество повторяющегося «мартышкиного труда» и ускорить ваши исследования.

Мы называем ее Smart Selection – она помогает легко настраивать отступы и расположение нескольких элементов в наборе объектов на холсте. Подумайте об этом как о бонусе. Это дает вам возможность сосредоточиться на сути вашего творческого процесса, а не на мелочах.

Как работает Smart Selection

Smart Selection работает автоматически при выборе любого элемента или группы из трех или более элементов с равным интервалом. Выделив элементы, вы можете одновременно отрегулировать отступы, положение и размер всех этих элементов.

Вот что вы можете сделать с помощью Smart Selection:

• Перетащите ручки розового цвета в пространство между объектами, чтобы отрегулировать расстояние между всеми элементами.
• Перетащите кольцо, чтобы быстро переупорядочить элементы.
• Выберите одно или несколько розовых колец, чтобы отметить их: это позволяет изменять размер элемента, потянув за края.

При создании этой функции мы хотели найти решение в рамках парадигм, над которыми работают дизайнеры, а не вводить совершенно новый образ мышления

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

Tidy Up

Наряду со Smart Selection мы представляем еще одну замечательную функцию, которую мы назвали Tidy Up (англ. – уборка, наведение порядка), благодаря которой фантастически легко получить Smart Selection из беспорядка. Просто вызовите действие Tidy Up, чтобы ловко организовать выбранные предметы. Подумайте об этом как о функции «распределения», которая улучшит работу.

Tidy Up берет выбранные элементы и сдвигает их так, чтобы они находились рядом друг с другом и имели одинаковый интервал. Варианты использования выходят за рамки простого использования Smart Selection. Вы найдете Tidy Up полезным с такими вещами, как таблицы и панели инструментов. В отличие от традиционной функции распределения, интервал всегда будет чётным.

Чтобы понять, как работает Tidy Up, представьте, что вы работаете на 20 экранах, которые составляют один сценарий. Мы хотим, чтобы они были аккуратно организованы с идеальным интервалом между ними, так что, когда мы представим его другим участникам проекта, он будет выглядеть утонченно.

Выполнение этого в традиционных инструментах дизайна часто означает, что каждый интервал и отступ надо настроить вручную (в нашем примере 19 интервалов!).

С помощью Tidy Up все это можно сделать одним быстрым действием – выберите экраны и нажмите кнопку Tidy Up в верхней части боковой панели справа. Комбинация клавиш для Tidy Up – ⌥⌘T на macOS и ctrl-alt-T на других платформах.