Из Figma в Tilda: как перенести макет лендинга и не сломать вёрстку

Дизайнер нарисовал лендинг в Figma, а собирать его нужно в Tilda, чтобы маркетолог мог быстро менять тексты и запускать рекламу. Tilda поддерживает импорт макетов из Figma в Zero Block, но идеальный перенос в один клик бывает редко. Результат во многом зависит от того, как подготовлен исходный файл.

Способы переноса

1. Импорт в Zero Block — Tilda загружает элементы из фрейма Figma, сохраняя позиции, тексты и изображения.
2. Сборка вручную из стандартных блоков Tilda по макету — дольше, но проще в дальнейшей поддержке.
3. Комбинированный вариант: сложные экраны импортируются в Zero Block, типовые секции собираются из готовых блоков.

Для рекламного лендинга часто выгоднее комбинированный подход: стандартные блоки легче редактировать и они лучше адаптируются.

Подготовка макета в Figma

• Каждый экран лендинга — отдельный фрейм, название без лишних символов.
• Ширина фрейма соответствует сетке Tilda для десктопа.
• Элементы сгруппированы логично, лишние скрытые слои удалены.
• Сложные эффекты, которые Tilda не поддерживает, лучше заранее растрировать в изображение.
• Шрифты доступны в Tilda или подключаются как собственные.
• Изображения экспортированы в подходящем качестве, без лишнего веса.

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

1. В Figma получите ссылку на нужный фрейм и, если требуется, токен доступа к API.
2. В Tilda создайте Zero Block и выберите импорт из Figma.
3. Вставьте ссылку и токен, запустите импорт.
4. Проверьте результат: позиции, шрифты, межстрочные интервалы, изображения.
5. Повторите для каждого экрана.

Точные названия пунктов меню могут меняться, поэтому сверяйтесь со справкой Tilda.

Адаптивность

Самая трудоёмкая часть. Импорт переносит десктопную версию, а мобильную нужно настраивать отдельно в Zero Block для каждой ширины экрана. Если дизайнер нарисовал мобильную версию в Figma, используйте её как ориентир. Для рекламного трафика это критично: большая часть переходов из Instagram, TikTok и Telegram приходит с телефонов.

Проверяйте:

• читаемость текста на маленьком экране;
• размер кнопок — их должно быть удобно нажимать пальцем;
• отсутствие горизонтальной прокрутки;
• скорость загрузки изображений.

Форма заявки

Ради заявок лендинг и делается. После переноса:

• замените нарисованную форму на рабочую форму Tilda;
• подключите получение заявок: почта, CRM, Telegram;
• добавьте скрытые поля для UTM-меток;
• настройте цели в аналитике на успешную отправку;
• проверьте отправку тестовой заявкой.

Аналитика и пиксели

Подключите в настройках сайта Tilda счётчики аналитики и пиксели рекламных систем: Meta, TikTok и другие, которыми пользуетесь. Проверьте, срабатывают ли события при отправке формы.

Частые проблемы

• Шрифт из Figma не загружен в Tilda, и тексты отображаются системным шрифтом.
• Тексты импортированы картинкой, и их нельзя редактировать.
• Мобильная версия не настроена, элементы налезают друг на друга.
• Тяжёлые изображения замедляют загрузку.
• Форма выглядит как в макете, но не отправляет данные.

Как договориться с дизайнером заранее

Многих проблем можно избежать, если до начала работы обсудить с дизайнером ограничения Tilda. Попросите рисовать по сетке, которую использует Zero Block, сразу делать мобильную версию ключевых экранов, использовать шрифты, которые можно подключить, и не строить вёрстку на сложных масках и эффектах. Отдельно договоритесь о том, какие блоки будут собираться стандартными средствами Tilda: отзывы, вопросы и ответы, форма. Тогда маркетолог сможет менять их без участия дизайнера, а тестировать разные заголовки для рекламы станет проще.

Чек-лист перед запуском рекламы

• Все экраны перенесены и выглядят как в макете.
• Мобильная версия проверена на нескольких телефонах.
• Форма работает, заявки доходят.
• Аналитика и пиксели подключены.
• Скорость загрузки приемлемая.

Если нужен лендинг под рекламу, который собирает заявки, напишите — поможем с переносом, настройкой формы и аналитики.