Документация

Правила импорта и требования

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

Оглавление

Как получить Figma API Key

Для работы Tildify необходим Personal Access Token из Figma. Это займет всего 1 минуту.

Пошаговая инструкция

Получите токен доступа к вашим файлам Figma

Откройте настройки аккаунта Figma

В браузере Figma нажмите на меню аккаунта в левом верхнем углу и выберите Settings

Перейдите в раздел Security

В настройках найдите вкладку Security и прокрутите до секции Personal access tokens

Шаг 2: Раздел Security и Personal access tokens

Создайте новый токен

Нажмите Generate new token, введите название (например, "Tildify") и выберите необходимые права доступа

Обязательные права доступа:

current_user:read - для проверки токена. Без этого разрешения импорт будет работать, но не будет работать проверка токена.

file_content:read - для импорта дизайна. Без этого разрешения импорт работать не будет.

💡 Важно: Без этих разрешений токен не будет работать с Tildify

Скопируйте токен

Нажмите Generate token и сразу скопируйте токен. Токен показывается только один раз!

Если не скопируете токен сразу, придется создавать новый!

Вставьте токен в Tildify

Откройте расширение Tildify в Chrome и вставьте скопированный токен в поле API Key

Токен не работает?

Если при проверке токена возникает ошибка, проверьте эти моменты

Проверьте разрешения токена

Убедитесь, что при создании токена были выбраны оба разрешения:current_user:read иfile_content:read

Проверьте срок действия

Убедитесь, что токен не истек. В Figma можно проверить срок действия в настройках токенов

Создайте новый токен

Если проблема не решается, удалите старый токен и создайте новый с правильными разрешениями

Как пользоваться расширением

Установите расширение

Для работы Tildify необходимо установить расширение из Магазина расширений Chrome

Перед началом работы установите расширение Tildify в ваш браузер Chrome. Это займёт всего несколько секунд.

Установить расширение

Зарегистрируйтесь в Tildify

Создайте бесплатный аккаунт для доступа к функциям расширения

Для использования Tildify необходимо зарегистрироваться. Регистрация бесплатная и займёт меньше минуты. Вы получите доступ к бета-тестированию со всеми возможностями.

Зарегистрироваться

После регистрации и установки расширения вам понадобится получить API токен из Figma

Добавьте Figma API токен

Сохраните токен в расширении для дальнейшего использования

Откройте Tilda Zero Block

Перейдите на страницу редактирования в Zero Block Editor на вашем сайте Tilda

Нажмите на кнопку Tildify

В левом верхнем меню Zero Block появится круглая кнопка с логотипом Tildify

Нажмите "Управление" токенами

В открывшемся окне расширения найдите поле "Figma API токен" и нажмите кнопку "Управление"

Добавьте новый токен

Нажмите "+ Добавить новый токен" и заполните форму:

Название:Например, "Рабочий проект" или "Личные файлы"

Токен:Вставьте скопированный Figma API токен

Сохраните токен

Нажмите "Сохранить" - токен будет добавлен в список и автоматически выбран как активный

Удобно: Вы можете сохранить несколько токенов с разными названиями и быстро переключаться между ними через dropdown

Кнопка Tildify в Zero Block Editor

Интерфейс расширения Tildify в Tilda Zero Block Editor

Импортируйте дизайн из Figma

Перенесите ваш дизайн в Tilda Zero Block

Скопируйте ссылку на Figma фрейм

В Figma выберите нужный фрейм (артборд), кликните правой кнопкой и выберите Copy link или нажмитеCmd/Ctrl + L

Пример ссылки:

https://www.figma.com/design/abc123/Project?node-id=1-234

Вставьте ссылку в Tildify

В окне расширения вставьте скопированную ссылку в поле "Ссылка на Figma-фрейм"

Выберите токен

Если у вас несколько сохраненных токенов, выберите нужный из dropdown списка

Настройте параметры импорта

При необходимости измените настройки:

Формат изображений: JPG или PNG

Масштаб Retina: 1x, 2x или 3x

Vector as SVG: преобразовать векторы в SVG

Адаптивный дизайн: импорт для разных устройств

Импорт цветов: все, со стилей или не импортировать

Нажмите "Импортировать"

Дождитесь завершения процесса импорта. Tildify покажет прогресс и результат

Важно во время импорта: Не закрывайте и не сворачивайте вкладку. Это может повлиять на скорость и результаты импорта.

После импорта: Обязательно сохраните изменения и обновите страницу Zero Block для корректного отображения.

Управляйте токенами

Добавляйте, редактируйте и удаляйте сохраненные токены

Добавить

Сохраните несколько токенов для разных проектов или клиентов

Редактировать

Измените название или обновите значение токена в любой момент

Удалить

Безопасно удалите токен, если он больше не нужен или скомпрометирован

Подсказка: Называйте токены по названиям проектов или клиентов для удобной навигации (например, "Проект A", "Клиент Б", "Личные файлы")

Полезные советы

Первый импорт: Начните с простого фрейма, чтобы познакомиться с процессом

Токен всегда под рукой: После добавления токена вам не нужно вводить его каждый раз

Безопасность: Токены хранятся локально в браузере и не передаются на сторонние серверы

Множество проектов: Сохраните токены для всех ваших проектов и переключайтесь между ними одним кликом

Режим одиночного артборда

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

Правила для одиночного артборда

Минимальные требования для успешного импорта

Ширина артборда от 320px

Минимальная ширина для корректного отображения

Поддерживаемые типы элементов

TEXT, RECTANGLE, FRAME, BUTTON, LINE и другие

Корректные размеры элементов

Элементы не должны иметь нулевые размеры

Вложенность до 5 уровней

Рекомендуется не более 5 уровней вложенности (можно и больше, но инструментами Tilda можно создать только вложенности до 5 уровней, при более высокой вложенности - нельзя сортировать слои перетаскиванием)

Адаптивный дизайн (Responsive)

ВАЖНО: Все артборды (Desktop, Tablet, Mobile) должны быть объединены в один общий FRAME. Не создавайте отдельные артборды на уровне страницы!

Автоматическое определение: Tildify автоматически определяет режим работы (одиночный артборд или адаптивный) на основе структуры вашего дизайна.

Адаптивная видимость: Элементы могут иметь разную видимость на разных брейкпоинтах! Например, элемент может быть скрыт на Desktop, но показан на Mobile. Tildify автоматически переносит эти настройки в Tilda.

Правильная структура

Все артборды должны быть FRAME с одинаковой структурой

Пример правильной структуры: одинаковые элементы в одинаковом порядке для всех брейкпоинтов

Обязательные правила:

Все артборды - FRAME (не GROUP)

Одинаковые имена слоев между артбордами

Одинаковый порядок (FRAME → FRAME → FRAME)

Одинаковая структура (количество детей, типы)

Одинаковые типы (TEXT → TEXT, FRAME → FRAME)

Частые ошибки:

Разные имена слоев на разных артбордах

Разный порядок элементов

Разные типы элементов (TEXT ≠ RECTANGLE)

Отсутствующие слои на некоторых артбордах

Несовпадение AutoLayout (есть/нет)

Desktop

Обычно 1200-1920px

Основной артборд

Tablet

Обычно 768-1024px

Средний экран

Mobile

Обычно 320-480px

Мобильный

Используйте Tildify Validator

Проверьте вашу адаптивную структуру перед импортом

Tildify Validator - это бесплатный плагин для Figma, который автоматически проверяет соблюдение всех правил для адаптивного импорта.

Что проверяет:

Одинаковые имена слоев между артбордами

Правильный порядок элементов

Совпадение типов элементов

Глубину вложенности (опционально)

Автоматические исправления:

Синхронизация порядка слоев одним кликом

Быстрое переименование элементов

Навигация к проблемным элементам

Узнать больше о валидаторе

Специальные теги (указатели)

Добавьте теги в имя слоя для контроля экспорта. Например: "Hero Banner [img]" или "Logo [svg]"

[img] - Принудительный экспорт как изображение

Применяется к любому FRAME, GROUP, INSTANCE

Весь элемент со всеми детьми рендерится в одно изображение

Примеры:

"Hero Section [img]" → одно изображение всей секции

"Complex Card [img] [png|3]" → PNG изображение в 3x качестве

Используйте для сложных композиций с множеством деталей

[svg] или [vector] - Экспорт в SVG

Для иконок, логотипов, векторных иллюстраций

Экспортирует элемент как масштабируемую векторную графику

Примеры:

"Logo Icon [svg]" → SVG-картинка

"Arrow [vector]" → VECTOR объект

Бесконечная масштабируемость

Маленький размер файла

Четкость на любом разрешении

[shape], [shape-svg] - Содержимое как фон шейпа 🆕

Для карточек, баннеров, сложных элементов UI

Все содержимое рендерится в изображение или SVG и устанавливается как background шейпа

Как работает:

Все содержимое (текст, иконки, изображения) → рендер в одно изображение/SVG
Создается Shape в Tilda
Изображение/SVG устанавливается как background-image
Сохраняются свойства шейпа: border-radius, stroke, shadows

Можно изменять размеры в Tilda

Можно менять скругления, тени, обводку

Работает с адаптивом - разные размеры на разных экранах

Примеры:

"Product Card [shape]" → Shape с растровым изображением карточки как фон

"Icon Container [shape-svg]" → Shape с SVG иконкой как фон

[shape] - растровое изображение (PNG/JPG)
[shape-svg] - векторное изображение (SVG)

[png|X] и [jpg|X] - Формат и масштаб

Контроль качества изображений и Retina поддержка

Форматы:

pngPNG с прозрачностью

jpgJPG (меньший размер)

Масштабы:

1xОбычное качество

2xRetina (рекомендуется)

3xВысокая четкость

Примеры:

"Hero Image [jpg|2]" → JPG, 2x масштаб

"Logo [png|3]" → PNG с прозрачностью, 3x

"Icon [png]" → PNG, текущий масштаб из настроек

[orig] - Использовать оригинальные Figma URL

Полный доступ к параметрам Crop изображения из Figma

Изображения НЕ загружаются в Tilda CDN, используются прямые ссылки на Figma. Изображение можно и НУЖНО загрузить в Tilda после импорта в панели настройки изображения. При этом изображение сохранится в оригинальном размере и формате из Figma с настраиваемыми параметрами фона (масштабирование и расположение)

Ссылки Figma временные (истекают через ~30 дней).

Пример:

"Test Image [orig]" → URL: https://s3-alpha.figma.com/...

button - Создать кнопку Tilda

Преобразует элемент в интерактивную кнопку Tilda

Group, Frame, AutoLayout с "button" в названии (регистр не важен) автоматически создается как кнопка.

Примеры:

"CTA Button" → Интерактивная кнопка

"Menu Item Button" → Кнопка меню

"Social Link Button" → Кнопка социальной сети

Советы и best practices

Для дизайнеров

Именуйте слои понятно

"hero_title", а не "Rectangle 123"

Соблюдайте порядок

Одинаковый порядок на всех артбордах

Используйте AutoLayout

Он отлично конвертируется в Flexbox

Проверяйте перед экспортом

Запускайте Tildify Validator

Используйте теги

[shape], [shape-svg], [img], [svg] для контроля

Разделяйте на блоки

Импортируйте header, footer, секции отдельно

Для разработчиков

Включайте Vector as SVG

Для иконок и логотипов

Используйте Retina 2x

Для четкости на современных экранах

Донастраивайте в Tilda

Можно редактировать после импорта