Сайт в Figma — это макет, а не работающий сайт. Он становится рабочим после верстки в код или публикации через Figma Sites (вторая подходит только для простых промо-страниц). Макет готов к верстке, если в нем есть автолейауты, переменные цветов и отступов, компоненты с состояниями, три ширины 360, 768 и 1440 px, собранные шрифты и открытый Dev Mode.
Разработчик смотрит на файл со своей стороны: возьмет он его в работу без переделок или начнет задавать вопросы про отступы и цвета. Если ответов на эти вопросы в файле нет, макет вернется на доработку, а смета на верстку вырастет.
Как из макета в Figma получить сайт
У файла Figma три пути к живой странице. Первый — верстка разработчиком по макету и спецификации. Второй — публикация через Figma Sites. Третий — перенос в конструктор или генерация кода с ручной доводкой.
Выбор зависит от задачи. Если нужна форма заявок с интеграцией CRM, оплата, SEO-настройки и много страниц, путь один — верстка в код. Если нужна короткая промо-страница, хватит Sites. Конструктор или генерация кода подходят простой странице, когда рядом есть человек, готовый довести код руками.
Чем макет отличается от сайта
Макет — картинка со спецификацией. В нем нет кода, адреса, рабочих форм и индексации в поиске. Кнопка «Оставить заявку» никуда не ведет, пока ее не свяжут с обработчиком на бэкенде. Поисковик такую страницу не увидит, а заявка с нее никуда не придет.
Красивый прототип с переходами между экранами все еще не сайт: переходы имитируют навигацию внутри Figma, а не работу настоящих страниц с адресами.
Что умеет Figma Sites и где ее предел
Figma Sites превращает фреймы в страницы сайта. Сначала он живет на адресе figma.site, позже вместо него можно подключить свой домен — один собственный домен на один сайт. Для публикации нужен платный план и Full seat, то есть место с полными правами редактора. Сервис вышел в открытой бете на Config 2025: работают базовые переходы и анимации, обновление и снятие с публикации.
Публикация проходит по шагам:
- •подготовить фреймы-страницы;
- •назначить их страницами сайта;
- •проверить навигацию и ссылки;
- •задать название, описание и фавикон;
- •нажать Publish.
Что сделать сейчас: выписать функции будущего сайта и отметить, какие из них Sites не закроет.
Почему коммерческому проекту этого мало
Сложная логика, интеграции с CRM и оплатой, много страниц и детальные элементы замедляют работу сервиса, а бета-статус значит, что возможности еще меняются.
Если сайт должен продавать и собирать заявки в систему, Sites оставляют под тест гипотезы или промо, а не под основной сайт компании.
Как подготовить файл Figma к верстке
На каждом блоке включают Auto Layout (Shift+A): отступы задаются числом, а не на глаз, и верстальщик видит flex-логику. Цвета и отступы выносят в переменные — Primary, Accent, Background, Text, шаг 4 или 8 px — вместо разовых HEX.
Страницы файла: Cover, Components, Desktop, Tablet, Mobile, Prototype. Слои называют по смыслу: Button_Submit и Hero, а не Rectangle 144.
Допустим, собираем первый экран. Заголовок, подзаголовок и кнопку объединяют в вертикальный Auto Layout, рядом кладут картинку, обе части помещают в горизонтальный фрейм Hero. Отступы берут из переменных, кнопку ставят экземпляром компонента.
Если одинаковые кнопки нарисованы вручную по нескольку раз, их пора собрать в компонент. Что сделать сейчас: выделить любой блок — нет справа Auto Layout, начать с него.
Компоненты с состояниями
Кнопка — в вариантах Default, Hover, Pressed, Disabled, поле ввода — с label, placeholder, фокусом и ошибкой, карточка — из картинки, заголовка, текста и ссылки.
Компонент создают через Ctrl+Alt+K, затем добавляют набор вариантов и свойство «Состояние». Правка мастер-кнопки обновляет все ее копии, хоть их двадцать.
Какие ширины макета нужны разработчику
Одного фрейма мало: разработчику нужны три ширины — 360 px для mobile, 768 px для tablet и 1440 px для desktop. Высоту фрейма не фиксируют, она растет по контенту.
Если аудитория в основном с телефонов, дизайн начинают с 360 px. Кнопки делают такой высоты, чтобы по ним уверенно попадал палец, а текст проверяют в масштабе 100%.
Что делать между ширинами
Промежуточные ширины между планшетом и десктопом отдельными фреймами не рисуют. В комментарии к фрейму записывают правило: что тянется, что фиксировано, где блок из двух колонок перестраивается в одну и когда меню уходит в бургер.
Допустим, в комментарии написано: «ниже десктопной ширины карточки в один столбец, кнопка на всю ширину». Разработчик получает логику, а точку перелома ставит сам в CSS.
Проверка простая: растянуть фрейм с автолейаутом и посмотреть, не разваливается ли блок.
Как передать макет через Dev Mode
Dev Mode отдает разработчику размеры, отступы, CSS-свойства, HEX и RGB, а также переменные — без звонков и переписки с вопросами «а какой тут отступ».
Экспорт ассетов готовят заранее: SVG для иконок, WebP, PNG или JPG для фото, и сразу помечают нужные слои для выгрузки, а не ищут их в последний момент.
Если разработчик раз за разом спрашивает про базовые размеры и отступы, файл передан сырым, и дело не в его квалификации. Что сделать сейчас: пометить готовые фреймы как Ready for dev.
Шрифты, лицензии и анимации
Шрифты собирают в отдельную папку и проверяют лицензию именно на веб-использование: десктопная версия шрифта не всегда разрешает подключение на сайте, и это выясняется обычно уже после верстки.
Поведение и анимации описывают текстом в комментариях к фрейму: сколько длится переход, что происходит при наведении на кнопку, при открытии меню, при отправке формы.
Допустим, дизайнер прикладывает скриншот раскрытой формы и пишет в комментарии, в какой момент под полем появляется ошибка. Разработчик делает это с первого раза, не переспрашивая. Спорные места обсуждают через Comment в файле, а не в мессенджере — там решение не потеряется.
Чек-лист приемки макета перед оплатой верстки
Перед сметой пройдитесь по 14 пунктам:
Если не выполнено сразу несколько пунктов, файл возвращают дизайнеру до сметы.
Как проверить без навыков дизайнера
Кликните кнопку и посмотрите, есть ли у нее варианты. Откройте панель слоев и поищите Rectangle и Frame с номерами — такие имена значат, что файл к передаче не готовили. Растяните блок с текстом: если он ломается, автолейаута нет. Откройте макет по ссылке в Dev Mode — если спецификаций не видно, доступ не выдан.
Почему кривой макет дорожает в верстке
Смета верстки складывается из числа уникальных блоков, ширин, состояний, анимаций и интеграций. Каждый непроработанный пункт добавляет часы: без мобильной версии разработчик додумывает раскладку сам и закладывает время на догадки, без компонентов одну и ту же кнопку верстают заново в каждом блоке, без описанных состояний правки идут по кругу.
Допустим, на одинаковых карточках отступы гуляют: где-то 22 px, где-то 24, где-то 25. Верстальщик либо уточняет каждую, либо унифицирует на свой вкус, и вид расходится с макетом.
Если те же карточки собраны компонентом с переменной отступа, значение меняется в одном месте, и все карточки выравниваются разом.
Когда дешевле доработать файл
Если макет не проходит чек-лист приемки, доработка файла дизайнером обычно дешевле часов разработчика на догадки и переделки после старта верстки. Оценку верстки стоит запрашивать только по файлу, который уже прошел приемку.
Разница между двумя макетами не в красоте картинки, а в том, сколько решений за дизайнера примет разработчик. Чем меньше таких решений на его стороне, тем ближе смета к реальным срокам.
Есть макет в Figma? Пришлите файл — бесплатно проверим готовность к верстке и назовем срок. Верстка и разработка сайтов от 50 000 ₽, раздел «Сайты».
Источники
