20 неочевидных горячих клавиш в Figma ускорят твою работу в 358 раз. Часть 2

Когда я начинал осваивать Figma, ментор дал мне жесткое указание: использовать хоткеи для частых операций (от англ. hot - горячий, key - клавиша). И это не только про Ctrl + C и Ctrl + V. Постепенно я запомнил около 70 горячих клавиш и сочетаний. Чтобы вставить скопированный элемент с заменой, я нажимаю сочетание Ctrl + Shift + R (Cmd + Shift + R). Чтобы провалиться глубже по слоям и выбрать нужный — клавиши Enter и Tab ( →| ). Это намного быстрее, чем вставлять скопированный элемент, а затем удалять ненужный; или ловить курсором фрейм в глубине других.

Привет! Меня зовут Антон, я продуктовый дизайнер и ментор. Совместно с Никитой Семёновым наполняю бесплатную базу знаний для цифровых дизайнеров. В статье делюсь методом ускорения работы в Figma с помощью второй десятки неочевидных горячих клавиш и показываю на видео.

Читайте о первой десятке хоткеев в статье «20 неочевидных горячих клавиш в Figma ускорят твою работу в 358 раз. Часть 1»

Начинающий пользователь Figma копирует большой текст и вставляет в маленький примерно так:

Продвинутый пользователь в данном контексте скопирует иначе:

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

Открывай список хоткеев на панели справа

Для удобства поиска список разделен на категории

Найдите в списке нужную операцию, а справа от нее соответствующие хоткеи. Применяйте в работе.

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

Не нужно запоминать весь список из Figma. Используйте самые эффективные для себя.

Показываю в действии несколько неочевидных хоткеев, которые сэкономят вам время.

11. В процессе работы над проектом вы проваливались вглубь слоев, переключались между ними, редактировали и т.д. На панели слоев образовался бардак, в котором сложно ориентироваться. Чтобы свернуть все слои полностью или свернуть их только до выбранного слоя, нажмите:
Alt + L (windows)
Option + L (macOS)

12. Вы хотите увидеть все слои выбранного элемента в макете, чтобы быстро найти и выделить нужный слой. Наведите курсор на шеврон слоя и нажмите:
Alt + ЛКМ (левая кнопка мыши) (windows)
Option + ЛКМ (macOS)

13. Если вы хотите избежать случайного редактирования элемента в макете (или наоборот вернуть возможность редактирования), заблокируйте/разблокируйте слой сочетанием:
Ctrl + Shift + L (windows)
Cmd + Shift + L (macOS)

14. Вы показываете путь пользователя на макетах, где одни элементы интерфейса добавляются, а другие скрываются. Используйте сочетание клавиш для показа/скрытия слоев:
Ctrl + Shift + H (windows)
Cmd + Shift + H (macOS)

15. Вам нужно добавить новый элемент в несколько распределенных по странице макетов. Перемещайтесь по странице, меняя масштаб:
Shift + 1 — показать весь контент страницы
Shift + 2 — приблизить выбранный элемент

16. Чтобы приблизить произвольную область на странице:
Space + Ctrl + выделить область ЛКМ + отпустить ЛКМ (windows)
Space + Cmd + выделить область ЛКМ + отпустить ЛКМ (macOS)

17. Вы создали новые элементы в макетах и хотите оценить, как они выглядят на экране в масштабе 1:1 :
Ctrl + 0 (windows)
Cmd + 0 (macOS)

18. Чтобы добавить индивидуальности заголовку или сделать логотип из буквы — преобразуйте текст в векторное изображение:
Ctrl + E (windows)
Cmd + E (macOS)

19. Вы добавили фичу в приложение, и хотите рассказать о ней пользователям через сторис. Преобразуйте макеты в изображения формата png:
Ctrl + Shift + C (windows)
Cmd + Shift + C (macOS)

20. Если вам нужно заменить изображения в компонентах карточек — используйте копирование/вставку заливки:
1) Выделите заливку изображения, затем Ctrl + C (windows) или Cmd + C (macOS)
2) Выделите заливку компонента, затем Ctrl + V (windows) или Cmd + V (macOS)

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

11. Свернуть слои Alt + L (windows) Option + L (macOS)

12. Развернуть слои Alt + ЛКМ (windows)Option + ЛКМ (macOS)

13. Заблокировать/разблокировать редактирование слояCtrl + Shift + L (windows) Cmd + Shift + L (macOS)

14. Показать/скрыть слои Ctrl + Shift + H (windows)Cmd + Shift + H (macOS)

15. Перемещаться по странице, меняя масштаб Shift + 1 — показать весь контент страницыShift + 2 — приблизить выбранный элемент

16. Приблизить произвольную область на страницеSpace + Ctrl + выделить область ЛКМ + отпустить ЛКМ (windows)Space + Cmd + выделить область ЛКМ + отпустить ЛКМ (macOS)

17. Масштаб 1:1 Ctrl + 0 (windows)Cmd + 0 (macOS)

18. Преобразовать в векторное изображениеCtrl + E (windows)Cmd + E (macOS)

19. Скопировать как pngCtrl + Shift + C (windows)Cmd + Shift + C (macOS)

20. Копирование/вставка заливки1) Выделите заливку изображения, затем Ctrl + C (windows) или Cmd + C (macOS)2) Выделите заливку компонента, затем Ctrl + V (windows) или Cmd + V (macOS)

Помогаем освоить дизайн, найти работу и повысить грейд. Проект X-Mentors — это самое доступное и честное менторство для дизайнеров.

Главное отличие от курсов и других менторских школ — формат. У нас нет ограничений по встречам, сложных тарифов и долгого ожидания обратной связи. Ты можешь начать с 7-дневного бесплатного периода, чтобы попробовать и понять, подходит ли тебе такой формат.

Мы делаем упор на практику и живое взаимодействие 1 на 1. Помогаем выстроить понятный план развития и даем честную обратную связь, чтобы твой путь в дизайне стал проще и увереннее

🌐 Подробнее об обучении, кейсах и тарифах
📚 Бесплатная база знаний: от основ до собесов