Як гарячі клавіші Figma спрощують роботу UI/UX-дизайнерів
Figma (фігма) – онлайн-редактор для дизайну інтерфейсів, у якому одночасно можуть працювати кілька людей над одним файлом у браузері. Гарячі клавіші Figma (шорткати) дозволяють виконувати базові дії – переміщення, масштабування, групування об'єктів, зміну кольору – без переходу в меню, що суттєво прискорює роботу над макетом.
Розбираємо детально, що таке Figma (фігма) і як вона працює, які гарячі клавіші фігма варто знати в першу чергу, як наближати та віддаляти вигляд, додавати шрифти та створювати вектор у Figma – та повний список шорткатів для Mac і Windows.
Figma – лише один із інструментів UI/UX дизайнера
Дізнайся, які навички потрібні для старту в професії та як перейти від навчальних макетів до реальних проєктів.
Що таке Figma (фігма) і як вона працює
Figma – це хмарний онлайн-редактор для UI/UX дизайну, у якому кілька людей можуть одночасно редагувати один файл прямо в браузері. Простими словами, Figma (або "фігма") – це інструмент, що замінив десктопні редактори на кшталт Sketch чи Adobe XD саме завдяки хмарній природі: файл зберігається на серверах Figma, а не на диску одного комп'ютера.
Ось як працює Фігма: усі зміни синхронізуються в реальному часі, тож кілька дизайнерів, розробників чи менеджерів продукту бачать один і той самий макет одночасно й можуть залишати коментарі просто на полотні. Працювати можна через браузер (Chrome, Safari, Firefox) або через десктопний застосунок для Mac і Windows – функціонал ідентичний.
У Figma створюють:
- інтерфейси вебсайтів і мобільних застосунків;
- інтерактивні прототипи з переходами між екранами;
- дизайн-системи та бібліотеки компонентів;
- вайрфрейми та схеми у FigJam – суміжному інструменті для командної роботи на дошці.
Мрієш працювати UI/UX дизайнером?
Опануй не лише Figma, а й UX-дослідження, прототипування, дизайн-системи та роботу над реальними кейсами.
Швидкий старт: найважливіші шорткати Figma на Mac і Windows
Cmd/Ctrl – це основні модифікатори для більшості гарячих клавіш фігма. На Mac використовується Cmd, на Windows – Ctrl; решта комбінації здебільшого збігаються.
Must-know шорткати, які варто запам'ятати в першу чергу:
- Рух (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).
Пара Cmd/Ctrl + G та Cmd + Shift + G варта окремої уваги: перша групує виділені об'єкти в одну групу, друга – розгруповує, тобто повертає об'єкти в попередній стан. Це один із шорткатів, які найчастіше шукають окремо, бо на відміну від Group він не завжди інтуїтивно очевидний.
Як знайти гарячі клавіші у Figma
- У верхньому меню оберіть функцію “Help” > “Keyboard Shortcuts”.
- Натисніть комбінацію клавіш:
- Windows: Shift + Ctrl + ?
- MacOS: Shift + Cmd + ? - На екрані з'являється спливаюче вікно з переліком усіх доступних гарячих клавіш.
Зроби наступний крок після Figma
Навчися створювати зручні інтерфейси, працювати над портфоліо та готуватися до першої роботи в дизайні.
Як наближати та віддаляти вигляд у Figma
Наближати та віддаляти зображення у Figma можна клавіатурою, колесом миші або жестом на трекпаді – усі три способи дають однаковий результат.
Клавіатурні шорткати для масштабу:
- Zoom In – Cmd/Ctrl + "+";
- Zoom Out – Cmd/Ctrl + "-";
- Zoom to 100% – Shift + 0;
- Zoom to Fit (усе полотно) – Shift + 1;
- Zoom to Selection (виділений об'єкт) – Shift + 2.
Мишею чи трекпадом наблизити або віддалити можна, утримуючи Cmd/Ctrl і прокручуючи колесо миші вгору-вниз, або зводячи/розводячи два пальці на трекпаді (pinch-to-zoom) – так само, як у більшості графічних редакторів.
Гарячі клавіші для роботи з об'єктами, масштабом та вікнами в 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 дизайні
Дізнайся, як отримати практичний досвід, зібрати портфоліо та зробити перший крок до роботи в IT.
FAQ
Фігма – що це таке?
Figma (фігма) – хмарний онлайн-редактор для дизайну інтерфейсів, у якому кілька людей можуть одночасно працювати над одним файлом у браузері без встановлення програми.
Чи однакові шорткати на Mac і Windows?
Комбінації гарячих клавіш у Figma відрізняються через різну логіку роботи Mac і Windows, зокрема в системних клавішах. На Mac використовується Cmd, а на Windows – Ctrl як основні модифікатори для виконання базових дій, таких як копіювання чи вставка.
Як переглянути всі шорткати (ключі) у Figma?
У верхньому меню виберіть Help → Keyboard Shortcuts. Для відкриття спливаючого вікна з усіма гарячими клавішами натискайте: Shift + Ctrl + ? на Windows або Shift + Cmd + ? на MacOS.
Які шорткати для Auto Layout?
Додати Auto Layout – Shift + A. Додати розподіл між елементами – Alt + Shift + V (вертикально) / Alt + Shift + H (горизонтально) для Windows, Option + Shift + V/H для MacOS. Додати відступи – Shift + стрілка вліво/вправо.
Які шорткати для швидкого прототипування?
F – створення фреймів, T – додавання тексту, Shift + Tab – перемикання в режим прототипу, Ctrl + Enter (Windows) / Cmd + Enter (Mac) – перегляд прототипу.
Як наближати та віддаляти вигляд у Figma?
Клавіатурою – Cmd/Ctrl + "+" для наближення і Cmd/Ctrl + "-" для віддалення; або утримуючи Cmd/Ctrl і прокручуючи колесо миші, або жестом pinch-to-zoom на трекпаді.
Як додати свій шрифт у Figma?
Встановіть шрифт у системі (Font Book на Mac або через Windows Fonts), підключіть Figma Agent із figma.com/downloads і перезапустіть Figma – шрифт з'явиться у списку в панелі Text.
Яким інструментом створити вектор у Figma?
Інструментом Pen (клавіша P) – він будує вектор із точок-якорів, які потім можна редагувати у Vector Edit Mode.
Чи є Figma українською мовою?
Офіційного українського інтерфейсу Figma поки немає – продукт доступний англійською (та ще кількома мовами через автопереклад браузера). Українська дизайн-спільнота Figma при цьому активна – є окремі форуми, курси та YouTube-уроки українською про роботу в редакторі.
Що таке гарячі клавіші (ключі) Figma і навіщо вони потрібні?
Це комбінації клавіш, які замінюють клацання по меню й панелях інструментів – вони прискорюють рутинні дії (виділення, групування, масштаб, зміну кольору) і є базовим навичком для будь-якого UI/UX дизайнера, що працює у Figma щодня.
