Figma є одним з найпопулярніших інструментів для дизайнерів та розробників, який дозволяє створювати професійні інтерфейси, прототипи та дизайн-системи.
Одним з способів підвищити продуктивність та швидкість роботи в Figma є використання гарячих клавіш. Вони можуть значно прискорити вашу роботу та забезпечити більш зручний та швидкий робочий процес.
У цьому пості ми розглянемо гарячі клавіші у Figma, які допоможуть вам ефективно працювати з цим потужним інструментом. Ви дізнаєтеся про те, як використовувати гарячі клавіші для швидкої навігації, миттєвих дій, копіювання, вставляння, зміни кольорів, обертання, масштабування та роботи з компонентами в Figma.
Незалежно від вашого рівня досвіду використання Figma - цей пост допоможе вам вдосконалити ваші навички та підвищити продуктивність в розробці інтерфейсів. Він буде корисним і нашим студентам, що проходять навчання на курсі з UI/UX дизайну, тож додавайте посилання на сторінку в обране.
Як перемикатись між інструментами в Фігма
- Рух (Move) — V
- Прямокутник (Rectangle) — R
- Овал (Ellipse) — O
- Лінія (Line) — L
- Текст (Text) — T
Таблиця гарячих клавіш по роботі з вікнами в Figma
- Пошук файлів — Cmd/Ctrl + /
- Групування об'єктів — Cmd/Ctrl + G
- Розгрупування об'єктів — Cmd/Ctrl + Shift + G
- Обрізання — Cmd/Ctrl + Shift + K
Гарячі клавіші для роботи з масштабом (зумом), панорамуванням та навігацією між фреймами в Figma
- Збільшити масштаб — Cmd/Ctrl + +
- Зменшити масштаб — Cmd/Ctrl + –
- Зафіксувати масштаб — Cmd/Ctrl + 0
- Панорамування — Space
- Перехід до попереднього фрейму — Cmd/Ctrl + [
- Перехід до наступного фрейму — Cmd/Ctrl + ]
Таблиця шорткатів по копіюванню та вставлянню в Figma
- Вирізати — Cmd/Ctrl + X
- Копіювати — Cmd/Ctrl + C
- Вставити — Cmd/Ctrl + V
- Дублювати — Cmd/Ctrl + D
Таблиця шорткатів по обертанню та масштабуванню в Figma
- Обернути проти годинникової стрілки — Cmd/Ctrl + [
- Обернути за годинниковою стрілкою — Cmd/Ctrl + ]
- Збільшити масштаб — 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:
- Відкрити палітру кольорів — 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:
- Створити компонент — 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:
- Вирівняти за вертикаллю — 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 + Alt + Shift + ]
- Змінити порядок слоїв на один рівень вниз — Cmd/Ctrl + Alt + Shift + [
- Змінити розмір об'єкта — Cmd/Ctrl + Shift + R
- Повернути об'єкт на 45° проти годинникової стрілки — Cmd/Ctrl + Alt + [
- Повернути об'єкт на 45° за годинниковою стрілкою — Cmd/Ctrl + Alt + ]
- Встановити розмір об'єкта відповідно до складу — Cmd/Ctrl + Shift + X
- Вирівняти об'єкт на основі складу — Cmd/Ctrl + Shift + C
Гарячі клавіші для роботи зі шрифтами в Figma:
- Встановити стиль шрифту — 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 + /
Це більшість основних шорткатів, які можна використовувати при роботі в Figma. Вони стануть в пригоді як новачкам, так і професійним дизайнерам. Зверніть увагу, що шорткати можуть відрізнятися в залежності від операційної системи (Mac або Windows) та версії Figma. Рекомендується перевіряти офіційну документацію Figma для отримання повного списку шорткатів та їх оновлення.