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

2.

3.

4.

1.

5.

6.

8.

9.

7.

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

Перенос из Figma в Tilda позволяет не делать двойную работу: дизайн отрисован один раз, согласован — и переносится в рабочий инструмент. Если вас интересует заказать сайт на Тильде без погружения в технические детали — агентство DVIGA берёт на себя весь процесс: от макета до публикации.

Перенос оправдан в трёх ситуациях:

• Макет уже согласован с заказчиком и утверждён
• Создаётся лендинг или промо-страница с нестандартным дизайном
• К уже работающему сайту на Tilda добавляется новый блок

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

Отдельная причина делать всё в Figma до переноса — удобство правок. В Figma проще двигать элементы, менять цвета и текст, видеть сайт целиком. В Zero Block после переноса каждый элемент редактируется отдельно, и переделывать структуру неудобно.

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

Плагин — официальный инструмент Tilda, который авторизуется напрямую через аккаунт. Метод с API-токеном старше: он требует вручную создать токен в Figma и вставить его в Zero Block. Результат одинаковый — фрейм из Figma становится Zero Block в Tilda.

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

Ширина фрейма в Figma должна быть строго 1200px — именно такую ширину использует Zero Block в Tilda. Высота — произвольная, обычно 650px на один блок. Каждый блок сайта должен быть в отдельном фрейме, а не в группе. Ссылки при импорте создаются на фреймы — группы не распознаются.

Чтобы расположение элементов совпало с Tilda, в Figma нужно настроить такую же сетку:

• 12 колонок
• Ширина колонки (Width): 60px
• Межколонник (Gutter): 40px
• Выравнивание (Type): Center

От названия слоя зависит, как элемент перенесётся в Tilda:

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

В Figma открыть меню Actions (иконка с четырьмя квадратами в нижней панели) → вкладка Plugins & Widgets → в поиске ввести «Figma to Tilda» → нажать на плагин → активировать по клику на кнопку «Run».

Выделить нужный фрейм / слой / отдельный элемент, который вы хотите перенести — он отобразится в плагине как Selected layers → нажать на кнопку Prepare to copy, и дождаться, когда фрейм будет готов для копирования → нажать на кнопку Copy to clipboard.

Открыть Зеро-блок в Тильде → нажать сочетание клавиш: Ctrl+V на Windows или Command+V на Mac → выбрать подходящий способ вставки фрейма.

После импорта в верхней части экрана появится уведомление: изображения хранятся 30 дней на серверах Figma. Чтобы изображения не пропали и переехали на серверы Tilda, нужно в настройках элементов с изображениями нажать «Upload to Tilda».

В Figma: нажать на иконку профиля (левый верхний угол) → Settings → раздел Security → Personal Access Tokens → Generate New Token.

В появившемся окне задать имя токена (например, «Tilda»), выбрать срок действия и уровень доступа Read для следующих пунктов: Current user, File content, File versions, Library assets, Library content и Projects. Нажать Generate Token. Токен появится на экране — скопировать его сразу, он отображается только один раз.

В Figma: кликнуть на нужный фрейм → Share (правый верхний угол) → Copy Link. Ссылка скопирована.

Перейти в редактор нужной страницы → добавить Zero Block или открыть уже существующий → нажать иконку «…» (многоточие) в правом верхнем углу Zero Block → выбрать Import из Figma.

В появившемся окне:

• Поле API Token — вставить токен из Figma
• Поле Layout URL — вставить ссылку на фрейм

Нажать Import и немного подождать — обычно занимает 10−30 секунд.

Токен сохраняется в браузере — при следующем импорте он уже будет в поле. Нужно только вставить новую ссылку на следующий фрейм.

Так же, как в первом методе: нажать «Upload to Tilda» в настройках элементов с изображениями после импорта.

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

Если вас интересуют сложные анимации и нестандартная интерактивность — о возможностях Zero Block подробнее в статье «Модификации и эффекты для Tilda».

Это создаёт один огромный Zero Block. Если лендинг занимает 5000px высоты — всё это будет одним нередактируемым блоком. Разделить его потом на части займёт часы. Переносить нужно поблочно: каждый блок сайта — отдельный фрейм, отдельный импорт.

Tilda строится на ширине 1200px. Если в Figma фрейм был 1440px или 1920px — после импорта элементы выйдут за границы или сожмутся не там, где нужно.

30 дней — и изображения исчезнут с сайта. Это уведомление легко проигнорировать после импорта. Проверяйте его сразу.

Figma не сжимает растровые картинки. Если в макете есть фотографии, лучше экспортировать их отдельно из Figma на компьютер, сжать (например, через TinyPNG), и загрузить в Tilda вручную. Это заметно ускоряет загрузку страницы.

Если шрифт не подключён в настройках сайта Tilda, текст после импорта заменится стандартным. Подключите нужные шрифты заранее: настройки сайта → Fonts.

• Согласуйте дизайн до переноса. Вносить правки в Figma — это 5 минут. Вносить те же правки после переноса в Zero Block — 30 минут. Закрывайте все итерации в Figma.
• Делайте мобильную версию отдельными фреймами. Zero Block не адаптируется автоматически. Для каждого блока нужно либо настраивать видимость на разных устройствах, либо делать отдельную мобильную сборку. Лучше заранее отрисовать мобильные версии блоков в Figma и переносить их отдельно.
• Не переносите кнопки и формы — создавайте сразу в Tilda. После переноса всё равно нужно настраивать поведение кнопок, адреса для форм, интеграции. Проще сделать их в Tilda сразу.
• Тестируйте на реальных устройствах, а не в превью. Tilda-редактор показывает примерный вид — на реальном телефоне картинка может отличаться. Публикуйте тестовую страницу и проверяйте.
• Начинайте с самых сложных блоков. Первый блок после настройки токена и разбора инструментов — самый долгий. Дальше идёт быстрее. Отложите простые блоки на конец, когда рука уже набита.

Подробнее о SEO-настройках после публикации — в статье «SEO для сайтов на Тильде».