Figma є одним з найпопулярніших інструментів для дизайнерів та розробників, який дозволяє створювати професійні інтерфейси, прототипи та дизайн-системи.
Одним з способів підвищити продуктивність та швидкість роботи в Figma є використання гарячих клавіш. Вони можуть значно прискорити вашу роботу та забезпечити більш зручний та швидкий робочий процес.
У цьому пості ми розглянемо гарячі клавіші у Figma, які допоможуть вам ефективно працювати з цим потужним інструментом. Ви дізнаєтеся про те, як використовувати гарячі клавіші для швидкої навігації, миттєвих дій, копіювання, вставляння, зміни кольорів, обертання, масштабування та роботи з компонентами в Figma.
Незалежно від вашого рівня досвіду використання Figma – цей пост допоможе вам вдосконалити ваші навички та підвищити продуктивність в розробці інтерфейсів. Він буде корисним і нашим студентам, що проходять навчання на курсі з UI/UX дизайну, тож додавайте посилання на сторінку в обране.
Як перемикатись між інструментами в Фігма
Інструмент
Гаряча клавіша
Рух (Move)
V
Прямокутник (Rectangle)
R
Овал (Ellipse)
O
Лінія (Line)
L
Текст (Text)
T
Таблиця гарячих клавіш по роботі з вікнами в Figma
Операція
Гарячі клавіші (Mac/Win)
Пошук файлів (File search)
Cmd/Ctrl + /
Групування об’єктів (Group)
Cmd/Ctrl + G
Розгрупування об’єктів (Ungroup)
Cmd/Ctrl + Shift + G
Обрізання (Crop)
Cmd/Ctrl + Shift + K
Гарячі клавіші для роботи з масштабом (зумом), панорамуванням та навігацією між фреймами в Figma
Операція
Гарячі клавіші (Mac/Win)
Збільшити масштаб (Zoom in)
Cmd/Ctrl + +
Зменшити масштаб (Zoom out)
Cmd/Ctrl + –
Зафіксувати масштаб (Reset zoom)
Cmd/Ctrl + 0
Панорамування (Panning)
Space
Перехід до попереднього фрейму (Previous frame)
Cmd/Ctrl + [`]
Перехід до наступного фрейму (Next frame)
Cmd/Ctrl + ]
Таблиця шорткатів по копіюванню та вставлянню в Figma
Операція
Гарячі клавіші (Mac/Win)
Вирізати (Cut)
Cmd/Ctrl + X
Копіювати (Copy)
Cmd/Ctrl + C
Вставити (Paste)
Cmd/Ctrl + V
Дублювати (Duplicate)
Cmd/Ctrl + D
Таблиця шорткатів по обертанню та масштабуванню в Figma
Операція
Гарячі клавіші (Mac/Win)
Обернути проти годинникової стрілки (Rotate counter-clockwise)
Cmd/Ctrl + [
Обернути за годинниковою стрілкою (Rotate clockwise)
Cmd/Ctrl + ]
Збільшити масштаб (Zoom in)
Cmd/Ctrl + +
Зменшити масштаб (Zoom out)
Cmd/Ctrl + –
Зафіксувати масштаб (Reset zoom)
Cmd/Ctrl + 0
Застосувати масштаб 1:1 (Actual size)
Cmd/Ctrl + 1
Застосувати масштаб 1:2 (Half size)
Cmd/Ctrl + 2
Застосувати масштаб 1:3-9
Cmd/Ctrl + цифра від 3х до 9
Таблиця шорткатів по роботі з кольорами в Figma:
Операція
Гарячі клавіші (Mac/Win)
Відкрити палітру кольорів (Open color picker)
Cmd/Ctrl + C
Використати палітру за останнім використанням (Use last used color)
Shift + Cmd/Ctrl + C
Застосувати застарілий колір (Apply previous color)
Shift + Cmd/Ctrl + K
Застосувати наступний колір (Apply next color)
Shift + Cmd/Ctrl + J
Змінити колір наповнення на активному шарі (Change fill color on active layer)
X
Інструмент “піпетка”
I
Змінити колір обводки на активному шарі (Change stroke color on active layer)
Shift + X
Змінити колір тексту на активному шарі (Change text color on active layer)
Cmd/Ctrl + Shift + C
Змінити фоновий колір (Change background color)
Cmd/Ctrl + B
Змінити колір вибраного тексту (Change selected text color)
Cmd/Ctrl + Shift + K
Змінити колір вибраної форми (Change selected shape color)
Cmd/Ctrl + Shift + C
Таблиця шорткатів по роботі з компонентами в Figma:
Операція
Гарячі клавіші (Mac/Win)
Створити компонент (Create component)
Cmd/Ctrl + Option/Alt + K
Вставити компонент (Paste component)
Cmd/Ctrl + Option/Alt + V
Відкрити бібліотеку компонентів (Open component library)
Cmd/Ctrl + Option/Alt + L
Видалити компонент (Delete component)
Cmd/Ctrl + Option/Alt + Backspace/Delete
Застосувати компонент на вибраний об’єкт (Apply component to selection)
Cmd/Ctrl + Option/Alt + A
Застосувати компонент на вибраний текст (Apply component to selected text)
Cmd/Ctrl + Option/Alt + T
Застосувати останній використаний компонент (Apply last used component)
Shift + Cmd/Ctrl + K
Застосувати наступний компонент (Apply next component)
Перемістити компонент в інший фрейм (Move component to another frame)
Cmd/Ctrl + Alt + M
Таблиця гарячих клавіш по роботі з розташуванням об’єктів в Figma:
Операція
Гарячі клавіші (Mac/Win)
Вирівняти за вертикаллю (Align vertical)
Cmd/Ctrl + Shift + V
Вирівняти за горизонталлю (Align horizontal)
Cmd/Ctrl + Shift + H
Вирівняти по центру (Align center)
Cmd/Ctrl + Shift + E
Вирівняти по середині (Align middle)
Cmd/Ctrl + Shift + M
Вирівняти за лівим краєм (Align left)
Cmd/Ctrl + Shift + L
Вирівняти за правим краєм (Align right)
Cmd/Ctrl + Shift + R
Вирівняти по верхньому краю (Align top)
Cmd/Ctrl + Shift + T
Вирівняти по нижньому краю (Align bottom)
Cmd/Ctrl + Shift + B
Розподілити за вертикаллю (Distribute vertical)
Cmd/Ctrl + Shift + D
Розподілити за горизонталлю (Distribute horizontal)
Cmd/Ctrl + Shift + G
Розподілити за розміром (Distribute size)
Cmd/Ctrl + Shift + P
Змінити порядок слоїв на передній план (Bring forward)
Cmd/Ctrl + Shift + ]
Змінити порядок слоїв на задній план (Send backward)
Cmd/Ctrl + Shift + [
Змінити порядок слоїв на один рівень вгору (Bring to front)
Cmd/Ctrl + Alt + Shift + ]
Змінити порядок слоїв на один рівень вниз (Send to back)
Cmd/Ctrl + Alt + Shift + [
Змінити розмір об’єкта (Resize object)
Cmd/Ctrl + Shift + R
Повернути об’єкт на 45 градусів проти часової стрілки (Rotate object counterclockwise by 45 degrees)
Cmd/Ctrl + Alt + [
Повернути об’єкт на 45 градусів за часовою стрілкою (Rotate object clockwise by 45 degrees)
Cmd/Ctrl + Alt + ]
Встановити розмір об’єкта відповідно до складу (Fit object to constraints)
Cmd/Ctrl + Shift + X
Вирівняти об’єкт на основі складу (Align object based on constraints)
Cmd/Ctrl + Shift + C
Гарячі клавіші для роботи зі шрифтами в Figma:
Операція
Гарячі клавіші (Mac/Win)
Встановити стиль шрифту (Set font style)
Cmd/Ctrl + Shift + T
Збільшити розмір шрифту (Increase font size)
Cmd/Ctrl + Shift + >
Зменшити розмір шрифту (Decrease font size)
Cmd/Ctrl + Shift + <
Перейти до наступного розміру шрифту (Next font size)
Cmd/Ctrl + ]
Перейти до попереднього розміру шрифту (Previous font size)
Cmd/Ctrl + [
Змінити стиль шрифту на курсивний (Toggle italic font style)
Cmd/Ctrl + I
Змінити стиль шрифту на жирний (Toggle bold font style)
Cmd/Ctrl + B
Змінити стиль шрифту на підкреслений (Toggle underline font style)
Cmd/Ctrl + U
Змінити стиль шрифту на зачеркнений (Toggle strikethrough font style)
Cmd/Ctrl + Shift + X
Вирівняти текст по лівому краю (Align text left)
Cmd/Ctrl + Shift + L
Вирівняти текст по центру (Align text center)
Cmd/Ctrl + Shift + E
Вирівняти текст по правому краю (Align text right)
Cmd/Ctrl + Shift + R
Вирівняти текст по ширині (Align text width)
Cmd/Ctrl + Shift + W
Збільшити міжрядковий інтервал (Increase line height)
Cmd/Ctrl + Alt + ↑
Зменшити міжрядковий інтервал (Decrease line height)
Cmd/Ctrl + Alt + ↓
Збільшити відступ між літерами (Increase letter spacing)
Option/Alt + →
Зменшити відступ між літерами (Decrease letter spacing)
Option/Alt + ←
Збільшити відступ слів (Increase word spacing)
Option/Alt + Shift + →
Зменшити відступ слів (Decrease word spacing)
Option/Alt + Shift + ←
Змінити роздільність шрифту (Change font weight)
Cmd/Ctrl + Shift + B
Змінити роздільність шрифту на наступну (Increase font weight)
Cmd/Ctrl + }
Змінити роздільність шрифту на попередню (Decrease font weight)
Cmd/Ctrl + {
Змінити капитель тексту на великі (Change text case to uppercase)
Cmd/Ctrl + Shift + K
Змінити капитель тексту на малі (Change text case to lowercase)
Cmd/Ctrl + Shift + L
Змінити капитель тексту на великі літери (Change text case to title case)
Cmd/Ctrl + Shift + M
Змінити капитель тексту на зворотній (Invert text case)
Cmd/Ctrl + Shift + F
Змінити шрифт на наступний у списку (Next font in list)
Cmd/Ctrl + .
Змінити шрифт на попередній у списку (Previous font in list)
Cmd/Ctrl + ,
Відкрити вікно налаштувань шрифту (Open font settings)
Cmd/Ctrl + Shift + /
Це більшість основних шорткатів, які можна використовувати при роботі в Figma. Вони стануть в пригоді як новачкам, так і професійним дизайнерам. Зверніть увагу, що шорткати можуть відрізнятися в залежності від операційної системи (Mac або Windows) та версії Figma. Рекомендується перевіряти офіційну документацію Figma для отримання повного списку шорткатів та їх оновлення.
