Школа
Интерфейс

Как работать в Фигме быстрее

7 апр 2020
👁 81740   🗩7
Интерфейс

Как работать в Фигме быстрее

7 апр 2020
👁 81740   🗩7
Константин Мозговой
Дизайнер бюро
Полезно
 137
137
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

Как работать в Фигме быстрее

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

Как работать в Фигме быстрее

Выделение объектов

Чтобы выделить следующий объект в панели слоёв, нажимайте Tab. Чтобы выделить предыдущий — Shift + Tab. Так быстрее, чем выделять мышкой.

Чтобы провалиться внутрь фрейма, нажимайте Enter, а подняться обратно — Shift + Enter. Двойной клик мышкой не даёт такой управляемости при перемещении внутри фрейма.

Фигма позволяет выделить все объекты в макете с одинаковыми характеристиками. Это полезно, если нужно, например, выделить все текстовые объекты с одним и тем же шрифтом и изменить его параметры. Для этого выделите один объект и нажмите Main menu → Edit → Select all with same font.

Способ также хорошо работает с другими характеристиками. Например, чтобы выделить все объекты с одинаковым цветом заливки, нажмите Main menu → Edit → Select all with same fill.

Когда компонент выделен, можно быстро перейти к главному компоненту (Master Component), кликнув по нему правой кнопкой мыши и нажав Go to Master Component. После редактирования главного компонента можно быстро вернуться обратно, нажав Return to instance внизу экрана.

Перемещение и изменение размеров

В настройках можно изменить значение Nudge Amount, то есть количество пикселей, на которое сдвигается объект при нажатии Shift + стрелки. Значение по умолчанию — 10 пикселей, но может быть удобнее другое. Например, при работе над макетами для сайта бюро, на котором используются отступы, кратные девяти пикселям, я выставляю соответствующее значение Nudge Amount.

Чтобы в панели Constraints выбрать в один клик Left & Right или Top & Bottom, зажимайте Shift во время клика.

Чтобы расставить объекты с одинаковыми отступами между ними, нажмите маленькую кнопку Tidy Up, которая появится в правом нижнем углу при выделении.

После этого можно менять объекты местами, перетаскивая их за круглые маркеры, или изменять между ними отступы, сдвигая маркеры в виде полосок. Если зажать Shift, то отступы будут изменяться на значение Nudge Amount.

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

Можно изменять размеры объектов на 1 пиксель, нажимая Ctrl + стрелки (⌘ для Мака), и на значение Nudge Amount (10 пикселей по умолчанию), нажимая Ctrl (⌘) + Shift + стрелки. Иногда так быстрее и удобнее, чем растягивать объект мышкой или задавать точное значение в панели свойств.

Чтобы изменять размеры фрейма, игнорируя значения Constraints у входящих в него объектов, зажимайте Ctrl (⌘).

Панель слоёв

Если нужно разблокировать или отобразить все скрытые объекты в макете, нажмите Ctrl (⌘) + /, начните набирать Unlock all Objects или Unhide all Objects в поле поиска и примените команду.

Чтобы развернуть все внутренности фрейма, выделите его и нажмите на маленькую стрелочку возле имени с зажатой клавишей Ctrl (⌘). Точно так же можно свернуть всё обратно.

Чтобы быстро заблокировать кучу слоев, нажмите на иконку замочка и проведите курсор вниз. Разблокировка работает аналогично. Способ подходит и для скрытия объектов с помощью иконки глазика.

Чтобы переименовать объект нажимайте Ctrl (⌘) + R. Затем нажимайте Tab, чтобы переименовать слой ниже, и Shift + Tab — слой выше. Это быстрее, чем прицеливаться в имя объекта и делать двойной клик.

Продолжение в следующем совете.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

ИнтерфейсФигма
Полезно
 137
137
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Кстати, ещё в Фигме можно организовать всамделишный Зумворлд. К примеру, так организован канвас и плейграунд Тяжеловато. По умолчанию видно самое важное, но всегда можно зазумиться в детали.

Прочитал, что на сайте бюро используются отступы, кратные девяти. Наверняка это не просто так. Я в своей работе использую отступы, кратные двум, — мне так проще считать. Расскажите, чем обусловлена цифра 9 и почему не 10, например?

Евгений, подробно о сетке рассказал Михаил Нозик в совете о создании нового сайта бюро: https://bureau.ru/soviet/20170308/

Ещё 2 не очевидных момента про выделение и размеры:

  1. Чтобы выделить заблокированный объект без долгого поиска в панели слоёв, нажмите на него правой кнопкой.

  2. Чтобы быстро избавиться от дробных значений размеров или координат нажмите на подпись слева от них.

Если выделить несколько слоёв и нажать ⌘+R, то можно будет переименовывать с заменой, добавлять номера и тому подобное.

Ещё добавлю: чтобы выделить объект, который находится за несколькими папками в слоях или перекрывается полем другого объекта, нужно кликнуть на него с зажатой ⌘ (Ctrl)

Олег Савинский

Как сразу выделить группу или фрейм вместе со всеми вложенными группами, фреймами и объектами? Лассо выделяет только наружный фрейм. Рамка с шифтом — только объекты, по которым проходит указатель мыши. Shift + вверх/вниз — только объекты в одном фрейме, но не другие фреймы с их объектами.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы