30 сентября 2025

9 минут чтения

Обновлено: 30 сентября 2025

Автор: Елизавета Огнева

Как перенести макет из Figma в Tilda: пошаговое руководство

Figma — один из главных инструментов для проработки макета лендинга. А чтобы превратить его в работающий сайт, нужно перенести дизайн в Tilda. Это конструктор, который позволяет быстро собирать адаптивные сайты без сложной вёрстки.

Разберём, какие есть способы переноса макета, как выбрать подходящий и что учесть, чтобы сайт в итоге был максимально близок к исходному дизайну.

Содержание:

Подготовка макета в Figma к переносу Способы переноса дизайна в Tilda Пошаговый перенос макета в Tilda Настройка интерактивных элементов Адаптивность и финальная настройка Типичные проблемы и их решения

Подготовка макета в Figma к переносу

Требования к макетам для Tilda

Чтобы перенос прошёл без проблем, нужно учесть несколько моментов:

использовать чёткую сетку с колонками;

делать аккуратные отступы и одинаковые размеры элементов;

группировать блоки и фреймы по логике сайта;

убедиться, что шрифты доступны для импорта;

проверить, чтобы слои имели понятные названия.

Экспорт графических элементов и ресурсов

Макет можно разбить на части и экспортировать графику в форматах PNG, JPEG или SVG. Для сложных иконок лучше выбрать SVG — он легче и лучше масштабируется. Важно правильно выставить настройки экспорта: прозрачный фон, нужное разрешение, поддержка retina.

Подключите Яндекс Пэй и Сплит для бизнеса

Увеличивайте конверсию и средний чек —
онлайн в интернете и офлайн в торговых точках

Подключить онлайн

Подключить офлайн

Способы переноса дизайна в Tilda

Использование готовых блоков Tilda

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

Использование готовых блоков — это самый быстрый и удобный способ переноса макета, если в нём нет слишком сложных или нестандартных элементов.

Когда лучше использовать готовые блоки:

если макет в Figma типовой — лендинг, интернет-магазин, блог, портфолио;

если в макете есть привычные элементы: меню, баннер с заголовком и кнопкой, карточки товаров, отзывы.

Сначала разбейте макет на секции:

В Figma посмотрите, из каких логических блоков состоит страница. Например: меню → баннер → преимущества → карточки → отзывы → футер.

Затем подберите аналог в библиотеке Tilda. Откройте Библиотеку блоков и ищите:

Menu — для шапки
Cover — для баннеров с заголовком и кнопкой
Features — для преимуществ/списков
Team / Reviews — для команды и отзывов
Form / Contacts — для заявок
Footer — для подвала сайта

Настройте блок

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

Настройте стилизацию

В панели настроек можно изменить:

шрифты — подключить свои из Google Fonts или загрузить кастомные;

цвета текста и фона;

ширину контейнера — например, 1200 px, чтобы совпадало с макетом;

выравнивание элементов.

Каждый стандартный блок уже адаптивный: Tilda сама подгоняет формат под мобильную версию. Обычно остаётся только проверить и при необходимости слегка подредактировать.

С помощью готовых блоков сайт можно собрать за пару часов. Этот способ не требует глубоких знаний кода и позволяет вносить правки в контент.

Работа с Zero Block для точного воспроизведения

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

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

Откройте экран, который хотите перенести. Убедитесь, что у вас настроена сеточная структура — обычно 12 колонок, ширина 1200 px.

Экспортируйте:

изображения — в PNG/JPG (для фото) или SVG (для иконок);

фоны — отдельно, если они не цветовые;

старайтесь использовать 2x для Retina, но не перегружайте.

Создайте блок в Tilda

Войдите в редактор страницы → «Добавить блок».
В разделе Other → T123 Zero Block добавьте пустой блок.
Установите размер контейнера — например, 1200 px ширины.

Перенесите текст

В Zero Block добавьте элемент «Текст».

Скопируйте текст из Figma → вставьте.

Настройте параметры: шрифт, размер, жирность, межстрочный интервал, цвет.

Перенесите изображения

В Zero Block → «Изображение» → загрузите экспортированный PNG/JPG/SVG.

Разместите его на сетке. Можно включить направляющие, чтобы повторить расположение из Figma.

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

Добавьте кнопки

В Zero Block → «Фигура» → прямоугольник.

Настройте цвет, скругление углов, тень.

Поверх добавьте текст.

Объедините элементы в группу, чтобы перемещать их как один объект.

Назначьте действие — ссылка, скролл, открытие попапа.

Проверьте адаптивность

В Zero Block есть отдельные режимы: Desktop, Tablet, Mobile.

Переключитесь и вручную поправьте расположение элементов.

Следите, чтобы тексты не обрезались, а картинки не теряли пропорции.

Сохраните блок, посмотрите в превью и сравните с макетом Figma.

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

Комбинированный подход: блоки + Zero Block

Оптимальный вариант — сочетать стандартные блоки и zero block. Например, типовое меню и подвал брать из готовых решений, а уникальные разделы делать вручную. Так сайт собирается быстрее и его легко редактировать. Рассмотрим, как правильно комбинировать инструменты.

	Стандартные блоки	Zero Block
Подойдут для:	меню и шапки сайта — блоки из категории Menu; футера — блоки из Footer; форм обратной связи — Contact Form; списков или карточек товаров, блогов, услуг — Blocks из Features / Shops / Catalog; слайдеров и галерей — готовые модули из Gallery / Slider	уникальных экранов, которые нельзя собрать готовыми блоками. Например: кастомный баннер, нестандартная анимация, сложная сетка; креативных кнопок, иллюстраций, нестандартных карточек; декоративных элементов: линий, иконок, паттернов.
Преимущества	Адаптивны и быстро собираются. Легко редактировать контент прямо в интерфейсе. Минимум ручной работы с адаптивностью.	Полный контроль над дизайном. Можно повторить макет Figma «пиксель в пиксель». Есть анимации и гибкие настройки.

Пошаговый перенос макета в Tilda

Создание структуры страницы

На этом этапе создаётся «каркас» сайта. Важно повторить структуру: заголовки, секции, блоки. Это можно сделать с помощью готовых элементов или через zero block.

Настройка блоков под дизайн из Figma

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

Импорт и размещение графических элементов

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

Настройка интерактивных элементов

Перенос форм и кнопок из макета

В Tilda есть готовые формы, но их можно адаптировать под макет. Кнопки создаются в zero block или настраиваются в стандартных блоках.

Интеграция платёжных виджетов Яндекс Пэй

Чтобы принимать оплату на сайте картами, по QR и частями можно подключить финтех-сервисы Яндекса. Для сайтов на Tilda доступны виджеты, которые помогут клиенту решиться на покупку.

Сначала нужно зарегистрироваться в личном кабинете Яндекс Пэй для бизнеса, отправить заявку на подключение и дождаться, когда сервисы подключат. А потом с помощью готового модуля интегрировать Яндекс Пэй и Сплит можно меньше чем за час:

В личном кабинете Tilda в разделе «Мои сайты» выберите нужный проект.

Нажмите кнопку «Настройки сайта» и перейдите в раздел «Платёжные системы».

В блоке «Платёжные сервисы» выберите «Универсальную платёжную систему».

В поле «Шаблон настроек» выберите шаблон Яндекс Пэй и Сплита.

Укажите параметры платёжной системы и, если нужно, заполните остальные данные. Нажмите кнопку «Сохранить».

Настройка анимаций и переходов

Tilda позволяет добавлять простые анимации: появление текста, параллакс, плавные переходы. Сложные анимации из Figma могут не перенестись напрямую — их нужно адаптировать.

Адаптивность и финальная настройка

Каждый сайт в Tilda автоматически получает адаптивную вёрстку. Но её нужно проверить вручную.

Адаптация под мобильные устройства

В zero block можно включить разные версии блоков для мобильной и десктопной версии. Это особенно важно для сайтов со сложным графическим дизайном.

Проверка соответствия оригинальному макету

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

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

Перенос дизайна из Figma в Tilda может вызвать трудности. Рассмотрим основные.

Ограничения при переносе сложных эффектов

Некоторые эффекты в Figma — размытия, сложные градиенты — не поддерживаются в Tilda. Используйте альтернативные эффекты или сохраните часть элементов как изображения.

Оптимизация для быстрой загрузки

Большие изображения могут замедлить загрузку. Чтобы этого избежать, сохраните их в правильных форматах, для иконок используйте SVG и уменьшайте вес файлов.

Перенести макет из Figma в Tilda просто, если правильно выбрать подход: использовать готовые блоки для стандартных элементов, Zero Block для уникальных экранов или комбинировать оба варианта. Следуя нашей пошаговой инструкции, вы сможете быстро собрать адаптивный сайт, сохранив дизайн и структуру исходного макета. При этом у вас будет возможность легко редактировать контент в будущем.

Начните принимать платежи уже сегодня

Простая интеграция, низкие комиссии, довольные клиенты

Подключить Яндекс Пэй

Подключить QR-Код

Елизавета Огнева

Автор Яндекс Пэй