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

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

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

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

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

Smart Selection от Figma

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

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

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

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

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

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

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

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

Tidy Up

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

Tidy Up от Figma, демонстрация работы

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

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

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

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

Что дальше?

В ближайшие месяцы мы добавим много нового, включая поддержцку 2D-сеток с помощью Smart Selection и другие интересные вещи.

Как всегда, мы очень хотим узнать, что вы создаете при помощи Smart Selection, и получить ваши отзывы и предложения по улучшению. Свяжитесь с нами в приложении (кнопка со знаком вопроса) или на Spectrum.