11 лучших сочетаний клавиш Figma для Windows и Mac

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

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

В этом посте мы рассмотрим одиннадцать лучших сочетаний клавиш Figma, которые вы можете использовать на ПК с Windows и Mac. Давайте начнем.

Посетить Фигму

1. Основные возможности масштабирования

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

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

2. Показать / скрыть линейки и показать / скрыть сетки макета

Обычно я не использую линейки в Figma, но если вы планируете использовать их во время разработки пользовательского интерфейса, вы можете использовать сочетание клавиш Shift + R на ПК или Mac, чтобы показать / скрыть линейки.

Я все время использую Layout Grids. Он позволяет расположить компоненты, значки на одинаковом расстоянии, позволяет организовать текст и другие элементы. Используйте сочетание клавиш Control + G на Mac, чтобы показать / скрыть сетки макета.

Также на Guiding Tech

3. Инструмент "Перо", "Перемещение" и "Текст"

Figma предлагает мощный и настраиваемый инструмент Pen. Вы поймете, что я имею в виду, после того, как поиграете с ним несколько минут. В процессе проектирования вы будете довольно часто использовать эти три инструмента.

Вы всегда можете выбрать их в верхнем меню или использовать нажатие клавиши P для пера, V для перемещения и T для инструмента текста в Windows и Mac.

4. Перемещение между слоями и компонентами

Эти два сочетания клавиш очень удобны, когда вы работаете над дизайнерским проектом со слишком большим количеством слоев и компонентов. Вам может потребоваться постоянно перемещаться между ними. Вы можете использовать Option + 1 для Mac или Alt + 1 для Windows, чтобы перейти на панель слоев. Затем используйте Option + 2 для Mac или Alt + 2 для Windows, чтобы перейти в меню «Компоненты».

5. Открыть палитру цветов

Эта функция полезна, когда вы хотите извлечь цвет из изображения, значка или любого другого компонента. Вы можете использовать сочетание клавиш «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 в индустрии дизайна? Программное обеспечение поставляется с возможностью беспрепятственного обмена, что позволяет добавлять редакторов в команду.

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

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

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

Также на Guiding Tech

Используйте Figma как профессионал

Figma - отличный инструмент для дизайнеров UI / UX. Это бесплатно для новичков, позволяет делиться файлами и поставляется с множеством сочетаний клавиш, обеспечивающих бесперебойный рабочий процесс. Внедрите эти сочетания клавиш в свой рабочий процесс и создавайте красивый дизайн пользовательского интерфейса, как профессионал.