Онлайн-редактор для спільної розробки інтерфейсів (UI/UX) Figma дозволяє створювати професійні прототипи та дизайн-системи. Щоб підвищити продуктивність та швидкість роботи в Figma можна використовувати гарячі клавіші. Існує безліч різноманітних шорткатів для такої ж кількості функцій та задач в редакторі. Як професіоналам, так і тим, хто тільки починає вивчати курси UI/UX дизайну, важливо знати на вміти використовувати hotkeys.
У цій статті розповідаємо про гарячі клавіші у Figma та пояснюємо, як за допомогою комбінацій клавіш швидко переміщатися по файлу, виконувати миттєві дії, копіювати й вставляти елементи, змінювати кольори, обертати та масштабувати об’єкти, а також працювати з компонентами.
Швидкий старт: найважливіші шорткати Figma
Комбінації гарячих клавіш у Figma відрізняються на Mac і Windows через різну логіку роботи операційних систем, зокрема через відмінності в системних клавішах та стандартних поєднаннях. У Figma Cmd/Ctrl — це основні модифікатори для більшості гарячих клавіш: Cmd на macOS і Ctrl на Windows. Вони використовуються в shortcuts для виконання базових дій (копіювати, вставити, дублювати тощо).
Must-know шорткати Figma на Mac і Windows
Рух (Move) - V (для переміщення об'єктів по робочому простору).
Прямокутник (Rectangle) - R (для малювання прямокутників).
Текст (Text) - T (для створення текстових елементів).
Пошук файлів / Quick Actions - Cmd/Ctrl + / (для швидкого пошуку інструментів, файлів або команд у Figma без переходу в меню).
Групувати об'єкти - Cmd/Ctrl + G (для об'єднання кількох об'єктів в одну групу).
Створити фрейм із виділення - Cmd/Ctrl + Alt + G (для створення Frame з вибраних елементів).
Дублювати об'єкт - Cmd/Ctrl + D (для створення копії вибраного елемента).
Збільшити масштаб - Cmd/Ctrl + + (для наближення на робочій площині).
Зменшити масштаб - Cmd/Ctrl + - (для віддалення від робочої площини).
Масштаб до виділення - Shift + 2 (для швидкого переходу до вибраного елемента).
Обрізати - Cmd/Ctrl + Shift + K (для вставки зображення у файл).
Панорамування - Space (для переміщення робочої області без зміни масштабу).
Приховати / показати інтерфейс - Cmd/Ctrl + \ (для приховування або відображення панелей Figma).
Як знайти гарячі клавіші у Figma
У верхньому меню оберіть функцію “Help” > “Keyboard Shortcuts”.
На екрані з'являється спливаюче вікно з переліком усіх доступних гарячих клавіш.
Гарячі клавіші для роботи з об'єктами, масштабом та вікнами в 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:1
Cmd/Ctrl + 1
Застосувати масштаб 1:2
Cmd/Ctrl + 2
Застосувати масштаб 1:3-9
Cmd/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
Функція
Гарячі клавіші (Mac/Windows)
Вирівняти за вертикаллю
Cmd/Ctrl + Shift + V
Вирівняти за горизонталлю
Cmd/Ctrl + Shift + H
Вирівняти по центру
Cmd/Ctrl + Shift + E
Вирівняти по середині
Cmd/Ctrl + Shift + M
Вирівняти за лівим краєм
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 + Shift + [
Змінити порядок слоїв на один рівень вгору
Cmd/Ctrl + Alt + Shift + ]
Змінити порядок слоїв на один рівень вниз
Cmd/Ctrl + Alt + Shift + [
Змінити розмір об'єкта
Cmd/Ctrl + Shift + R
Змінити розмір об'єкта
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 + /
FAQ
Чи однакові шорткати на Mac і Windows? Комбінації гарячих клавіш у Figma відрізняються через різну логіку роботи Mac і Windows, зокрема в системних клавішах. На Mac використовуються Cmd, а на Windows - Ctrl як основні модифікатори для виконання базових дій, таких як копіювання чи вставка.
Як переглянути всі шорткати у Figma? У верхньому меню виберіть "Help" > "Keyboard Shortcuts". Для відкриття спливаючого вікна з усіма гарячими клавішами натискайте такі shortcuts: Shift + Ctrl + ? на Windows або Shift + Cmd + ? на MacOS.
Які шорткати для Auto Layout? - Додати Auto Layout: Windows: Shift + A для Windows та Shift + A для MacOS - Додати розподіл між елементами: Alt + Shift + V (Vertical) / Alt + Shift + H (Horizontal) для Windows та Option + Shift + V (Vertical) / Option + Shift + H (Horizontal) для MacOS. -Додати відступи: Shift + Left/Right Arrow (Adjust padding) для Windows та Shift + Left/Right Arrow (Adjust padding) для MacOS.
Які шорткати для швидкого прототипування?
Shortcuts для швидкого прототипування в Figma включають F для створення фреймів, T для додавання тексту, Shift + Tab для перемикання в режим прототипу, та Ctrl + Enter (Windows) / Cmd + Enter (Mac) для перегляду прототипу.