Figma для заказчика сайта: что нужно знать

Что такое Figma и почему она стала стандартом в веб-дизайне

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

Внутри Figma каждый экран или страница сайта лежит отдельным артбордом, а дизайнеры собирают из них целые библиотеки компонентов. Заказчику это даёт простое преимущество: можно переключаться между состояниями кнопок, мобильной и десктопной версией, не дёргая исполнителя вопросами «а как это будет выглядеть на телефоне». Главная фишка инструмента — совместный доступ в реальном времени. Вы видите курсоры дизайнеров, а они видят ваши правки в комментариях, что сокращает цикл согласования с недели до одного дня. Именно за эту скорость команды и выбирают Figma, а заказчикам она достаётся как бесплатный бонус к прозрачному процессу работы.

Как заказчику смотреть макеты в Figma: режимы и элементы управления

Открыть макет по ссылке просто: Figma работает в браузере, регистрация не требуется, если владелец файла включил доступ для просмотра. Интерфейс для заказчика намеренно упрощён, но пара моментов сбивает с толку. Слева видите панель страниц (там могут лежать разные версии: десктоп, мобильная, состояния кнопок), а в правом нижнем углу иконки зума и кнопка «Present». Режим презентации скрывает всю служебную обвязку и показывает макет на весь экран, это удобно для первого знакомства или созвона с дизайнером. Для быстрой навигации зажмите пробел и тяните холст мышью, либо используйте колесо мыши с зажатой клавишей Ctrl для масштабирования.

Комментарии оставлять проще, чем кажется: выберите инструмент «Comment» на верхней панели (иконка с облачком), кликните в нужное место макета и пишите текст. Автор файла получит уведомление и сможет ответить прямо в ветке, так все правки фиксируются в одном месте, а не теряются в переписке. Если дизайнер просит проверить конкретный экран, попросите его дать прямую ссылку на этот фрейм, а не на весь файл.

Прежде чем переходить к деталям, запомните базовые элементы управления, которые пригодятся на каждом созвоне. Иконка руки на верхней панели включает режим перемещения по холсту без случайного выделения объектов, а кнопка «Present» в правом верхнем углу открывает макет на весь экран без служебных панелей. Панель справа показывает размеры фрейма, отступы и цвета выбранного элемента, если кликнуть по нему. Список страниц слева позволяет переключаться между десктопом, мобильной версией и состояниями кнопок. Клавиша «Z» временно включает лупу для приближения нужного участка макета.

Вот что стоит проверить в первую очередь, когда открыли макет:

• Режим «Present» в правом верхнем углу скрывает панели и показывает макет как готовый экран.
• Инструмент «Comment» на верхней панели оставляет замечания прямо на макете, дизайнер увидит их сразу.
• Колесо мыши с зажатой клавишей Ctrl приближает нужный участок без потери контекста.
• Панель справа при клике на элемент показывает его размеры, отступы и цвета.
• Список страниц слева переключает между десктопом, мобильной версией и состояниями кнопок.

В Figma для заказчика сайта стоит освоить минимум. Включите сетку через иконку «Layout Grid» на панели справа, чтобы оценить выравнивание блоков. Проверьте состояние «наведение» для кнопок, обычно оно лежит на отдельной странице в файле. Используйте горячую клавишу «F», чтобы быстро вернуться к началу макета после прокрутки. Сравните мобильную и десктопную версии, переключаясь между страницами в левой панели. Если нужно отправить макет коллеге без доступа, скачайте файл в PNG через меню «Export». Для оценки поведения пользователей на готовом сайте уже после вёрстки полезно смотреть тепловую карту сайта, она покажет, куда реально кликают посетители, в отличие от макета, где всё выглядит идеально.

Какие элементы макета нужно проверять заказчику

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

Отдельно обратите внимание на состояния элементов: hover, active, disabled, ошибки ввода. Если их нет в макете, разработчик придумает их сам, и результат может не совпасть с ожиданиями. Figma позволяет создавать несколько вариантов дизайна, и заказчику полезно знать, что выбор лучшего варианта можно обосновать данными, а не вкусом, например через A/B тестирование. Это сэкономит время на согласованиях и переделках.

Практический чек-лист: как принимать макет в Figma

Начинайте с просмотра структуры файла: в Figma слева вы увидите список страниц и фреймов. Мы в Cinar обычно прикладываем к макету пояснительную записку, где описана логика каждого экрана, так что первым делом откройте её и сверьте с техническим заданием. Если в ТЗ заявлен блок «Преимущества» в три пункта, а в макете их пять, это сразу повод для вопроса, а не для молчаливого согласия.

Дальше проходите по каждому фрейму сверху вниз и оставляйте комментарии прямо на макете, привязывая их к конкретным элементам. Не пишите общими фразами вроде «что-то не так», а указывайте точку: «здесь кнопка сливается с фоном». И обязательно отвечайте на вопросы дизайнера, если он их оставил, иначе процесс застрянет на неделю. Помните, что главная страница решает, останется ли пользователь на сайте, поэтому её проверке уделите особое внимание, а рекомендации по структуре есть в нашем материале про удержание посетителя на главной странице.

Частые ошибки заказчиков при работе с Figma и как их избежать

Самая частая ошибка, с которой мы сталкиваемся в работе, это правка текстов прямо в Figma. Заказчик открывает макет, находит опечатку или хочет заменить формулировку и просто редактирует слой с текстом. Кажется, что это удобно, но на деле создаёт хаос: дизайнер видит изменения, вносит их в свою версию, а разработчик в это время собирает сайт по старому макету и не понимает, где истина. В итоге правки теряются, сроки сдвигаются, а нервные клетки не восстанавливаются. Если текст нужно поправить, фиксируйте это отдельным комментарием к фрейму, а не меняйте сам макет. Для разработчика Figma это лишь исходник, а не техническое задание, и любые изменения в нём должны проходить через согласованный процесс.

Вторая типичная проблема связана с игнорированием мобильной версии. Заказчик смотрит только десктопный макет, утверждает его, а потом удивляется, почему на телефоне шапка выглядит иначе или кнопка не помещается на экран. Адаптив это не уменьшенная копия десктопа, это отдельная логика расположения блоков, и проверять её нужно на соответствующих фреймах в Figma. Мы обычно просим клиентов открывать вкладку с мобильной версией и буквально «проходить» пальцем по экрану, представляя, как пользователь листает сайт. Иначе вы рискуете получить сайт, который идеально выглядит на мониторе, но теряет половину функционала на смартфоне, а это прямой путь к потере трафика и заявок.

Figma, Sketch или Photoshop: что выбрать для проекта

Разбирая макеты в Figma, многие заказчики спрашивают, почему мы не используем Sketch или Photoshop. Ответ простой: для веб-дизайна Figma удобнее почти во всём. Она работает в браузере, поэтому не нужно ничего устанавливать, а все правки дизайнер вносит в реальном времени. Вы открываете ссылку и видите актуальную версию, а не файл, который вам прислали по почте два дня назад. Плюс автоматические стили и компоненты в Figma снижают риск того, что в макете появятся «поехавшие» отступы или шрифты, что особенно критично при приёмке адаптива.

Но честно скажу: есть случаи, когда от Figma стоит отказаться. Sketch остаётся оправданным, если вся команда заказчика сидит на Mac и нужны тяжёлые плагины для сложной векторной графики, которых в Figma пока нет. Photoshop тоже имеет смысл, когда проект почти не касается вёрстки: например, рисуем баннеры для полиграфии или сложный фотоарт. Для интерфейсов он избыточен и медленнее в совместной работе. На практике мы обычно предлагаем Figma, но если у вас есть устоявшийся пайплайн в другом инструменте, ломать его не нужно, главное, чтобы итоговый макет был передан в понятном виде.

Как Figma помогает на этапе разработки сайта

Когда макет попадает к разработчику, Figma превращается из инструмента для просмотра в техническое задание. Из неё верстальщик берёт не просто картинку, а точные параметры: размеры блоков, шрифты, отступы, радиусы скруглений, цвета. В отличие от Photoshop, где всё приходится «снимать» пипеткой и прикидывать на глаз, здесь значения доступны сразу. Это снижает количество вопросов в духе «а какой тут отступ?» и уменьшает риск того, что вёрстка разъедется относительно задумки дизайнера.

Скорость разработки напрямую зависит от того, насколько аккуратно собран макет. Если заказчик в процессе согласования вносил правки хаотично, а элементы на разных страницах называются по-разному, разработчику придётся тратить время на анализ и догадки. В реальности это выливается в дополнительные часы работы и, как следствие, в рост сметы. Вот что конкретно берёт разработчик из Figma и как это влияет на бюджет:

• Размеры и координаты элементов, чтобы не высчитывать их вручную в DevTools.
• Стили текста: кегль, межстрочный интервал и начертание для точного переноса в CSS.
• Отступы и сетку, что ускоряет адаптивную вёрстку под разные разрешения экранов.
• SVG-иконки и изображения, которые выгружаются напрямую, без пересылки в мессенджерах.
• Состояния кнопок (hover, active), чтобы не переделывать интерактив после первой проверки.
• Комментарии и заметки дизайнера, которые объясняют логику поведения сложных блоков.

Когда в Figma есть порядок, а все правки зафиксированы, команда работает быстрее. Мы в Cinar часто видим, как грамотно подготовленный макет сокращает этап вёрстки на 20–30% процентов. Это не магия, а просто отсутствие лишних итераций: разработчик не переспрашивает, заказчик не переделывает. Понятный макет экономит деньги обеих сторон, потому что правки после старта вёрстки всегда дороже, чем согласования до неё.

Сколько стоит работа в Figma и как это влияет на бюджет сайта

Figma для заказчика действительно бесплатна, и это часто вызывает недоумение: почему инструмент доступен всем, а работа дизайнера стоит денег? Всё просто: лицензия на Figma закрывает техническую часть, но не заменяет квалификацию. Дизайнер платит за опыт, скорость и умение принимать решения, а Figma лишь ускоряет процесс. Вы платите не за доступ к программе, а за часы, которые специалист тратит на анализ задач, проработку пользовательских сценариев и доводку каждого экрана до состояния, готового к вёрстке.

На стоимость макета влияет не столько сам инструмент, сколько объём работы: количество уникальных страниц, сложность интерактивных элементов и число итераций. Проект из пяти типовых страниц с типовыми блоками обойдётся заметно дешевле, чем интернет-магазин с каталогом, фильтрами и личным кабинетом. Также учитывайте, что правки после согласования обычно входят в фиксированную цену, а вот изменения «по ходу дела» часто тарифицируются отдельно. Мы в Cinar обычно фиксируем объём итераций на старте, чтобы бюджет оставался предсказуемым, и советуем заказчикам заранее собирать все пожелания по макету, а не добавлять их порциями.

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

Максим Ахтямов

Заместитель руководителя отдела разработки

Подписаться на ТГ