Как горячие клавиши в Figma упрощают работу UI/UX дизайнеров

Онлайн-редактор для совместной разработки интерфейсов (UI/UX) Figma позволяет создавать профессиональные прототипы и дизайн-системы. Чтобы повысить продуктивность и скорость работы в Figma, можно использовать горячие клавиши. Существует множество различных шорткатов для такого же количества функций и задач в редакторе. Как профессионалам, так и тем, кто только начинает изучать курсы UI/UX дизайна, важно знать и уметь использовать hotkeys.

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

Быстрый старт: самые важные шорткаты Figma

Комбинации горячих клавиш в Figma различаются на Mac и Windows из-за различной логики работы операционных систем, в частности из-за отличий в системных клавишах и стандартных сочетаниях. В Figma Cmd/Ctrl — это основные модификаторы для большинства горячих клавиш: Cmd на macOS и Ctrl на Windows. Они используются в шорткатах для выполнения базовых действий (копировать, вставить, дублировать и т.д.).

Must-know шорткаты Figma на Mac и Windows

  1. Перемещение (Move) - V (для перемещения объектов по рабочему пространству).
  2. Прямоугольник (Rectangle) - R (для рисования прямоугольников).
  3. Текст (Text) - T (для создания текстовых элементов).
  4. Поиск файлов / Quick Actions - Cmd/Ctrl + / (для быстрого поиска инструментов, файлов или команд в Figma без перехода в меню).
  5. Группировать объекты - Cmd/Ctrl + G (для объединения нескольких объектов в одну группу).
  6. Создать фрейм из выделения - Cmd/Ctrl + Alt + G (для создания Frame из выбранных элементов).
  7. Дублировать объект - Cmd/Ctrl + D (для создания копии выбранного элемента).
  8. Увеличить масштаб - Cmd/Ctrl + + (для приближения на рабочей плоскости).
  9. Уменьшить масштаб - Cmd/Ctrl + - (для отдаления от рабочей плоскости).
  10. Масштаб до выделения - Shift + 2 (для быстрого перехода к выбранному элементу).
  11. Обрезать - Cmd/Ctrl + Shift + K (для вставки изображения в файл).
  12. Панорамирование - Space (для перемещения рабочей области без изменения масштаба).
  13. Скрыть / показать интерфейс - Cmd/Ctrl + \ (для скрытия или отображения панелей Figma).

Как найти горячие клавиши в Figma

  1. В верхнем меню выберите функцию “Help” > “Keyboard Shortcuts”.
  2. Нажмите комбинацию клавиш:
    - Windows: Shift + Ctrl + ?
    - MacOS: Shift + Cmd + ?
  3. На экране появится всплывающее окно с перечнем всех доступных горячих клавиш.

Горячие клавиши для работы с объектами, масштабом и окнами в Figma

ФункцияГорячие клавиши (Mac/Windows)
Разгруппировать объектыCmd/Ctrl + Shift + G
ОбрезаниеCmd/Ctrl + Shift + K
Переход к предыдущему фреймуCmd/Ctrl + [
ВырезатьCmd/Ctrl + X
КопироватьCmd/Ctrl + C
ВставитьCmd/Ctrl + V

Таблица шорткатов по вращению и масштабированию в Figma

ФункцияГорячие клавиши (Mac/Windows)
Повернуть против часовой стрелкиCmd/Ctrl + [
Повернуть по часовой стрелкеCmd/Ctrl + ]
Закрепить масштабCmd/Ctrl + 0
Применить масштаб 1:1Cmd/Ctrl + 1
Применить масштаб 1:2Cmd/Ctrl + 2
Применить масштаб 1:3-9Cmd/Ctrl + цифра от 3 до 9

Таблица шорткатов по работе с цветами в Figma

ФункцияГорячие клавиши (Mac/Windows)
Открыть палитру цветовCmd/Ctrl + C
Использовать палитру за последним использованиемShift + Cmd/Ctrl + C
Применить устаревший цветShift + Cmd/Ctrl + K
Применить следующий цветShift + Cmd/Ctrl + J
Изменить цвет заливки на активном слоеX
Инструмент "пипетка"I
Изменить цвет обводки на активном слоеShift + X
Изменить цвет текста на активном слоеCmd/Ctrl + Shift + C
Изменить фоновый цветCmd/Ctrl + B
Изменить цвет выбранного текстаCmd/Ctrl + Shift + K
Изменить цвет выбранной формыCmd/Ctrl + Shift + C

Таблица шорткатов по работе с компонентами в Figma

ФункцияГорячие клавиши (Mac/Windows)
Создать компонентCmd/Ctrl + Option/Alt + K
Вставить компонентCmd/Ctrl + Option/Alt + V
Открыть библиотеку компонентовCmd/Ctrl + Option/Alt + L
Удалить компонентCmd/Ctrl + Option/Alt + Backspace/Delete
Применить компонент на выбранный объектCmd/Ctrl + Option/Alt + A
Применить компонент на выбранный текстCmd/Ctrl + Option/Alt + T
Применить последний использованный компонентShift + Cmd/Ctrl + K
Применить следующий компонентShift + Cmd/Ctrl + J
Применить предыдущий компонентShift + Cmd/Ctrl + H
Выйти из режима редактирования компонентаEsc
Открыть выбранный компонент для редактированияCmd/Ctrl + Option/Alt + E
Обновить все экземпляры компонентаCmd/Ctrl + Alt + U
Обновить выбранный компонентCmd/Ctrl + Alt + R
Найти использование компонентаShift + Cmd/Ctrl + F
Перейти к следующему экземпляру компонентаCmd/Ctrl + Alt + N
Перейти к предыдущему экземпляру компонентаCmd/Ctrl + Alt + P
Заблокировать/Разблокировать компонентCmd/Ctrl + Alt + Shift + L
Переместить компонент в другой фреймCmd/Ctrl + Alt + M

Таблица горячих клавиш по работе с расположением объектов в Figma

Выровнять по левому краюCmd/Ctrl + Shift + L
Выровнять по правому краюCmd/Ctrl + Shift + R
Выровнять по верхнему краюCmd/Ctrl + Shift + T
Выровнять по нижнему краюCmd/Ctrl + Shift + B
Распределить по вертикалиCmd/Ctrl + Shift + D
Распределить по горизонталиCmd/Ctrl + Shift + G
Распределить по размеруCmd/Ctrl + Shift + P
Переместить слой на передний планCmd/Ctrl + Shift + ]
Переместить слой на задний планCmd/Ctrl + Shift + [
Переместить слой на один уровень вверхCmd/Ctrl + Alt + Shift + ]
Переместить слой на один уровень внизCmd/Ctrl + Alt + Shift + [
Изменить размер объектаCmd/Ctrl + Shift + R
Повернуть объект на 45° против часовой стрелкиCmd/Ctrl + Alt + [
Повернуть объект на 45° по часовой стрелкеCmd/Ctrl + Alt + ]
Установить размер объекта по составуCmd/Ctrl + Shift + X
Выровнять объект по составуCmd/Ctrl + Shift + C

Таблица горячих клавиш для работы с шрифтами в Figma

ФункцияГорячие клавиши (Mac/Windows)
Установить стиль шрифтаCmd/Ctrl + Shift + T
Увеличить размер шрифтаCmd/Ctrl + Shift + >
Уменьшить размер шрифтаCmd/Ctrl + Shift + <
Перейти к следующему размеру шрифтаCmd/Ctrl + ]
Перейти к предыдущему размеру шрифтаCmd/Ctrl + [
Изменить стиль шрифта на курсивныйCmd/Ctrl + I
Изменить стиль шрифта на жирныйCmd/Ctrl + B
Изменить стиль шрифта на подчеркнутыйCmd/Ctrl + U
Изменить стиль шрифта на зачеркнутыйCmd/Ctrl + Shift + X
Выровнять текст по левому краюCmd/Ctrl + Shift + L
Выровнять текст по центруCmd/Ctrl + Shift + E
Выровнять текст по правому краюCmd/Ctrl + Shift + R
Выровнять текст по ширинеCmd/Ctrl + Shift + W
Увеличить межстрочный интервалCmd/Ctrl + Alt + ↑
Уменьшить межстрочный интервалCmd/Ctrl + Alt + ↓
Увеличить отступ между буквамиOption/Alt + →
Уменьшить отступ между буквамиOption/Alt + ←
Увеличить отступ между словамиOption/Alt + Shift + →
Уменьшить отступ между словамиOption/Alt + Shift + ←
Изменить разделение шрифтаCmd/Ctrl + Shift + B
Увеличить разделение шрифтаCmd/Ctrl + }
Уменьшить разделение шрифтаCmd/Ctrl + {
Изменить капитель текста на большиеCmd/Ctrl + Shift + K
Изменить капитель текста на маленькиеCmd/Ctrl + Shift + L
Изменить капитель текста на большие буквыCmd/Ctrl + Shift + M
Изменить капитель текста на обратныйCmd/Ctrl + Shift + F
Изменить шрифт на следующий в спискеCmd/Ctrl + .
Изменить шрифт на предыдущий в спискеCmd/Ctrl + ,
Открыть окно настроек шрифтаCmd/Ctrl + Shift + /