Каждый раз новый сотрудник приходит к вам с одними и теми же вопросами по Фигме? Или впервые видите макет в Фигме и не знаете, куда нажимать?

Я – Катя Баринова, системный аналитик БФТ-Холдинга. Раньше я занималась прототипами интерфейсов и была тем самым человеком в компании, к которому постоянно приходили с вопросами по Фигме (отдельных дизайнеров в той компании не было). В итоге я даже вела онлайн-курс, где учила работать с инструментами. Взаимодействие на последнем проекте с дизайнером заставило меня задуматься о том, чем полезным я могу поделиться из своего опыта и опыта окружающих.

Мы посмотрим на Фигму глазами новичка и опытного дизайнера. Тем, кто только сталкивается с Фигмой, постараюсь помочь понять базовую логику работы с файлами, слоями, структурой и совместной работой. А продвинутые пользователи найдут здесь ответы на частые вопросы. Статья в первую очередь будет полезна аналитикам, тестировщикам и другим участникам процесса, которые работают с макетами.

Фигма глазами новичка: что самое сложное

Я спросила у коллег, с чем у них были сложности, когда они впервые открыли Фигму? Оказалось, что основные вопросы касались навигации и структуры макетов.

Часто задаваемые вопросы:

• Как понять иерархию слоев?

• Как не потерять элемент при перемещении?

• Какие есть инструменты для быстрой навигации?

Самое важное — понимание панели слоев и концепции вложенности. Это база, на которой строится вся логика работы с макетом.

Новички часто путаются, как ориентироваться в глубоко вложенных группах и фреймах, а также как правильно перемещаться по макету, не нарушая структуру.

Основы интерфейса Фигмы для «не дизайнеров»

Как перемещаться по рабочей области (пространство в середине):

• Зажать пробел + ЛКМ или зажать колесико мыши — позволяет свободно передвигать холст, не изменяя макет.

• Использовать инструмент Hand Tool (горячая клавиша H) — с ним можно передвигать холст зажимая ЛКМ.

• Зажать Ctrl и крутить колесико мыши — масштабирование относительно точки, где стоит курсор.

• Ctrl + +/ Crt + - — увеличить/уменьшить масштаб.

• Ctrl + 0 — вернуться к 100% масштабу.

Чтобы облегчить освоение Фигмы, важно понять, как устроена панель слоев (находится на панели слева):

• Панель слоев (Layers) — это список всех элементов в макете, упорядоченный в дерево. Каждый слой может быть простым элементом или группой, которая содержит вложенные объекты.

• Страницы (Pages) — на той же панели слева, где находятся слои, можно переключаться между страницами с макетами. Страниц может быть несколько. В Фигме страницы используются для удобной организации и структурирования большого проекта. Они представляют собой отдельные рабочие пространства внутри одного файла, где можно размещать разные экраны, варианты дизайна, состояния интерфейса или части проекта — например, мобильную версию на одной странице, а десктопную — на другой. Чтобы перемещаться между страницами можно использовать горячие клавиши PgUp и PgDn.

• Вложенность — значит, что один элемент находится внутри другого. Например, все иконки внутри одной группы.

• Группы и фреймы — базовые строительные блоки в Фигме. Фреймы часто используют как отдельные экраны или части макета, группы — для логической организации элементов. Разница между группой и фреймом существенна для дизайнера, но для новичков достаточно знать, что оба служат для удобной группировки слоев.

• Перемещение слоев — важно перемещать элементы так, чтобы они оставались на своих местах в структуре слоев. Порядок слоев на панели слева влияет и на их отображение на макете.

При наведении на объект в рабочей области (по середине) он подсвечивается голубым обрамлением и на панели слоев слева выделяется слой, на котором находится этот объект. Если нажать на слой или на объект, то он будет выбран и в рабочей области отобразится голубая рамка вокруг объекта.

Обратите внимание на порядок слоев на картинке ниже. Я выбрала белый круг (Elipse 1), который в списке Layers находится вторым. Над ним — слой с черным кругом, и мы видим, что в рабочей области черный круг перекрывает белый круг, находится как бы перед белым кругом.

Все слои, которые находятся выше в списке будут перекрывать слои, находящиеся ниже по списку. Это один из моментов Фигмы, который стоит запомнить.

На картинке ниже я переместила слой с белым кругом наверх (Elipse 1) и теперь белый круг перекрывает черный.

При наведении на группу или фрейм на панели слоев возле названия отображается стрелка. При нажатии стрелки можно свернуть или развернуть список вложенных слоев. Вложенность обозначается отступом у названия элементов. Также обратите внимание на значки, которыми обозначаются фреймы (решетка) и группы (пунктирный квадрат).

Несколько горячих клавиш, которые могут пригодиться при работе со слоями:

• Если вам нужно быстро добраться до какого‑то глубоко вложенного элемента (например, до иконки), зажмите клавишу Ctrl, наведите на контур элемента, чтобы он подсветился голубым и нажмите ЛКМ. На панели слева развернется вся иерархия слоев до выбранного, если до этого она была свернута.

• Ctrl + зажать ЛКМ и выделить область — можно выбрать сразу несколько вложенных слоев в выделенной области

• Alt + L — свернуть все слои в выбранном фрейме/группе

• Tab / Shift + Tab — переключение между слоями вперед/назад в активном фрейме или группе

• Enter — каждое нажатие «проваливается» глубже по иерархии слоев, выбирает дочерние элементы

• \ — противоположно предыдущему, выбирает родительский элемент для текущего выбранного элемента

• Ctrl + ] — переместить слой на один вперед в рамках фрейма/группы

• Ctrl + [ — переместить слой на один назад в рамках фрейма/группы

• [ — переместить слой на передний план (т. е. первым в группе/фрейме)

• ] — переместить слой на задний план (т. е. последним в группе/фрейме)

При совместной работе с макетом можно вести коммуникацию с коллегами прямо в Фигме. Для этого на нижней панели есть кнопка «Комментарий» (горячая клавиша C). Комментарий можно оставить, кликнув в нужное место или выделив область на макете. Также можно упомянуть коллег и приложить картинки. Уведомления о новых комментариях приходят на почту, привязанную к аккаунту.

Как экспортировать макет:

• Выберите фрейм, группу или слой. Можно выбрать сразу несколько фреймов, тогда они экспортируются каждый в отдельном файле/картинке.

• На правой панели в самом низу в разделе Export нажмите +.

• В первом окошке выбирается множитель для размера изображения, во втором — в каком формате нужно экспортировать выбранный слой (PNG, JPEG, SVG, PDF). При нажатии на три точки можно настроить доп. параметры для экспорта.

• Если нажать ещё раз + можно задать ещё один вариант экспорта.

• Нажмите кнопку Export ниже, чтобы сохранить файлы.

Для быстрой вставки макета в документ или в чат коллеге, можно нажать на любой слой ПКМ и выбрать пункт Copy/Paste As → Copy as PNG (горячие клавиши Ctrl+Shift+C). Картинка попадёт в буфер обмена.

Фигма глазами дизайнера: как происходит обучение новичков

В нашей компании процесс обучения работе с Фигмой ориентирован на максимальное упрощение освоения инструмента для всех участников — дизайнеры не просто скидывают макеты, а помогают коллегам разобраться в них. Когда наступает время обсудить макет, дизайнер старается предвосхищать все вопросы новичков и заранее объясняет основные моменты.

Комментарий нашего дизайнера:

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

Иногда для команды, в частности для тестировщиков, проводятся встречи, где дизайнер устно объясняет и демонстрирует основные моменты с учетом потребностей команд.

Ответы на самые часто задаваемые вопросы помещаются в инструкцию по работе с Фигмой.

Для решения некоторых моментов также важна помощь человека, который объяснит и поддержит новичка — например, уже обученный сотрудник. Так, в команде аналитиков есть один аналитик, которого дизайнер обучил базовым навыкам работы в Фигме. Он умеет самостоятельно собирать макеты и прототипы, может помочь с вопросами по Фигме другим аналитикам из команды.

Такой подход к обучению помогает новичкам быстрее вникать и снижает нагрузку на дизайнеров: многие вопросы решаются еще на уровне инструкций и разъяснений.

Лучшие практики работы с Фигмой

Чтобы работать с Фигмой было удобно всем участникам, важно придерживаться нескольких правил:

• Четкая структура файлов и слоев: понятные имена элементов, логичная вложенность и отсутствие «лишнего мусора» в макетах облегчают навигацию.

• Комментарии внутри Фигмы: используйте возможность оставлять комментарии прямо в макете, чтобы быстро донести важные детали.

• Горячие клавиши: изучите горячие клавиши — это экономит время и упрощает работу.

• Обучающие материалы: создавайте инструкции и обучающие материалы для новичков.

Заключение

Фигма — удобный инструмент, который помогает дизайнерам, аналитикам, тестировщикам и разработчикам работать вместе в одном пространстве. Важно, чтобы команда помогала новичкам, делилась знаниями по работе с Фигмой.

Осваивайте ключевые инструменты и горячие клавиши, задавайте вопросы и активно делитесь знаниями с коллегами!