Шпаргалка по Figma: горячие клавиши и плагины для прокачки эффективности

Взято из открытых источников.

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

Этот графический редактор перестал быть просто инструментом для рисования интерфейсов, а стал удобной и функциональной платформой для визуальной совместной работы. Поэтому её можно адаптировать под самые разные задачи, где требуется визуализация, прототипирование и командная работа.

Если кратко, то Figma используется везде, где нужно придумать, нарисовать, объяснить и обсудить что-либо визуальное, особенно в digital-сфере.

Профессии в которых используется графический редактор Figma

Основные профессии (для которых Figma и создавалась)

UI/UX-дизайнеры

Это главные пользователи Figma. Они используют ее для:

1. Создания макетов сайтов и приложений: проектирование интерфейсов, кнопок, меню, форм и всего, что видит пользователь.
2. Разработки пользовательских сценариев: проектирование путей, по которым пользователь движется в продукте.
3. Создания интерактивных прототипов: добавление анимаций и переходов между экранами, чтобы показать, как приложение будет работать.
4. Дизайн-систем и UI-китов: создание библиотек компонентов (кнопок, полей ввода и т.д.) для обеспечения единообразия стиля в больших проектах.

Продуктовый дизайнеры (Product Designer)

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

Веб-дизайнеры

Часто сосредоточены именно на дизайне веб-сайтов. Для них Figma — основной инструмент создания макетов главных страниц, лендингов, внутренних страниц и адаптивных версий для разных устройств.

Смежные digital-профессии, которые тесно сотрудничают с дизайнерами

Frontend-разработчики

Они не создает дизайн в Figma, но активно её использует для:

1. Визуализации макетов, чтобы точно перенести дизайн в код.
2. Работы с режимом «Inspect»: просмотр точных отступов (padding, margin), размеров, свойств шрифтов, стилей теней и получения CSS-кода.
3. Экспорта ресурсов: выгрузки иконок, изображений и других графических элементов прямо из макета.

Гейм-дизайнеры

Сейчас всё чаще использует Figma для решения следующих задач:

1. Прототипирования интерфейсов игр (GUI): дизайн меню, HUD-элементов (здоровье, боеприпасы), экранов загрузки, диалоговых окон.
2. Создания макетов для мобильных игр.
3. Визуализации игровой механики: схемы и логики работы некоторых внутриигровых систем.

Маркетологи / Директора по продукту (Product Manager)

Используют этот графический редактор как инструмент коммуникации для следующих целей:

1. Создание презентаций и стратегий: визуальное оформление гипотез, стратегий продвижения, customer journey map (карт путешествия пользователя).
2. Создание прототипов для тестирования гипотез: например, когда нужно быстро "запилить" макет новой фичи, чтобы показать команде или протестировать на фокус-группе.
3. Комментирование и оставление правок прямо на макетах дизайнеров.

Профессии, которые используют Figma не по прямому назначению

Графические дизайнеры — хотя Figma не заменяет Adobe Illustrator или Photoshop для сложной полиграфии, её удобно использовать для:

1. Дизайна презентаций (для сайтов типа Pitch.com или Canva).
2. Создания инфографики.
3. Быстрого мокапа (например, как будет выглядеть логотип на визитке или футболке).
4. Верстки простых буклетов или листовок.

Менеджеры проектов / Team Lead — используют Figma для:

1. Визуального планирования: создания дорожных карт (Roadmaps), диаграмм Ганта, схем процессов и организационных структур.
2. Проведения митингов и воркшопов: Figma с её режимом "миттингов" и возможностью совместного редактирования в реальном времени отлично подходит для мозговых штурмов и построения ментальных карт.

Контент-менеджеры / Копирайтеры — часто работают в Figma, чтобы:

1. Размещать и редактировать тексты прямо в макетах, видя, как контент вписывается в интерфейс.
2. Создавать прототипы для статей с сложной структурой или интерактивными элементами.

Преподаватели — могут использовать Figma для создания:

1. Интерактивных учебных материалов, плакатов, схем и презентаций.
2. Организации групповой работы студентов над проектами.

Читайте наши статьи:

1. Школа дизайна НИУ ВШЭ - любая дизайнерская профессия на выбор+ диплом Высшей Школы Экономики.
2. Старт в дизайне с нуля и до уровня PRO. Весь алгоритм действий уже придумали за вас.
3. Сontented - обзор топовой школы дизайна.

Горячие клавиши — язык виртуозов Figma

Взято из открытых источников.

Запомните: мышь — это тактильность и точность, а клавиатура — скорость и поток. Сочетания клавиш устраняют лишние клики, позволяя вам оставаться в состоянии творческого потока.

Мы разделили шорткаты по логическим группам для лучшего запоминания. Можете забрать эту статью в закладки или выписать нужные горячие клавиши на отдельный листок. Со временем вы их запомните и надобность в шпаргалках исчезнет.

Также, на OZON или WB можно купить большой коврик для мышки на котором будут все необходимые горячие клавиши Figma. Очень полезная штука для тех, кто соприкасается с этим редактором ежедневно.

Навигация и обзор (Основа основ)

1. Space + Drag — Рука (H). Панорамирование холста. Это первое, что должен запомнить каждый.
2. Shift + 1 / 2 — Приблизить к выделенному / Вписать все в окно. Ваш главный инструмент для быстрого перемещения между макросами и микробами дизайна.
3. Z + Click / Drag — Увеличить область. Z + Alt + Click — уменьшить.
4. ⌘Cmd + \ (Mac) / Ctrl + \ (Win) — Показать/скрыть интерфейс. Идеально для чистого просмотра макета.

Выделение и работа с объектами (Создание иерархии)

1. V — Выбрать (Cursor). Стандартный режим.
2. K — Масштабирование (Scale). Новый и невероятно полезный инструмент для быстрого трансформирования.
3. R — Прямоугольник (Rectangle).
4. O — Эллипс (Oval).
5. T — Текст (Text).
6. L — Линия (Line).
7. F — Фрейм (Frame). Основа основ в Figma.
8. P — Перо (Pen). Для векторного рисования.
9. ⌘Cmd + D (Mac) / Ctrl + D (Win) — Дублировать (Duplicate). Копирует и сразу вставляет объект со смещением.
10. ⌘Cmd + G / ⌘Cmd + Shift + G (Mac) — Сгруппировать / Разгруппировать. Ctrl для Win.
11. ⌘Cmd + R (Mac) / Ctrl + R (Win) — Переименовать выделенный слой. Привычка переименовывать слои — признак профессионала.

Выравнивание и распределение (Стремление к порядку)

1. ⌥Option + A (Mac) / Alt + A (Win) — Выровнять по горизонтали.
2. ⌥Option + V (Mac) / Alt + V (Win) — Выровнять по вертикали.
3. ⌥Option + H (Mac) / Alt + H (Win) — Распределить по горизонтали.
4. ⌥Option + W (Mac) / Alt + W (Win) — Распределить по вертикали.
5. ⌘Cmd + Shift + H / V (Mac) — Переключить ориентацию оси (Horizontal/Vertical). Ctrl для Win.

Работа с текстом (Типографика — это искусство)

1. ⌘Cmd + B / I (Mac) — Жирный / Курсив. Ctrl для Win.
2. ⌘Cmd + Shift + X (Mac) / Ctrl + Shift + X (Win) — Добавить подчеркивание.
3. ⌘Cmd + Option + S (Mac) / Ctrl + Alt + S (Win) — Добавить зачеркивание.
4. ⌘Cmd + Shift + { / } (Mac) — Выравнивание по левому / правому краю. Ctrl для Win.
5. ⌘Cmd + Shift + | (Mac) / Ctrl + Shift + | (Win) — Выравнивание по центру.

Модальные клавиши (Временные изменения)

Зажмите клавишу на время действия:

1. Shift — Ограничение пропорций при масштабировании, ограничение оси при перемещении.
2. Alt — Создать копию при перетаскивании объекта, измерить расстояние до соседних объектов (в режиме выбора).
3. ⌘Cmd (Mac) / Ctrl (Win) — Временно активировать инструмент "Выбор" при работе с другими инструментами (например, Пером).

Профессиональный совет: Не пытайтесь выучить все сразу. Выберите 3-5 шорткатов, которые вы используете чаще всего, и начните с них. Постепенно мышечная память сделает свое дело.

Плагины — суперсила вашего рабочего процесса

Взято из открытых источников.

Плагины — это то, что превращает хорошего дизайнера в эффективного. Они автоматизируют рутину, расширяют функционал и решают узкоспециализированные задачи.

Для автоматизации и контента (Избавьтесь от рутины)

1. Content Reel / Unsplash: Больше не тратьте время на поиск репрезентативных изображений и текста. Заполняйте прототипы реалистичными данными в два клика.
2. Rename It: Массовое переименование слоев по заданным правилам. Must-have для чистых и понятных файлов, особенно при передаче разработчикам.
3. Auto Layoutinator: Волшебным образом применяет Auto Layout к хаотично расположенным слоям. Спасение при работе с legacy-макетами.

Для иконок и иллюстраций (Визуальная выразительность)

1. Iconify: Интеграция с десятками наборов иконок (Material, Tabler, Feather и др.). Поиск, вставка, изменение цвета — прямо в Figma.
2. Blush: Создавайте уникальные, кастомизируемые иллюстрации в одном стиле. Отлично для оформления презентаций и гер-секций.

Для дизайн-систем и UI (Проектирование системно)

1. Contrast: Мгновенно проверяйте контрастность текста относительно фона по стандартам WCAG. Неопровержимый аргумент в спорах с менеджерами о доступности.
2. Find and Replace: Как в текстовом редакторе, но для вашего файла Figma. Меняйте шрифты, цвета, слова во всех фреймах сразу.
3. Angle: Накладывайте красивые мокипы на устройства под разными углами. Финальный штрих для презентации работы клиенту.

Для прототипирования и передачи разработчикам (Бесшовная коллаборация)

1. Figmotion: Мощный, но простой инструмент для создания CSS-анимаций прямо внутри Figma. Позволяет ожидать интерфейсы без переключения в сторонние программы.
2. Pixel Perfect: Проверяйте, чтобы каждый пиксель вашего интерфейса был выровнен и четок. Для перфекционистов.

Как интегрировать плагины в workflow?

1. Аудит рутины: выпишите 3 самых наиболее повторяющихся действия, которые вы всегда делаете вручную (например, подбор картинок, переименование, проверка контраста).
2. Поиск решения: зайдите в меню плагинов (Community > Plugins) и поищите по ключевым словам.
3. Установите и испытайте: установите 1-2 плагина и намеренно используйте их в течение недели. Если не понравилось — удаляйте.

Заключение: От знания к мастерству

Само по себе знание горячих клавиш и списка плагинов не сделает вас лучше. Ключ — в осознанном внедрении.

1. Начните с малого. Выберите одну группу шорткатов (например, навигацию) и 1-2 плагина.
2. Практикуйте до автоматизма. Сначала будет неудобно, но через 3-5 раз вы забудете, как делали это мышью.
3. Кастомизируйте. Figma позволяет назначать собственные горячие клавиши для плагинов (Settings > Keyboard Shortcuts). Создайте свой уникальный набор команд.

Сочетание скорости от клавиатуры и мощи от плагинов не просто экономит минуты. Оно меняет сам способ вашего мышления, позволяя вам сосредоточиться на решении проблем и творчестве, а не на механических действиях.

Превратите свой процесс из последовательности кликов в непрерывный поток создания и вы сильно прибавите как специалист!

Понравилась статья? Ставьте лайк и подписывайтесь на наш канал и телеграмм, в котором мы публикуем анонсы новых курсов, новости, акции и скидки на обучении более чем 50 российских онлайн-школ и вы всегда будете в курсе того, что происходит на российском рынке онлайн-образования!