Миниатюра Ускорьте создание дизайна сайта с помощью горячих клавиш. Полное собрание всех комбинаций в удобной таблице. Заходите, ознакомьтесь, распечатайте и используйте!

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

Чтобы в разы ускорить разработку - использование клавиатурных сокращений обязательно.

Найти все клавиатурные сокращения вы можете, нажав в левом нижнем углу на знак вопроса и, перейдя во вкладку “Keyboard Shortcuts”. Или вы можете использовать клавиатурное сокращение “Ctrl + Shift + ?”.

Горячие клавиши Figma часть 1

Ниже я привел скриншоты с разделами, а также с переводом.

Вкладка №1 (Основные параметры)

Горячие клавиши Figma часть 2
  • 1 - Показать/Скрыть “Боковые панели”
  • 2 - Инструмент “Пипетка”
  • 3 - Поиск команд, опций в разделе “Меню”

Вкладка №2 (Инструменты)

Горячие клавиши Figma часть 3

Столбец №1:

  • 1 - Стандартный инструмент выделения
  • 2 - Инструмент создания фреймов
  • 3 - Инструмент “Перо”
  • 4 - Инструмент “Карандаш” (Как “Перо” только рисовать можно любые формы)

Столбец №2:

  • 1 - Инструмент “Текст”
  • 2 - Инструмент “Прямоугольник”
  • 3 - Инстурмент “Элипс”
  • 4 - Инструмент “Линия”
  • 5 - Инструмент “Стрелка”

Столбец №3:

  • 1 - Добавить или показать комментарии к текущему макету
  • 2 - Инструмент “Пипетка”
  • 3 - Инструмент “Нож” (Вырезает область в виде картинки)

Вкладка №3 (Просмотр):

Горячие клавиши Figma часть 4

Столбец №1:

  • 1 - Показать/Скрыть “Линейки”
  • 2 - Показать/Скрыть “Обводки всех элементов”
  • 3 - Показать/Скрыть “Пиксельный просмотр”

Столбец №2:

  • 1 - Показать/Скрыть “Сетку”
  • 2 - Показать/Скрыть “Пиксельную сетку”

Столбец №3:

  • 1 - Показать/Скрыть “Боковые панели”
  • 2 - Показать/Скрыть “Курсоры других пользователей”
  • 3 - Показать/Скрыть “Только слои”
  • 4 - Показать/Скрыть “Только компоненты”
  • 5 - Показать/Скрыть “Многопользовательская библиотека”

Вкладка №4 (Масштабирование):

Горячие клавиши Figma часть 5

Столбец №1:

  • 1 - Перемещение по рабочему пространству
  • 2 - Увеличение масштаба
  • 3 - Уменьшение масштаба
  • 4 - Включить отображение 1:1 к экрану

Столбец №2:

  • 1 - Масштабировать все рабочее пространство
  • 2 - Масштабировать выделенный элемент
  • 3 - Масштабировать предыдущий фрейм
  • 4 - Масштабировать следующий фрейм

Столбец №3:

  • 1 - Предыдущая страница
  • 2 - Следующая страница
  • 3 - Предыдущий фрейм
  • 4 - Следующий фрейм

Вкладка №5 (Инструмент “Текст”):

Горячие клавиши Figma часть 6

Столбец №1:

  • 1 - Выделить жирным
  • 2 - Выделить курсивом
  • 3 - Подчеркнуть
  • 4 - Вставить и сопоставить элемент

Столбец №2:

  • 1 - Выровнять текст по левому краю
  • 2 - Выровнять текст по центру
  • 3 - Выровнять текст по правому краю
  • 4 - Выровнять текст по ширине

Столбец №3:

  • 1 - Изменение размера текста
  • 2 - Изменение расстояния между символами
  • 3 - Изменение расстояния между строками

Вкладка №6 (Векторные изображения):

Горячие клавиши Figma часть 7

Столбец №1:

  • 1 - Перо
  • 2 - Карандаш
  • 3 - Заливка

Столбец №2:

  • 1 - Удалить заливку
  • 2 - Удалить обводку
  • 3 - Поменять местами обводку и заливку
  • 4 - Преобразовать в кривые
  • 5 - Также преобразование в кривые (но функция отличается, я ей не пользуюсь)

Столбец №3:

Работа с точками векторных изображений (Эти функции я не использую)

Вкладка №7 (Выделение):

Горячие клавиши Figma часть 8

Столбец №1:

  • 1 - Выделить все
  • 2 - Выделить все, кроме…
  • 3 - Отменить выделение
  • 4 - Выделение слоев, которые находятся под другими слоями
  • 5 - Выделение слоя на боковой панели

Столбец №2:

  • 1 - Выделить дочерний элемент
  • 2 - Выделить родительский элемент
  • 3 - Выделить следующий по порядку элемент
  • 4 - Выделить предыдущий по порядку элемент

Столбец №3:

  • 1 - Сгруппировать элементы
  • 2 - Разгруппировать элементы
  • 3 - Преобразовать в фрейм
  • 4 - Показать/Скрыть элемент
  • 5 - Заблокировать/Разблокировать элемент

Вкладка №8 (Курсор):

Горячие клавиши Figma часть 9

Столбец №1:

  • 1 - Выделение элемент при клике
  • 2 - Копирование элемент при движении

Столбец №2:

  • 1 - Выделение слоев, которые находятся под другими слоями
  • 2 - Показывается иерархия выделенного элемента

Столбец №3:

  • 1 - Изменение размера относительно центра элемента
  • 2 - Изменение размер пропорционально
  • 3 - Перемещение во время изменения размеров элемента

Вкладка №9 (Редактирование):

Горячие клавиши Figma часть 10

Столбец №1:

  • 1 - Копировать
  • 2 - Вырезать
  • 3 - Вставить
  • 4 - Вставить поверх выделенного элемента

Столбец №2:

  • 1 - Создание копии
  • 2 - Переименование
  • 3 - Экспорт элемента

Столбец №3:

  • 1 - Копировать свойства элемента
  • 2 - Вставить скопированные свойства

Вкладка №10 (Трансформирование):

Горячие клавиши Figma часть 11

Столбец №1:

  • 1 - Отразить по горизонтали
  • 2 - Отразить по вертикали
  • 3 - Создать маску

Столбец №2:

  • 1 - Включить редактирование векторных объектов или изображений
  • 2 - Вставить изображение
  • 3 - Обрезать изображение

Столбец №3:

  • 1 - Задать прозрачность элементу - 10%
  • 2 - 50%
  • 3 - 100%

Вкладка №11 (Выравнивание):

Горячие клавиши Figma часть 12

Столбец №1:

  • 1 - Переместить на 1 уровень ближе к переднему плану
  • 2 - Переместить на 1 уровень дальше от переднего плана
  • 3 - Переместить на передний план
  • 4 - Переместить на задний план

Столбец №2:

  • 1 - Выровнять по левой стороне
  • 2 - Выровнять по правой стороне
  • 3 - Выровнять по верхней стороне
  • 4 - Выровнять по нижней стороне

Столбец №3:

  • 1 - Выровнять согласно горизонтальной линии элементов
  • 2 - Выровнять согласно вертикальной линии элементов
  • 3 - Не пользуюсь функцией
  • 4 - Выравнивание с распределением горизонтального пространства
  • 5 - Выравнивание с распределением вертикального пространства

Вкладка №12 (Компоненты):

Горячие клавиши Figma часть 13
  • 1 - Показать все компоненты
  • 2 - Создать компонент
  • 3 - Преобразовать компонент в фрейм
  • 4 - Многопользовательская библиотека

Также очень важный вопрос: как отменить действие в фигма? Для того чтобы отменить действие в Figma - нужно всего лишь нажать клавиатурное сокращение "Ctrl + Z". И в зависимости от количества нажатий, вы отмените предыдущие действия.

Важно! Когда вы изучили все клавиатурные сокращения в Figma - рекомендую для закрепления отработать их на реальных макетах. По этой и этой ссылкам вы можете найти готовые макеты для оттачивания своих навыков.

Интенсив по веб-дизайну от сайта Figma.info