Как работать в Фигме быстрее
Выделение объектов, перемещение и изменение размеров, панель слоёв
Быстро работать в Фигме позволяет в первую очередь грамотное использование компонентов и построение макетов. Этому важно учиться, но для новичка не менее полезно будет освоить несколько горячих клавиш и трюков, которые не очевидны из интерфейса программы и не описаны в официальном туториале. Считаю важным о них рассказать, но отмечу, что в совете не будет ничего сверхъестественного. Это просто подсказки, которые помогут новичкам осваивать Фигму.
Как работать в Фигме быстрее
Выделение объектов, перемещение и изменение размеров, панель слоёв
Выделение объектов
Чтобы выделить следующий объект в панели слоёв, нажимайте 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. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.