Что именно умеет импорт
Tilda поддерживает перенос дизайна из Figma в Zero Block через специальный механизм импорта. Это ускоряет первичную сборку расположения элементов, но не превращает макет в полностью готовую адаптивную страницу.
Актуальный порядок описан в официальной инструкции Tilda по импорту из Figma.
Рабочий процесс переноса
Подготовьте Figma до переноса
Чем чище исходный макет, тем меньше ручной уборки. Перед импортом:
- соберите экран внутри одного понятного frame;
- удалите скрытый мусор и дубли;
- проверьте названия слоев;
- убедитесь, что тексты остаются текстами, а не переведены в кривые;
- проверьте изображения и маски;
- зафиксируйте реальные шрифты и начертания.
Tilda рекомендует использовать frame шириной 1200 px как удобную базу для импорта в Zero Block.
Один frame - один логический блок
Не стоит переносить всю длинную страницу как один гигантский фрейм. Разделите ее на секции: hero, преимущества, кейсы, CTA. Это упрощает адаптив, переиспользование и последующие изменения.
Один визуальный экран не всегда равен одному техническому блоку, но такое разделение - хорошая отправная точка.
После импорта проверьте структуру
Сразу после переноса откройте список элементов Zero Block и проверьте, что:
- текст редактируется;
- группы не превратились в непонятные дубли;
- ссылки и кнопки нужно назначить отдельно;
- порядок слоев соответствует макету;
- изображения загружаются.
Не оставляйте зависимость от Figma для изображений
Tilda предупреждает, что импортированные изображения могут изначально подгружаться из Figma. Для рабочего сайта их стоит загрузить в Tilda, оптимизировать и проверить исходные размеры. Иначе внешний источник становится лишней зависимостью.
Шрифты подключаются отдельно
Если макет использует гарнитуру, которой нет в проекте Tilda, один импорт не решит вопрос лицензии и загрузки. Подключите шрифт штатно или через разрешенный webfont-механизм, затем сравните переносы строк.
Как выбрать и проверить гарнитуру, разобрано в статье про шрифты для сайта.
Главная работа начинается на адаптиве
Десктопный импорт дает только одну композицию. Для остальных ширин решите, что происходит с колонками, порядком элементов, высотой блока, изображениями и типографикой. Не переносите координаты 1200 px механически на 320 px.
В Zero Block можно редактировать стандартные адаптивные диапазоны и добавлять собственные контрольные точки. Используйте их там, где ломается композиция.
Осторожно с автоматическим масштабированием
Автомасштаб помогает для некоторых декоративных композиций, но интерфейсные элементы, текст и формы требуют ручной проверки. Особенно это касается сложного hero с абсолютными позициями.
Интерактив не переносится как идея
Hover, меню, слайдеры, табы, формы и сложные анимации нужно настраивать уже в Tilda. Figma показывает состояние, но не определяет рабочую логику сайта.
Поэтому хороший дизайн-файл должен содержать состояния и комментарии, а не только статические экраны.
Проверьте семантику
После визуального переноса убедитесь, что главный заголовок имеет нужный HTML-тег, ссылки являются ссылками, изображения получают alt там, где это необходимо, а текст доступен в DOM. Макет Figma не несет SEO-настроек автоматически.
Финальный QA
- сравните десктоп с макетом;
- проверьте промежуточные ширины;
- пройдите мобильные сценарии;
- замените внешние изображения;
- подключите шрифты;
- назначьте ссылки и интерактив;
- проверьте H1 и семантику;
- опубликуйте и тестируйте публичный URL.
Что проверить до и после импорта
| До импорта | После импорта |
|---|---|
| Frame 1200 px для корректного переноса | Размер и позиция элементов на базовом брейкпоинте |
| Один логический блок в одном frame | Не импортировались ли лишние группы как изображения |
| Понятные группы и названия | Слои можно редактировать, а не только визуально совпадают |
| Подготовленные изображения | Изображения загружены в Tilda, а не остаются на серверах Figma |
| Понимание интерактива | Табы, hover, анимации и формы реализованы как поведение сайта |
Официальная инструкция Tilda рекомендует импортировать один frame в один Zero Block и готовить макет на frame шириной 1200 px. Это техническая база, но не гарантия хорошей верстки. Импорт переносит композицию, а решения по адаптиву и поведению остаются работой разработчика.
Не копируйте десктоп на пять разрешений вручную
После импорта определите, что должно масштабироваться, что переноситься, а что перестраиваться. Например, две колонки могут стать одной, крупная галерея - горизонтальным скроллом, а декоративный объект - исчезнуть на мобильном. Если просто двигать каждый элемент отдельно на каждом брейкпоинте, макет быстро становится трудно поддерживать.
Полезно сначала настроить ключевые контейнеры и типографику, затем проверить промежуточные ширины, и только потом заниматься декоративными деталями.
Сверьте сетку до импорта
Если Figma собрана на одной сетке, а существующий Tilda-проект использует другой контейнер, механический импорт создаст визуальные расхождения между новыми и старыми блоками. До переноса определите рабочую ширину контейнера и правила боковых полей.
Не импортируйте один компонент десятки раз без стратегии
Повторяемые карточки, кнопки и секции лучше сначала привести к общей системе. Иначе вы получите десятки независимых копий, которые придется исправлять вручную после каждого изменения дизайна.
Проверьте тексты после подключения реальных шрифтов
Метрики шрифта меняют переносы. После подключения webfont заголовок может стать на строку выше, а карточки - разной высоты. Финальный pixel-check делайте только после того, как шрифты и реальные тексты уже подключены.
Не превращайте pixel-perfect в самоцель
Браузер - не статичный артборд. Реальные шрифты, системный рендеринг, высота окна и контент меняются. После переноса важнее сохранить композиционный принцип и сценарий, чем компенсировать каждый пиксель отрицательным margin, который сломает соседний брейкпоинт.
Импорт экономит механическую работу, а не инженерную
Самая большая ошибка - считать перенос макета завершенной разработкой. Импорт хорошо сокращает ручную расстановку элементов, но качество сайта определяется тем, что происходит дальше: адаптив, семантика, скорость и рабочие сценарии.
Для сложного проекта этот процесс входит в полноценную разработку сайта на Tilda, а не является отдельной кнопкой экспортировать из Figma.
