Каждый раз новый сотрудник приходит к вам с одними и теми же вопросами по Фигме? Или впервые видите макет в Фигме и не знаете, куда нажимать?
Я – Катя Баринова, системный аналитик БФТ-Холдинга. Раньше я занималась прототипами интерфейсов и была тем самым человеком в компании, к которому постоянно приходили с вопросами по Фигме (отдельных дизайнеров в той компании не было). В итоге я даже вела онлайн-курс, где учила работать с инструментами. Взаимодействие на последнем проекте с дизайнером заставило меня задуматься о том, чем полезным я могу поделиться из своего опыта и опыта окружающих.
Мы посмотрим на Фигму глазами новичка и опытного дизайнера. Тем, кто только сталкивается с Фигмой, постараюсь помочь понять базовую логику работы с файлами, слоями, структурой и совместной работой. А продвинутые пользователи найдут здесь ответы на частые вопросы. Статья в первую очередь будет полезна аналитикам, тестировщикам и другим участникам процесса, которые работают с макетами.
Фигма глазами новичка: что самое сложное
Я спросила у коллег, с чем у них были сложности, когда они впервые открыли Фигму? Оказалось, что основные вопросы касались навигации и структуры макетов.
Часто задаваемые вопросы:
Как понять иерархию слоев?
Как не потерять элемент при перемещении?
Какие есть инструменты для быстрой навигации?
Самое важное — понимание панели слоев и концепции вложенности. Это база, на которой строится вся логика работы с макетом.
Новички часто путаются, как ориентироваться в глубоко вложенных группах и фреймах, а также как правильно перемещаться по макету, не нарушая структуру.
Основы интерфейса Фигмы для «не дизайнеров»
Как перемещаться по рабочей области (пространство в середине):
Зажать пробел + ЛКМ или зажать колесико мыши — позволяет свободно передвигать холст, не изменяя макет.
Использовать инструмент 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). Картинка попадёт в буфер обмена.
Фигма глазами дизайнера: как происходит обучение новичков
В нашей компании процесс обучения работе с Фигмой ориентирован на максимальное упрощение освоения инструмента для всех участников — дизайнеры не просто скидывают макеты, а помогают коллегам разобраться в них. Когда наступает время обсудить макет, дизайнер старается предвосхищать все вопросы новичков и заранее объясняет основные моменты.
Комментарий нашего дизайнера:
Обычно я замечаю, что людям неудобно что-то делать и советую, как лучше, это чаще всего горячие клавиши.
Иногда для команды, в частности для тестировщиков, проводятся встречи, где дизайнер устно объясняет и демонстрирует основные моменты с учетом потребностей команд.
Ответы на самые часто задаваемые вопросы помещаются в инструкцию по работе с Фигмой.
Для решения некоторых моментов также важна помощь человека, который объяснит и поддержит новичка — например, уже обученный сотрудник. Так, в команде аналитиков есть один аналитик, которого дизайнер обучил базовым навыкам работы в Фигме. Он умеет самостоятельно собирать макеты и прототипы, может помочь с вопросами по Фигме другим аналитикам из команды.
Такой подход к обучению помогает новичкам быстрее вникать и снижает нагрузку на дизайнеров: многие вопросы решаются еще на уровне инструкций и разъяснений.
Лучшие практики работы с Фигмой
Чтобы работать с Фигмой было удобно всем участникам, важно придерживаться нескольких правил:
Четкая структура файлов и слоев: понятные имена элементов, логичная вложенность и отсутствие «лишнего мусора» в макетах облегчают навигацию.
Комментарии внутри Фигмы: используйте возможность оставлять комментарии прямо в макете, чтобы быстро донести важные детали.
Горячие клавиши: изучите горячие клавиши — это экономит время и упрощает работу.
Обучающие материалы: создавайте инструкции и обучающие материалы для новичков.
Заключение
Фигма — удобный инструмент, который помогает дизайнерам, аналитикам, тестировщикам и разработчикам работать вместе в одном пространстве. Важно, чтобы команда помогала новичкам, делилась знаниями по работе с Фигмой.
Осваивайте ключевые инструменты и горячие клавиши, задавайте вопросы и активно делитесь знаниями с коллегами!