Как перенести макет из Figma на Тильду

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

Дайте фрейму лаконичное название и проверьте, чтобы оно не содержало специальных символов и пробелов в начале и конце. Все элементы должны располагаться внутри границ фрейма. Объекты, выходящие за пределы, будут обрезаны.

Если в макете из Figma предусмотрены несколько секций, создайте для каждой отдельный фрейм шириной 1200 px. При импорте каждый фрейм можно перенести в свой Zero Block, чтобы разбить дизайн сайта на логические части.

Чтобы импортировать данные из Figma, вам понадобится API токен. Для его получения выполните следующие шаги:

1. Зайдите в Figma. Перейдите по пути “View Profile” → “Settings”.
2. Перейдите на вкладку Security. В отделе “Personal Access Tokens” кликните “Generate New Token”.
3. Введите имя токена. Установите срок действия — лучше всего выбрать бессрочный термин.
4. Настройте раздел Scopes. Установите значения “только чтение”.
5. Сгенерируйте токен и скопируйте его.

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

Для Тильды: откройте страницу, добавьте Zero Block и кликните по иконке с тремя точками. В появившемся меню выберите “Import”.

Для Фигмы: откройте макет, выберите фрейм. Скопируйте его URL из адресной строки. Вставьте ссылку на фрейм и ваш API Access токен в поля окна импорта на Tilda. Нажмите “Import” и дождитесь завершения.

После успешного импорта все слои проекта сразу отобразятся в Zero Block. Текстовые элементы останутся текстом, SVG‑объекты преобразуются в векторные контуры, а растровые изображения (PNG, JPG) автоматически сохранятся в библиотеку Tilda, но по умолчанию будут загружаться с серверов Figma.

Чтобы перенести их в хранилище Tilda, зайдите в редактор каждого изображения и нажмите “Upload to Tilda”. Тогда загрузка картинки будет происходить на серверы платформы, что позволит ей отображаться даже после удаления фрейма из Figma.

Чтобы экспорт из Figma прошел без ошибок, соблюдайте несколько правил при создании макета.

Каждый макет нужно импортировать отдельно. Его станет значительно проще редактировать, что позволит разбить страницу на блоки.

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

Любую группу фигур или текстов можно экспортировать как картинку, добавив в название слово “image”. Если вы хотите сохранить векторный контур, добавьте в имя группы “svg”, тогда фоны преобразуются в векторные элементы в Zero Block.

Чтобы импортировать кнопку как интерактивный элемент, объедините фон и текст в одну группу. Добавьте в название группы слово “button”. Важно, чтобы выравнивание текста точно совпадало с размерами шейпа. Иначе, при импорте текст может сместиться.

Если в Figma к шейпу применен эффект, который не поддерживается Zero Block, Tilda импортирует фоновые элементы как растровое изображение с эффектом.

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