Як гарячі клавіші у Figma спрощують роботу UI/UX дизайнерів
Онлайн-редактор для спільної розробки інтерфейсів (UI/UX) Figma дозволяє створювати професійні прототипи та дизайн-системи. Щоб підвищити продуктивність та швидкість роботи в Figma можна використовувати гарячі клавіші. Існує безліч різноманітних шорткатів для такої ж кількості функцій та задач в редакторі. Як професіоналам, так і тим, хто тільки починає вивчати курси UI/UX дизайну, важливо знати на вміти використовувати hotkeys.
Хочеш стати UI/UX дизайнером?
Не знаєш, з чого почати кар'єру в дизайні? Дізнайся, як курси UI/UX з працевлаштуванням допоможуть тобі опанувати навички дизайну та отримати першу роботу в ІТ.
У цій статті розповідаємо про гарячі клавіші у 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”.
- Натисніть комбінацію клавіш:
- Windows: Shift + Ctrl + ?
- MacOS: Shift + Cmd + ? - На екрані з'являється спливаюче вікно з переліком усіх доступних гарячих клавіш.
Як стати UI/UX дизайнером без досвіду
Не знаєш, з чого почати? Курси UI/UX дизайну з працевлаштуванням – це твій шанс освоїти професію та знайти першу роботу в ІТ.
Гарячі клавіші для роботи з об'єктами, масштабом та вікнами в 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 + / |
Мрієш про кар'єру в дизайні? Почни з курсу UI/UX
Якщо ти ще не визначився, з чого почати в ІТ, курси UI/UX з працевлаштуванням допоможуть почати кар'єру мрії.
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) для перегляду прототипу.