Гарячі клавіші у Figma: Швидка навігація та продуктивність дизайнера


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 для отримання повного списку шорткатів та їх оновлення.