Макет из Figma в сайт: что нужно знать перед конвертацией?

Помните те славные времена, когда для создания сайта нужно было погрузиться в дебри HTML и CSS, а потом еще неделю отлаживать поехавшую верстку в Internet Explorer? К счастью, эти дни остались в прошлом (ну, почти) – сегодня у нас есть инструменты, способные превратить дизайн-макет в работающий сайт буквально за пару кликов. И главный герой этой истории – Figma, которая из простого инструмента для дизайна эволюционировала в настоящий швейцарский нож веб-разработки.

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

Этот гайд будет полезен сразу нескольким категориям читателей. Во-первых, дизайнерам, которые хотят самостоятельно превращать свои макеты в работающие сайты (да, такое возможно, и вам не придется учить JavaScript). Во-вторых, разработчикам, которые ищут способы автоматизировать рутинные процессы верстки (поверьте, ваша спина скажет вам спасибо). И, конечно, предпринимателям, которым нужно быстро запустить сайт без привлечения армии специалистов и бюджета небольшой страны.

Почему Figma – лучший инструмент для веб-дизайна?

Позвольте начать с небольшого признания: я долго сопротивлялся переходу на Figma. «Еще один модный инструмент», – думал я, цепляясь за свой Adobe XD как за спасательный круг. Но, как говорится, если не можешь побороть течение – плыви по нему. И знаете что? Оказалось, что течение несет нас в правильном направлении.

Figma стала стандартом де-факто в веб-дизайне, и на это есть веские причины (нет, это не результат массового гипноза дизайнерского сообщества). Давайте разберем основные преимущества, которые делают её незаменимой для создания веб-проектов:

Облачность и командная работа

Помните старые добрые времена пересылки файлов «финальный_вариант_точно_2_правки.psd»? Так вот, Figma решила эту проблему раз и навсегда. Теперь все изменения синхронизируются в реальном времени, а ваши коллеги могут работать над проектом одновременно с вами (и да, вы даже можете видеть их курсоры, что иногда превращает рабочий процесс в увлекательную игру в догонялки).

Адаптивность без боли

Auto Layout в Figma – это как магия, только лучше, потому что работает предсказуемо. Создание адаптивных макетов больше не похоже на решение головоломки со спичками – компоненты автоматически подстраиваются под различные размеры экрана, сохраняя при этом все пропорции и отступы.

Интерактивные прототипы

Figma позволяет создавать интерактивные прототипы, которые действительно работают (а не просто красиво выглядят в портфолио). Можно настроить переходы между экранами, анимации и даже простую логику без единой строчки кода. Хотя, признаюсь честно, иногда это напоминает игру «змейка» – чем длиннее цепочка взаимодействий, тем сложнее не запутаться.

Плагины и интеграции

Экосистема плагинов Figma – это как App Store, только для дизайнеров. Здесь есть всё: от генераторов случайного контента до инструментов для автоматической верстки. Правда, как и в реальном App Store, иногда приходится долго искать действительно работающие решения среди огромного количества «почти работающих».

Но есть один нюанс…

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

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

Способы превратить макет из Figma в сайт

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

Ручная верстка (HTML + CSS + JS)

Для тех, кто любит полный контроль и не боится темной стороны веб-разработки

Плюсы:

• Абсолютная свобода в реализации любых идей (даже самых безумных)
• Максимальная производительность и отсутствие лишнего кода
• Возможность оптимизировать каждый пиксель

Минусы:

• Нужно знать HTML, CSS, JavaScript (и желательно еще пару-тройку технологий)
• Времени уйдет столько, что можно успеть посмотреть все сезоны «Игры престолов»
• Придется самостоятельно решать проблемы кроссбраузерности (привет, Safari!)

CMS (WordPress, Webflow)

Для тех, кто хочет золотую середину

Плюсы:

• Не нужно писать код с нуля
• Готовая админка и базовый функционал
• Огромное сообщество и множество готовых решений

Минусы:

• Придется подстраиваться под логику CMS
• Можно случайно установить плагин, который замедлит сайт до скорости улитки
• Обновления иногда ломают всё (и обычно это происходит в пятницу вечером)

Конструкторы сайтов (Framer, Tilda, Mottor)

Для тех, кому нужен результат «вчера»

Плюсы:

• Быстрая конвертация макетов
• Интуитивно понятный интерфейс
• Не нужно думать о хостинге и технической части

Минусы:

• Ограниченный функционал (иногда очень ограниченный)
• Зависимость от платформы
• Может быть дороже в долгосрочной перспективе

Плагины и автоматизированные сервисы

Для оптимистов, верящих в технологии

Когда они полезны:

• При работе с простыми макетами
• Для быстрого прототипирования
• В проектах с ограниченным бюджетом

Решаемые задачи:

• Автоматическая генерация CSS
• Экспорт ассетов
• Создание базовой структуры проекта

Сравнительная таблица методов:

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

Пошаговое руководство: как перенести макет из Figma в Framer / Mottor

Настало время погрузиться в практическую часть нашего руководства. Я протестировал оба инструмента на реальных проектах (да, включая те случаи, когда заказчик говорит «а давайте чуть-чуть подвинем этот блок влево» на пятой итерации правок), и готов поделиться рабочим процессом, который действительно работает.

Подготовка макета в Figma или как не выстрелить себе в ногу еще на старте

1. Структурирование дизайна

• Разбейте макет на логические блоки (если вы думаете «потом разберусь» – нет, не разберетесь)
• Используйте осмысленные названия для фреймов (не «Frame 71», а «Hero Section»)
• Группируйте связанные элементы (помните: хороший макет – это как хороший код, только в картинках)

2. Работа с сетками и адаптивностью

• Используйте Auto Layout (это не просто модная фича, а ваш спасательный круг)
• Настройте корректные constraints для элементов
• Проверьте, как макет ведет себя при изменении размеров (спойлер: обычно никак хорошего)

3. Проверка готовности к экспорту

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

Типичные проблемы адаптивности макета или почему «выглядит отлично на моем мониторе» — плохая защита

После настройки сеток и базовой адаптивности в Figma вы, вероятно, испытываете чувство гордости и облегчения. Но не спешите отправлять макет клиенту с пометкой «Готово к переносу». Есть несколько подводных камней, о которые разбились мечты многих дизайнеров (а я видел достаточно таких крушений, чтобы написать целую книгу морских трагедий).

Проблемы с компонентами когда «работает в Figma» не значит «будет работать везде»

1. Кнопки и интерактивные элементы
   • В Figma они выглядят идеально, а при переносе таинственным образом теряют свои состояния (hover, active, focus)
   • Разные инструменты по-разному интерпретируют варианты компонентов (Mottor иногда вообще «не видит» вариантов)
   • Особенно «весело» с компонентами, содержащими SVG-иконки — при адаптивном изменении размера они могут вести себя как капризный трехлетка в магазине игрушек
2. Типографика и шрифты
   • Позаботьтесь о переносимости шрифтов (Google Fonts — ваш верный друг)
   • Адаптивная типографика часто ломается при экспорте — текст может неожиданно переноситься или обрезаться
   • Figma позволяет настроить разные стили для разных размеров экрана, но перенести эту магию один в один в Framer или Mottor — примерно как пытаться перелить воду вилкой

Искажение сеток и отступов геометрия, которая не работает в реальном мире

1. Auto Layout vs. реальность
   • Auto Layout в Figma и его интерпретация в Framer — это как перевод с китайского на суахили через Google Translate
   • Padding и margin могут неожиданно измениться, особенно в Mottor (и нет, это не баг, это «особенность интерпретации»)
   • Вложенные Auto Layout вообще лучше не использовать, если вы не готовы к веселым сюрпризам при переносе
2. Адаптивные контейнеры
   • Figma позволяет настроить поведение при изменении размера, но Framer и Mottor имеют своё мнение на этот счёт
   • Контейнеры с фиксированной шириной могут стать резиновыми, а резиновые — фиксированными (просто потому что могут)
   • Flex-настройки интерпретируются… творчески (то есть неправильно)

Что делать, чтобы не попасть в ловушку? кроме того, чтобы перейти в другую профессию

1. Превентивные меры в Figma
   • Используйте простые компоненты вместо сложных вложенных конструкций
   • Создавайте отдельные фреймы для мобильной и десктопной версий (да, это старая школа, но она работает)
   • Документируйте адаптивное поведение в комментариях (будущий вы скажет спасибо)
2. При переносе в Framer
   • Сначала перенесите базовую структуру, затем постепенно добавляйте сложные компоненты
   • Проверяйте результат на разных разрешениях на каждом этапе (серьезно, каждый раз)
   • Будьте готовы заново настраивать адаптивное поведение некоторых элементов
3. При работе с Mottor
   • Используйте встроенные адаптивные компоненты вместо переноса из Figma
   • Отдельно настраивайте каждую контрольную точку (breakpoint)
   • Для шрифтов лучше настраивать размер непосредственно в Mottor, а не надеяться на корректный перенос

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

А теперь, когда вы морально готовы к битве с адаптивностью, давайте продолжим наше путешествие в мир превращения красивой картинки в работающий сайт…

Экспорт в Framer когда «копировать-вставить» – это не так просто, как кажется

1. Установка плагина Framer Copy Paste

• Найдите плагин в Figma Community (он прячется там, где вы его не ищете)
• Установите и активируйте (да, нужно перезапустить Figma)
• Помолитесь, чтобы всё работало (обычно работает)

2. Процесс копирования

• Выделите нужный фрейм
• Запустите плагин
• Дождитесь окончания процесса (может занять время, особенно если у вас там «совсем чуть-чуть правок»)

3. Решение проблемы с шириной

• Помните про ограничение в 1200px (да, это реальное ограничение, нет, его нельзя обойти)
• Настройте viewport в Framer
• Адаптируйте макет под новые размеры (и да, это может быть больно)

Какие ограничения могут возникнуть?

А теперь давайте поговорим о том, о чем обычно деликатно умалчивают в рекламных брошюрах — об ограничениях инструментов. Потому что, как говорил мой первый руководитель: «Любая технология идеальна, пока ты не начал ей пользоваться». И Framer с Mottor здесь не исключение.

Ограничения Framer или почему идеальных инструментов не существует

Начнем с Framer, который, несмотря на все свои преимущества, иногда заставляет схватиться за голову:

1. Жесткое ограничение по ширине
   • Максимальная ширина контейнера — 1200px (нет, нельзя сделать 1201px, я проверял)
   • Если ваш дизайнер создал макет шириной 1440px, готовьтесь к интересным беседам о масштабировании
   • И да, элементы за пределами этой ширины будут обрезаны (напоминает гильотину, только для дизайна)
2. Градиенты и обводка текста
   • Сложные градиенты часто импортируются с искажениями (особенно радиальные)
   • Обводка текста? Забудьте. Просто притворитесь, что вы её никогда не добавляли в макет
   • Если клиент настаивает — предложите ему альтернативное решение (например, сменить клиента)
3. Особенности работы с компонентами
   • Вложенные компоненты могут вести себя непредсказуемо
   • Auto Layout иногда интерпретируется… творчески
   • Попрощайтесь с некоторыми эффектами размытия (они просто исчезнут, как ваша продуктивность в пятницу вечером)

Ограничения Mottor когда «почти идеально» — это тоже комплимент

Переходим к Mottor, у которого свой набор сюрпризов:

1. Ручная настройка слоев
   • Приготовьтесь к тому, что некоторые слои придется настраивать вручную
   • Система именования слоев критична (если у вас в макете «Rectangle 217», Mottor вежливо поинтересуется, что это и зачем)
   • Иерархия элементов может нарушиться при импорте (привет, неожиданные наложения!)
2. Особенности импорта
   • Текстовые стили иногда «теряются в переводе»
   • SVG-элементы могут импортироваться с искажениями
   • Маски работают… интересно (и под «интересно» я подразумеваю «непредсказуемо»)
3. Проблемы с анимацией и интерактивностью
   • Сложные анимации могут не перенестись вообще
   • Параллакс-эффекты потребуют дополнительной настройки
   • Интерактивные прототипы придется частично воссоздавать заново (нет, копировать-вставить здесь не поможет)

Что с этим делать? кроме того, чтобы тихо плакать в подушку

1. Планируйте с учетом ограничений
   • Узнайте об ограничениях заранее (да, вы уже читаете этот текст, так что вы на правильном пути)
   • Адаптируйте макет под выбранный инструмент (да, иногда дизайн придется упростить)
   • Сообщите клиенту о возможных компромиссах (дипломатично, без фразы «ваш дизайнер явно никогда не слышал о веб-разработке»)
2. Имейте план Б
   • Будьте готовы комбинировать инструменты (Framer для одних элементов, ручная верстка для других)
   • Держите под рукой альтернативные решения (например, Webflow может справиться там, где Framer сдался)
   • Не бойтесь менять инструменты в процессе, если понимаете, что зашли в тупик

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

Экспорт в Mottor потому что одним Framer’ом сыт не будешь

1. Получение токена Figma

• Откройте настройки аккаунта Figma
• Создайте новый токен (и запишите его, серьезно)
• Сохраните в надежном месте (нет, закладка в браузере – это не надежное место)

2. Процесс импорта

• Скопируйте ID фрейма из Figma
• Вставьте в Mottor вместе с токеном
• Настройте основные параметры импорта
• Попробуйте не закатить глаза, когда что-то пойдет не так (а что-то обязательно пойдет не так)

3. Типичные проблемы и их решения

• Проблемы с градиентами? Проверьте настройки цветового пространства
• Съехала верстка? Пересмотрите структуру групп в Figma
• Текст выглядит странно? Проверьте шрифты и их загрузку

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

Оптимизация и адаптация сайта

Итак, базовая конвертация макета завершена. Теперь начинается самое интересное – превращение статичной картинки в полноценный адаптивный сайт. И поверьте моему опыту, именно здесь начинается настоящее веселье (читай: головная боль).

Адаптация под мобильные устройства или почему 414px – это новые 320px

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

1. Минимальная ширина мобильной версии

• Забудьте про 320px – это пережиток прошлого (как и Internet Explorer)
• Используйте 414px как базовую ширину (это ширина iPhone XR и многих Android-флагманов)
• Но все равно проверяйте на 375px (потому что iPhone 13 mini существует, и кто-то им пользуется)

2. Особенности адаптации контента

• Текст должен быть читаемым (нет, 12px – это не читаемый размер шрифта)
• Кнопки – достаточно большими для касания (минимум 44x44px, и это не я придумал, а Apple)
• Изображения – оптимизированными (никому не нужен 4K баннер на мобильном)

Настройка интерактивности потому что статичный сайт в 2025 – это как DVD-плеер

1. Добавление ссылок и кнопок В Framer:

// Не пугайтесь, это псевдокод

element.onClick = () => {

// Здесь магия

navigate(«/somewhere»)

}

В Mottor:

• Выбираете элемент
• Открываете панель свойств
• Добавляете ссылку
• Молитесь, чтобы все работало

2. Настройка якорей и навигации

• Определите важные секции сайта
• Настройте плавную прокрутку (smooth scroll)
• Добавьте визуальную обратную связь
• Проверьте работу на всех устройствах (спойлер: на iOS будет работать иначе)

Публикация и настройка домена или почему хостинг за $2 в месяц – это плохая идея

1. Выбор хостинга

• Для Framer: встроенный хостинг (но он не бесплатный)
• Для Mottor: аналогично
• Важно: проверьте географию серверов (если ваша целевая аудитория в России, а сервер в Австралии – это не очень хорошо)

2. Тарифы и ограничения

Framer:

• Бесплатный план: только домен framer.app
• Pro: свой домен + расширенная функциональность
• Но есть ограничение на трафик (читайте мелкий шрифт)

Mottor:

• Похожая система
• Больше возможностей для кастомизации
• Но выше цена

3. Что обязательно нужно проверить перед запуском:

• Скорость загрузки (PageSpeed Insights – ваш друг)
• Корректность отображения на разных устройствах
• Работу всех интерактивных элементов
• SEO-настройки (да, даже для одностраничника)

Важное примечание об оптимизации:

Топ-3 проблемы, которые вы точно встретите:

1. Изображения грузятся слишком долго
2. Что-то поехало на iPhone
3. Кнопки работают не так, как задумано

Итоги и полезные ресурсы

После всего вышесказанного самое время подвести итоги и собрать все ключевые моменты в одном месте. И да, я специально оставил самые полезные ссылки напоследок – считайте это бонусом за то, что дочитали до конца.

Краткие выводы по методам конвертации:

1. Framer – отличный выбор, если:

• Вам нужно быстро запустить простой сайт
• У вас несложный макет без особых наворотов
• Бюджет позволяет платить ежемесячную подписку Но готовьтесь к ограничениям по ширине и функционалу

2. Mottor – подойдет, когда:

• Требуется больше контроля над элементами
• Нужна продвинутая кастомизация
• Важна точность соответствия макету Правда, придется потратить больше времени на настройку

3. Ручная верстка – все еще актуальна, если:

• Нужен максимальный контроль
• Важна производительность
• Проект долгосрочный и требует масштабирования (Но вы точно готовы потратить на это время?)

Полезные ресурсы и инструменты: (которые действительно работают, проверено на себе)

1. Для работы с Figma:

• Figma Dev Mode – для удобного экспорта стилей
• Auto Layout Masterclass – гайд по правильной структуре макетов
• Figma Tokens – для системного подхода к дизайну

2. Плагины для оптимизации:

• TinyPNG – сжатие изображений без потери качества
• SVGOMG – оптимизация SVG
• Figma to HTML/CSS – если все-таки решите верстать вручную

3. Инструменты для тестирования:

• BrowserStack – тестирование на разных устройствах
• PageSpeed Insights – проверка производительности
• Responsively – для просмотра адаптивности

Финальные советы от того, кто набил все шишки:

1. Всегда делайте бэкап макета перед конвертацией
2. Проверяйте результат на реальных устройствах
3. Не забывайте про оптимизацию изображений
4. Документируйте свои настройки (поверьте, через месяц вы не вспомните, почему сделали именно так)

И помните главное правило веб-разработки: если что-то может пойти не так – оно обязательно пойдет не так, причем в пятницу вечером перед важным дедлайном. Поэтому всегда имейте план Б (и лучше еще план В).

Если после прочтения этой статьи вы поняли, что хотите не просто конвертировать один макет, а освоить веб-дизайн на профессиональном уровне — самое время задуматься о структурированном обучении. На KursHub собрана подборка топовых курсов по веб-дизайну, где вы сможете не только освоить Figma во всех деталях, но и научиться создавать такие макеты, которые потом не придется «допиливать» при конвертации. Поверьте моему опыту — пара месяцев обучения сэкономит вам годы мучений методом проб и ошибок (и несколько тысяч нервных клеток в придачу).

P.S. Если вы дочитали до этого места – поздравляю, теперь вы знаете о конвертации макетов из Figma больше, чем 90% тех, кто просто гуглит «как сделать сайт из фигмы». И да, можете смело добавлять эту строчку в резюме (только не говорите, что я вам это посоветовал).