Горячие клавиши в Figma

Горячими клавишами называют комбинацию кнопок, которая позволяет выполнить действие без вызова основного меню. Они ускоряют работу с программой и позволяют дизайнеру тратить меньше времени на выполнение стандартных действий.

В онлайн-редакторе Figma горячие клавиши называются Keyboard Shortcuts. Есть несколько способов посмотреть список всех комбинаций:
1. Щёлкнуть на вопросительный знак в правом нижнем углу и перейти в списке в пункт «Keyboard Shortcuts».
2. Зажать комбинацию Ctrl + Shift + ?.
3. Зайти в главное меню в левом верхнем углу, раскрыть пункт «Help and account» → «Keyboard Shortcuts».

Вызов шорткатов из подсказки и главного меню программы. Источник: Figma

Ещё один способ — кликнуть левой кнопкой мыши на объект, появится меню действий с подписанными комбинациями. Источник: Figma

Чтобы увидеть или, наоборот, спрятать боковые панели, собираем комбинацию Ctrl + \ на Windows и ⌘ + \ для MacOs. Отключать боковые панели удобно в тех случаях, когда дизайнеру нужно продемонстрировать свою работу команде или заказчику и важно сфокусировать всё внимание на макетах.

Так выглядит интерфейс программы с включёнными боковыми панелями. Источник: Figma

Освоить нюансы работы в Figma и других редакторах можно на курсе «Графический дизайнер». Студенческие работы разбирают и подробно комментируют практикующие эксперты. Кроме учебных проектов, студенты могут попробовать свои силы на настоящих заказах из внутренней студии Практикума и положить реальные кейсы в портфолио.

Для работы с Сеткой используют комбинацию Ctrl + Shift + 4 или Ctrl + G на MacOs. Она позволяет увидеть или скрыть сетку.

Фрейм с включённой сеткой — по ней удобно располагать объекты. Источник: Figma

Чтобы включить или выключить Линейку, нужно нажать комбинацию Shift + R.

Линейка появится слева и сверху от рабочего поля / фрейма. Источник: Figma

Чтобы включить Направляющие, достаточно навести курсор на линейку. Вид курсора изменится на «курсор изменения размера», и можно будет «взять» направляющую. Как и сетка, направляющие помогают дизайнеру структурировать расположение элементов во фрейме.

Так выглядит интерфейс с включёнными направляющими — это красные вертикальные линии. Источник: Figma

Раздел для работы с инструментами в программе так и называется — Tools. Здесь собраны горячие клавиши для работы с объектами, например для создания фрейма, прямоугольника, эллипса, линии, стрелки, добавления комментария или выбора цвета.

Для выбора инструмента Перо нужно нажать P, Карандаш выбирается комбинацией Shift + P. Источник: Figma

Чтобы выбрать инструмент выделения, нужно нажать клавишу V. Затем навести курсор на объект, зажать левую кнопку мыши и перетащить объект.

Также этот инструмент и несколько других можно найти на верхней панели в левом углу. Источник: Figma

Чтобы выбрать инструмент для создания фреймов, нужно нажать клавишу F либо выбрать иконку «фрейм» в верхней панели и кликнуть на «Frame».

Можно создать фрейм произвольного размера либо выбрать нужный размер на панели справа. Источник: Figma

Чтобы выбрать инструмент для создания Секции, нужно нажать комбинацию Shift + S. В секции удобно объединять несколько фреймов, например экраны одного сценария или все экраны по конкретной задаче. У секций, в отличие от фреймов, хорошо видны названия, их будет проще увидеть в проекте.

Так выглядят несколько фреймов, объединённых в одну секцию. Источник: Figma

Чтобы выбрать прямоугольник, нажимаем R, Эллипс — O, Линию — L, Стрелку — Shift + L.

Свои комбинации есть для каждой из наиболее востребованных форм. Источник: Figma

Ввести или посмотреть Комментарии к проекту можно, нажав клавишу С. Курсор превратится в иконку комментария, после этого достаточно кликнуть в нужном месте, чтобы появилось поле для ввода комментария.

Так выглядит поле для ввода комментария. Источник: Figma

Чтобы выбрать инструмент Пипетка, нужно нажать i на Windows и Ctrl + С на MacOs.

Собраны в области под названием Text. Инструменты позволяют создавать, выравнивать и форматировать текстовые фрагменты, например добавлять курсив, менять расстояние между буквами. Чтобы выбрать Текст, нужно нажать T, кликнуть в любом месте на фрейме и начать вводить текст.

Если трудно быстро запомнить все комбинации, можно в первое время заглядывать в подсказки. Источник: Figma

Ниже — список главных комбинаций для работы с текстом в OS Windows. Если дизайнер работает в MacOs, клавишу Control заменяет ⌘, то есть Command. Сочетания используются аналогичные.

Все настройки параметров текста также можно найти на правой панели в блоке «Text». Источник: Figma

Selection — это Выделение. Здесь собраны горячие клавиши для выбора всех элементов на странице, для выбора родительских и дочерних объектов и для объединения элементов в группы и во фреймы.

Чтобы выделить все элементы на странице, нужно нажать комбинацию Ctrl + A на Windows и ⌘ + A на MacOs.

Здесь выделены все слои на странице. Источник: Figma

Что можно сделать с выделенными слоями:
● Сгруппировать элементы, это комбинация Ctrl + G на Windows и ⌘ + G на MacOs.
● Преобразовать их во фрейм, для этого нужно нажать Ctrl + Alt + G на Windows и ⌘ + Alt + G на MacOs.
● Разгруппировать элементы, для этого нужно нажать Ctrl + Shift + G на Windows и ⌘ + Shift + G на MacOs.
● Отменить выделение кнопкой Esc.

Свернуть все слои в левой панели поможет набор кнопок Alt + L.

Горячие клавиши для работы с компонентами описаны в разделе Components.

Чтобы уверенно использовать Figma, понадобится базовое знание английского языка — без него будет сложнее освоить программу. Источник: Figma

Вот основные комбинации для работы с компонентами:
● Показать все компоненты: Alt + 2.
● Создать компонент: Ctrl + Alt + K на Windows и ⌘ + Alt + K на MacOs.
● Преобразовать компонент во фрейм: сочетание Ctrl + Alt + B на Windows и ⌘ + Alt + B на MacOs.
● Открыть библиотеку компонентов: Ctrl + Alt + O на Windows и ⌘+ Alt + O на MacOs.

В завершение приведём несколько универсальных комбинаций, которые можно использовать и за пределами Figma:
● Ctrl + С — копировать выделенную область.
● Ctrl + V — вставить выделенный объект.
● Ctrl + Z — отменить любое последнее действие.