11 найкращих комбінацій клавіш Figma для Windows і Mac
Різне / / November 29, 2021
Figma набирає обертів у просторі дизайну. Програмне забезпечення Sketch переважно домінує в індустрії дизайну UI/UX. Але останні пропозиції від Adobe (Adobe XD) і Figma з гнучким ціноутворенням, безперебійним обміном і міжплатформною доступністю змінюють рівняння для дизайнерів UI/UX.
![Дизайн](/f/b2a701a4e9c71dc4cc4ad02ae4aaacaf.jpg)
Доступність Figma в Інтернеті, Windows і macOS у поєднанні з чудовим стартовим планом (3 проекти та 2 редактора) робить його ідеальним вибором для проектування, створення прототипу та оволодіння навичками дизайну інтерфейсу користувача. Компанія нещодавно представила довгоочікувану підтримку плагінів для нього. Якщо ви новачок у просторі дизайну UI/UX і починаєте свою подорож із Figma, то ви можете запам’ятати купу основних комбінацій клавіш Figma для Windows і Mac.
У цій публікації ми розглянемо одинадцять найкращих комбінацій клавіш Figma, які можна використовувати на ПК з Windows і Mac. Давайте розпочнемо.
Відвідайте Figma
1. Основні можливості масштабування
Ви не можете використовувати Figma або будь-яке програмне забезпечення для дизайну UI/UX, не освоївши комбінації клавіш Zoom. Це будуть найбільш використовувані комбінації клавіш під час вашого робочого процесу.
![Збільште розмір](/f/8a4386dff89ac3dd6a1be8ecc53d29fd.jpg)
Для Windows і Mac можна використовувати Shift + 1, щоб розмістити шари на екрані. Shift + 2, щоб збільшити вибраний кадр (мій найбільш використовуваний комбінація клавіш, оскільки він дозволяє швидко переглядати деталі вибраного компонента), і Shift + 0, щоб збільшити 100%.
2. Показати/приховати лінійки та показати/приховати сітки макета
Зазвичай я не використовую лінійки в Figma, але якщо ви плануєте використовувати їх під час дизайну інтерфейсу користувача, ви можете використовувати комбінацію клавіш Shift + R на ПК або Mac, щоб показати/приховати лінійки.
![Сітка макета Figma](/f/c84f0859501fcbe872ceab6c83957e06.jpg)
Я постійно використовую сітки макетів. Він дозволяє розташовувати компоненти, значки на однаковій відстані, дозволяє організувати текст та інші елементи. Використовуйте комбінацію клавіш Control + G на Mac, щоб показати/приховати сітки макетів.
Також на Guiding Tech
3. Інструмент «Перо, переміщення та текст».
Figma пропонує потужний і настроюваний інструмент «Перо». Ви зрозумієте те, що я маю на увазі, після того, як пограєте з ним кілька хвилин. Під час робочого процесу дизайну ви будете досить часто використовувати ці три інструменти.
Ви завжди можете вибрати їх у верхньому меню або скористатися натисканням клавіші P для перо, V для переміщення та T для тексту на Windows і Mac.
4. Переміщення між шарами та компонентами
Ці дві комбінації клавіш дуже зручні, коли ви працюєте над дизайнерським проектом із занадто великою кількістю шарів і компонентів. Вам може знадобитися постійно переміщатися між ними. Ви можете використовувати Option + 1 для Mac або Alt + 1 для Windows, щоб перейти до панелі шарів. Потім використовуйте Option + 2 для Mac або Alt + 2 для Windows, щоб перейти до меню Компоненти.
5. Відкрити Color Picker
Ця функція корисна, коли ви хочете витягти колір із зображення, значка чи будь-якого іншого компонента. Ви можете використовувати комбінацію клавіш «I» на Mac або Windows, щоб відкрити засіб вибору кольору. Наведіть засіб вибору кольору на зображення чи піктограму та скопіюйте код кольору з вибір кольору меню.
![Вибір кольору figma](/f/fa5d6fc43911d48ad8121b6c567f32a1.jpg)
6. Копіювати/Вставити поточний стиль
Це справжня економія часу. Хочете швидко скопіювати поточний колір/дизайн компонента в інший текст чи піктограму? Ви можете вибрати поточний елемент і використовувати Option + Command + C для Mac або Ctrl + Shift + C для Windows, щоб скопіювати його стиль. Тепер виберіть інший елемент і використовуйте Option + Command + V для Mac або Ctrl + Shift + V для Windows, щоб вставити стиль.
7. Вибір групи/розгрупування
Групування та розгрупування є однією з найважливіших частин будь-якого програмного забезпечення для проектування. Після додавання фігур, значків, тексту ви можете згрупувати їх, щоб легко переміщати або змінювати їх. Ви можете вибрати елементи та використовувати Command + G для Mac або Ctrl + G для Windows, щоб створити групу.
![Група фігма](/f/8015a39d9eba831e90bb945a1f160f18.jpg)
Щоб розгрупувати їх, використовуйте Command + Shift + G для Mac або Ctrl + Shift + G для Windows.
Також на Guiding Tech
8. Перемикач блокування та розблокування
Коли ви створюєте дизайн за допомогою занадто багато шарів і компонентів, полотно Figma може стати для вас досить зайнятим. У цих сценаріях вам не захочеться випадково перемістити будь-який значок, текст чи компонент. У таких випадках ви можете вибрати елемент і заблокувати його за допомогою Command + Shift + L для Mac або Ctrl + Shift + L для Windows.
![Замок фігма](/f/8ab19d7d0bf59f3b9b7a64f6e5be15dd.jpg)
Він представлений крихітним значком замка в меню «Шари». Щоб розблокувати, використовуйте ту саму комбінацію клавіш.
9. Створення компонентів
Компоненти є серцем і душею досвіду Figma. Ви можете повторно використовувати ті самі елементи в інтерфейсі дизайну. Прикладами можуть бути меню гамбургерів, меню нижньої панелі, кнопки тощо, які ви також хочете повторно використовувати для інших екранів.
![Компоненти фігма](/f/8bd9319a220b39a38e99d3d8ae962786.jpg)
Ви можете згрупувати піктограми та текст за допомогою інструмента «Групування», а потім використати Option + Command + K для Mac або Ctrl + Alt + K для Windows, щоб створити компонент. Тепер перейдіть до них із меню Компоненти (Перевірка № 4).
10. Показати бібліотеку команди
Чи знаєте ви, що Figma також називають Google Docs індустрії дизайну? Програмне забезпечення постачається з безперешкодними параметрами спільного доступу, які дозволяють додавати редакторів до команди.
![Бібліотека команд figma](/f/2e304fbae6246748cdb0d0dd5564957f.jpg)
Для великих проектів кожен член команди отримує окреме завдання на дизайн. Створюючи дизайн у групі, ви можете відвідати бібліотеку Team, яка складається із загальних компонентів та піктограм для учасників. Ви можете відкрити меню за допомогою Command + Option + O на Mac або Ctrl + Alt + O у Windows, щоб відкрити меню бібліотеки команд.
11. Експортний дизайн
Після завершення дизайну ви можете скористатися опцією експорту, щоб витягти значки та зображення з дизайну, щоб ви могли надіслати їх розробникам для їх реалізації. Ви можете вибрати шар і використати Command + Shift + E для Mac або Control + Shift + E для Windows, щоб експортувати деталі.
![Експорт фігма](/f/bd1b3346c442e505c417fa22ec205f2e.jpg)
Також на Guiding Tech
Використовуйте Figma як професіонал
Figma — чудовий інструмент для дизайнерів UI/UX. Він безкоштовний для початківців, дозволяє обмінюватися інформацією та має безліч комбінацій клавіш для забезпечення плавного робочого процесу. Застосуйте ці комбінації клавіш у своєму робочому процесі та створюйте гарний дизайн інтерфейсу, як професіонал.
Далі: Canva і Crello — два найкращі інструменти для створення плакатів і листівок. Прочитайте порівняння нижче, щоб знайти кращий вибір для вас.