Figma — хитрости работы с редактором

В Figma много неочевидных моментов, которые не всегда можно найти в документации или нащупать методом тыка. Рассказываем о хитростях редактора.

Степан Степанов

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года.

Параллельно освоил верстку. Время от времени публикует переводы на Хабре.


Посмотреть полный список горячих клавиш

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

Вы можете посмотреть доступные горячие клавиши, нажав на клавиатуре комбинацию Ctrl+Shift+?

Показать/скрыть интерфейс

Такие элементы редактора, как верхняя панель управления, а также две боковые панели — слоев и настроек — занимают на экране много места и не дают в должной мере сосредоточиться на макете. Чтобы убрать все панели и оставить только рабочее пространство, достаточно нажать сочетание клавиш на клавиатуре — Ctrl + \.

Выбор цвета

Одна из самых полезных опций.

Чтобы быстро взять нужный цвет из другого места экрана, нажмите клавишу I на клавиатуре.

Выбираем нужный цвет одним кликом

За пределами рабочей области цвет взять не получится.

Поиск по всем командам Figma

Если вы знаете, что хотите найти в Figma, но не уверены, где именно это находится, нажмите сочетание клавиш Ctrl + /. Откроется основное меню с активной строкой поиска.

Строка поиска подскажет, где спряталась нужная функция или объект

Замена значения сдвига объекта

В Figma по умолчанию значение сдвига объекта 8px, чтобы его поменять, перейдите в главное меню, затем выберите Preferences — Nudge Amount.

Функция Nudge Amount в меню

В появившемся окне введите нужное значение, например, 10.

Изменения значения сдвига объекта

Замена группы на фрейм

Если у вас есть несколько элементов, объединенных в группу, и вам понадобился фрейм таких же размеров и форм, выделите группу и на правой панели в выпадающем списке выберите Frame. Вот так:

Переименование слоев

Чтобы переименовать слой, нажмите сочетание клавиш Ctrl + R.

Далее нажмите Tab, чтобы перейти на нижний слой, или Shift + Tab, чтобы переместиться на верхний.

Таким образом можно быстро переименовать нужный вам слой.

Переименование слоев

Массовое переименование слоев

Выберите слои, которые вы хотите переименовать, и нажмите Ctrl + R. Откроется окно, где вы сможете определять последовательность, нумеровать и заменять строки.

Дублирование слоев

Если наименование слоя заканчивается цифрой, то при его дублировании добавится суффикс .1. Например, слой называется Rectangle 1, при дублировании он будет называться Rectangle 1.1.

Быстрое дублирование слоев с оригинальными названиями

Есть нюанс: это работает только в том случае, когда между наименованием и цифрой есть пробел. Если пробела нет, наименование слоя не изменится.

Забудете пробел — нумерация не изменится

Быстрый переход между страницами

Вы можете перемещаться между страницами, используя клавиши Page Up и Page Down, вниз и вверх.

Быстрое перемещение между страницами проекта

Изменение размера элемента

Очень интересная и полезная опция — изменение размера элемента с помощью сочетания клавиш Ctrl + Shift + стрелка. Элемент будет увеличен или уменьшен ровно на то значение, которое указано в Nudge Amount.

Изменение размера элемента на значение, указанное в Nudge Amount

Выравнивание элементов

Чтобы выровнять несколько объектов по одной из осей, достаточно воспользоваться сочетанием клавиш Shift + Ctrl + Alt + стрелка.

Быстро выравниваем объекты по горизонтали

Равноудаленное распределение

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

Быстро выравниваем расстояние между объектами

Изменение распределенного расстояния

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

Изменение расстояния между выделенными элементами

Заключение

В Figma большое количество подобных секретов, но обнаружить их порой бывает не так просто. В этой статье рассмотрены лишь некоторые из них. Горячие клавиши в Figma открывают большие возможности для творчества и упрощают процесс создания макетов. Подробнее о тонкостях работы с редактором вы узнаете на курсе Figma от Skillbox.

Курс

Figma


Полное руководство по векторному редактору для дизайнеров. На протяжении курса вы с нуля сделаете проект, при создании которого задействуете все возможности Sketch, множество плагинов и новых функций.

Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox