ВСЕ Горячие клавиши в Фигма (Figma) для быстрой работы дизайнера

ВАЖНО! В редакторе Figma в отличие от Adobe Photoshop невозможно менять сочетания клавиш так, как вам удобно (подстроить всё индивидуально под себя). Вам придётся использовать те горячие клавиши и те сочетания клавиш, которые предлагают создатели Фигма.

Для начала вам необходимо открыть проект в Фигма или создать новый проект "New design file". Все существующие горячие клавиши в Фигме можно найти в разделе "Keyboard Shortcuts". Этот раздел можно открыть двумя способами:

1. Нажав сочетание клавиш "Ctrl + Shift + ?"
2. Нажав на значок вопроса в правом нижнем углу экрана

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

Чтобы убрать черное окно со всеми комбинациями клавиш просто нажмите на крестик в правом верхнем углу этого окна.

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

1. Сtrl + C — копировать элемент
2. Сtrl + V — вставить элемент
3. Сtrl + X — вырезать элемент
4. Сtrl + A — выделить все элементы сразу
5. I — инструмент пипетка, выбирайте цвет
6. K — менять размер
7. V — стандартный инструмент выделения и перемещения
8. [ — переместить слой назад, за всеми слоями
9. ] — переместить слой вперед, перед всеми слоями
10. Ctrl + Shift + 4 — показать/спрятать сетки
11. Зажатый Alt — дублировать элементы / фреймы
12. Зажатый Ctrl + колесико мыши — приближаться к объектам и отдаляться от них
13. Зажатый пробел + зажатая левая кнопка мыши — перемещение по рабочей области
14. Shift + A — создать auto layout
15. Ctrl + \ — убрать или показать интерфейс редактора Фигма

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

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

Уроки разделены на понятные блоки:

1. Установка и знакомство с интерфейсом (6 мин)
2. Создание проекта и работа с инструментами (15 мин)
3. Изучение линий, фигур, текста и других элементов (13 мин)
4. Работа с компонентами и сохранение проекта (8 мин)
   

Figma - простой и понятный инструмент, который позволяет создавать дизайн без лишних сложностей. Не нужно запоминать длинные инструкции или переводить интерфейс на русский язык - редактор Figma интуитивно понятен с первого взгляда.

Кроме того, работать в Figma можно даже на слабом ноутбуке. Можно забыть о дорогих компьютерах - этот редактор доступен каждому. Создавайте проекты любой сложности: от инфографики и рекламных креативов до анимации и веб-дизайна.

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

Подробнее об обучении

Горячие клавиши в Figma - это мощный инструмент, который значительно ускоряет работу дизайнера. Они позволяют выполнять различные операции быстро и эффективно, без необходимости постоянно переключаться между мышью и клавиатурой. Например, комбинация "Ctrl + Shift + O" в Figma открывает окно быстрого поиска, что позволяет легко находить нужные элементы в проекте. Для трансформации объекта достаточно выбрать его и использовать сочетание клавиш "Ctrl + Shift + T", чтобы быстро применить нужные изменения.

Кроме того, горячие клавиши позволяют быстро сворачивать все слои ("Ctrl + Alt + 1"), разгруппировывать объекты ("Shift + Cmd + G"), копировать компоненты ("Alt + Drag"), переворачивать текст ("Ctrl + Shift + R"), а также выполнять множество других действий. Например, чтобы вызвать пипетку в фигме и выбрать цвет изображения, можно использовать комбинацию "I". А для создания фрейма с заданными параметрами просто нужно выделить область и нажать "F".

Если возникает необходимость отменить последнее действие, можно воспользоваться комбинацией "Ctrl + Z", а для шага вперед - "Ctrl + Shift + Z". Также можно быстро удалить объект, выбрав его и нажав "Delete". Для масштабирования объекта используются комбинации "Ctrl + Alt + ↑" (увеличить) и "Ctrl + Alt + ↓" (уменьшить).

Горячие клавиши также позволяют выполнять различные операции с текстом, например, вырезать ("Ctrl + X"), копировать ("Ctrl + C"), вставить ("Ctrl + V"), а также изменять шрифт ("Ctrl + Shift + >" или "Ctrl + Shift + <").

Использование горячих клавиш в Figma значительно упрощает и ускоряет работу дизайнера, позволяя сосредоточиться на творчестве и достижении лучших результатов.

Сочетание клавиш "Ctrl + Shift + ?" откроет внизу экрана окно чёрного цвета. Это вкладка Essential (в переводе с английского — "существенное", "важное").

Во вкладке Essential можно:
1. (Show/Hide UI) Ctrl + \ — скрыть или вывести на экран интерфейс Фигмы;
2. (Pick Color) I — выбрать "пипеткой" цвет или оттенок из любого объекта и применить его в своей работе;
3. (Quick Actions) Ctrl + / — быстро найти плагины, слои или команды в Фигме.

Вкладка View (или вид) предназначена для того, чтобы показывать или скрывать элементы. А какие именно элементы показать / скрыть — решает сочетание клавиш:

• Shift + R — показать или скрыть линейки;
• Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac — показать или скрыть обводку всех элементов;
• Ctrl + Alt + Y на Windows и ⌘ + P на Mac — показать или скрыть пиксельный просмотр;
• Ctrl + Shift + 4 на Windows и Ctrl + G на Mac — показать или скрыть сетку;
• Ctrl + ' на Windows и ⌘ + ' на Mac — показать или скрыть пиксельную сетку;
• Ctrl + \ на Windows и ⌘ + \ на Mac — показать или скрыть боковые панели;
• Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac — показать или скрыть курсоры других пользователей;
• Alt + 1 — показать или скрыть только слои;
• Alt + 2 — показать или скрыть только компоненты;
• Alt + 8 — показать или скрыть панель дизайна;
• Alt + 9 — показать или скрыть панель прототипа.

Вкладка Components (или компоненты):

• Alt + —показ всех элементов;
• Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac — создание компонента;
• Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac — преобразование компонента во фрейм;
• Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac — переход к многопользовательской библиотеки.

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

1. Курс "Графический дизайн в Figma + нейросети" от онлайн-школы ddesign.moscow
На курсе графического дизайна вы научитесь создавать карточки товаров, рекламные креативы, оформление для соцсетей, анимацию, сайты и многое другое. Этот уникальный курс предоставляет возможность развить свои навыки в области визуального дизайна и начать зарабатывать на фрилансе, занимаясь любимым делом. Уже более 500 учеников добились успеха в этой области.

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

Дизайн может освоить абсолютно каждый, независимо от уровня креативности. На курсе вы будете работать только в бесплатном онлайн редакторе Figma, поэтому не нужно платить за подписку на дорогие программы. Курс можно пройти за месяц и уже начать зарабатывать.

2. Курс "Figma" от онлайн-школы Contented
Доступ к курсу Figma предоставляется навсегда, обеспечивая стабильную практику и возможность создать портфолио с двумя работами. Вы можете начать обучение в удобное для вас время, благодаря гибкому формату видеоуроков и практических заданий. Figma - базовый инструмент для дизайнеров, и программа обучения разработана таким образом, чтобы погружение в него было плавным и эффективным.

В рамках курса вы научитесь создавать прототипы для сайтов и мобильных приложений. На первой неделе курса вы познакомитесь с интерфейсом и возможностями программы Figma.


3. Курс "Figma с нуля до PRO" от онлайн-школы Skillbox.
Продолжительность курса составляет 2 месяца, и он предоставляет доступ к материалам навсегда. Figma - предпочтительный инструмент веб- и UX-дизайнеров по всему миру, который позволяет быстро создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений. Ещё одним преимуществом является возможность одновременного редактирования макета несколькими пользователями, что делает его идеальным для командной работы.

Более 2000 компаний в настоящее время ищут дизайнеров, обладающих навыками работы в Figma, а средняя заработная плата специалиста, владеющего этим инструментом, составляет 80 000 рублей.

Этот курс подходит новичкам в веб-дизайне, которые с нуля освоят Figma и узнают, как использовать горячие клавиши для более быстрой работы. Он также подойдет веб-дизайнерам без опыта работы в Figma, которые научатся создавать UI Kit, использовать плагины и компоненты, повысят скорость своей работы и освободят время для креативных задач.

На курсе вы освоите профессиональную работу в Figma, научитесь создавать адаптивные макеты, добавлять интерактив в прототипы, создавать компоненты и библиотеки стилей, работать над проектом в команде и передавать макеты в разработку, наводя порядок в слоях и артбордах и показывая разработчикам технические аспекты и коды компонентов.

4. Курс "Веб-дизайн с нуля до PRO" от онлайн школы Skillbox
Программа "Веб-дизайн с нуля до PRO" позволит вам освоить создание дизайна сайтов в программе Figma, работать с реальными кейсами и собирать портфолио. Это отличный способ освоить перспективную специальность и начать карьеру в дизайн-студии, IT-компании или на фрилансе.

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