11 найкращих комбінацій клавіш Figma для Windows і Mac

Figma набирає обертів у просторі дизайну. Програмне забезпечення Sketch переважно домінує в індустрії дизайну UI/UX. Але останні пропозиції від Adobe (Adobe XD) і Figma з гнучким ціноутворенням, безперебійним обміном і міжплатформною доступністю змінюють рівняння для дизайнерів UI/UX.

Доступність Figma в Інтернеті, Windows і macOS у поєднанні з чудовим стартовим планом (3 проекти та 2 редактора) робить його ідеальним вибором для проектування, створення прототипу та оволодіння навичками дизайну інтерфейсу користувача. Компанія нещодавно представила довгоочікувану підтримку плагінів для нього. Якщо ви новачок у просторі дизайну UI/UX і починаєте свою подорож із Figma, то ви можете запам’ятати купу основних комбінацій клавіш Figma для Windows і Mac.

У цій публікації ми розглянемо одинадцять найкращих комбінацій клавіш Figma, які можна використовувати на ПК з Windows і Mac. Давайте розпочнемо.

Відвідайте Figma

1. Основні можливості масштабування

Ви не можете використовувати Figma або будь-яке програмне забезпечення для дизайну UI/UX, не освоївши комбінації клавіш Zoom. Це будуть найбільш використовувані комбінації клавіш під час вашого робочого процесу.

Для Windows і Mac можна використовувати Shift + 1, щоб розмістити шари на екрані. Shift + 2, щоб збільшити вибраний кадр (мій найбільш використовуваний комбінація клавіш, оскільки він дозволяє швидко переглядати деталі вибраного компонента), і Shift + 0, щоб збільшити 100%.

2. Показати/приховати лінійки та показати/приховати сітки макета

Зазвичай я не використовую лінійки в Figma, але якщо ви плануєте використовувати їх під час дизайну інтерфейсу користувача, ви можете використовувати комбінацію клавіш Shift + R на ПК або Mac, щоб показати/приховати лінійки.

Я постійно використовую сітки макетів. Він дозволяє розташовувати компоненти, значки на однаковій відстані, дозволяє організувати текст та інші елементи. Використовуйте комбінацію клавіш 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, щоб відкрити засіб вибору кольору. Наведіть засіб вибору кольору на зображення чи піктограму та скопіюйте код кольору з вибір кольору меню.

6. Копіювати/Вставити поточний стиль

Це справжня економія часу. Хочете швидко скопіювати поточний колір/дизайн компонента в інший текст чи піктограму? Ви можете вибрати поточний елемент і використовувати Option + Command + C для Mac або Ctrl + Shift + C для Windows, щоб скопіювати його стиль. Тепер виберіть інший елемент і використовуйте Option + Command + V для Mac або Ctrl + Shift + V для Windows, щоб вставити стиль.

7. Вибір групи/розгрупування

Групування та розгрупування є однією з найважливіших частин будь-якого програмного забезпечення для проектування. Після додавання фігур, значків, тексту ви можете згрупувати їх, щоб легко переміщати або змінювати їх. Ви можете вибрати елементи та використовувати Command + G для Mac або Ctrl + G для Windows, щоб створити групу.

Щоб розгрупувати їх, використовуйте Command + Shift + G для Mac або Ctrl + Shift + G для Windows.

Також на Guiding Tech

8. Перемикач блокування та розблокування

Коли ви створюєте дизайн за допомогою занадто багато шарів і компонентів, полотно Figma може стати для вас досить зайнятим. У цих сценаріях вам не захочеться випадково перемістити будь-який значок, текст чи компонент. У таких випадках ви можете вибрати елемент і заблокувати його за допомогою Command + Shift + L для Mac або Ctrl + Shift + L для Windows.

Він представлений крихітним значком замка в меню «Шари». Щоб розблокувати, використовуйте ту саму комбінацію клавіш.

9. Створення компонентів

Компоненти є серцем і душею досвіду Figma. Ви можете повторно використовувати ті самі елементи в інтерфейсі дизайну. Прикладами можуть бути меню гамбургерів, меню нижньої панелі, кнопки тощо, які ви також хочете повторно використовувати для інших екранів.

Ви можете згрупувати піктограми та текст за допомогою інструмента «Групування», а потім використати Option + Command + K для Mac або Ctrl + Alt + K для Windows, щоб створити компонент. Тепер перейдіть до них із меню Компоненти (Перевірка № 4).

10. Показати бібліотеку команди

Чи знаєте ви, що Figma також називають Google Docs індустрії дизайну? Програмне забезпечення постачається з безперешкодними параметрами спільного доступу, які дозволяють додавати редакторів до команди.

Для великих проектів кожен член команди отримує окреме завдання на дизайн. Створюючи дизайн у групі, ви можете відвідати бібліотеку Team, яка складається із загальних компонентів та піктограм для учасників. Ви можете відкрити меню за допомогою Command + Option + O на Mac або Ctrl + Alt + O у Windows, щоб відкрити меню бібліотеки команд.

11. Експортний дизайн

Після завершення дизайну ви можете скористатися опцією експорту, щоб витягти значки та зображення з дизайну, щоб ви могли надіслати їх розробникам для їх реалізації. Ви можете вибрати шар і використати Command + Shift + E для Mac або Control + Shift + E для Windows, щоб експортувати деталі.

Також на Guiding Tech

Використовуйте Figma як професіонал

Figma — чудовий інструмент для дизайнерів UI/UX. Він безкоштовний для початківців, дозволяє обмінюватися інформацією та має безліч комбінацій клавіш для забезпечення плавного робочого процесу. Застосуйте ці комбінації клавіш у своєму робочому процесі та створюйте гарний дизайн інтерфейсу, як професіонал.