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

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

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

Оглавление

Как работать с плагином Tildify Validator

Tildify Validator — это бесплатный плагин для Figma, который проверяет структуру дизайна, сжимает изображения и экспортирует данные для импорта в Tilda Zero Block. Получите уникальный ID импорта за секунды!

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

Установите плагин и подготовьте дизайн к импорту

Установите плагин Tildify Validator

Откройте Figma, перейдите в Plugins → Manage plugins... и найдите Tildify Validator. Установите плагин из Figma Community.

Или установите напрямую:

Установить плагин в Figma

Запустите плагин в вашем файле Figma

Откройте ваш файл Figma, выберите нужный фрейм (артборд) и запустите плагин через меню Plugins → Tildify Validator.

Интерфейс плагина Tildify Validator в Figma

Проверьте структуру дизайна

При запуске плагин автоматически проверит структуру дизайна на соответствие правилам импорта в Tilda и выдаст результат:

Одинаковые имена слоев между артбордами (для адаптивного дизайна)

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

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

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

Исправьте найденные ошибки (если есть)

Если плагин нашел ошибки или предупреждения, вы можете исправить их:

Автоматическое исправление:Используйте кнопки плагина для синхронизации порядка слоев между артбордами одним кликом

Ручное исправление:Исправьте ошибки вручную в Figma, используя подсказки плагина. Плагин может навигировать к проблемным элементам

Совет: Критические ошибки (❌) необходимо исправить перед подготовкой к импорту. Предупреждения (⚠️) не критичны, но их исправление улучшит результат импорта.

Подготовьте дизайн к импорту

Нажмите кнопку Экспорт дизайна. Плагин автоматически:

Сжимает изображения до 80% без видимой потери качества

Экспортирует данные для импорта: стили, SVG, изображения

Выдает уникальный ID импорта для быстрого импорта через расширение

Результат подготовки дизайна в Tildify Validator

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

Скопируйте ID импорта

После завершения подготовки плагин покажет уникальный ID импорта. Скопируйте его — он понадобится для импорта в Tilda через расширение.

ID импорта выглядит так:

8j3jm4e674q89frhpmn3vr

Подготовка дизайна к импорту в Tildify Validator

Что проверяет плагин

Детальное описание проверок и ошибок, которые находит Tildify Validator

Критические ошибки — необходимо исправить

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

Слои должны иметь одинаковые имена на всех артбордах

Разный порядок слоев

Порядок элементов должен совпадать (header → content → footer)

Разные типы элементов

TEXT должен быть TEXT, RECTANGLE должен быть RECTANGLE

Отсутствующие слои

Все слои должны присутствовать на всех артбордах

Экспорт стилей отдельно

Импортируйте стили из Figma без валидации дизайна

Вы можете экспортировать только стили (цветовые и текстовые) из любого файла Figma без необходимости валидировать структуру дизайна.

Откройте любой файл Figma

Вы можете экспортировать стили из любого файла Figma, где есть текстовые и цветовые стили (Paint Styles и Text Styles).

Запустите плагин и нажмите «Экспорт стилей»

В плагине Tildify Validator нажмите кнопку Экспорт стилей. Плагин соберет все стили из файла и подготовит их для импорта.

Получите ID импорта стилей

После завершения экспорта плагин покажет уникальный ID импорта для стилей. Скопируйте его.

Импортируйте стили в Tilda

Перейдите на страницу настроек проекта (сайта) в Tilda и в разделе «Цвета и стили» импортируйте стили, нажмите ссылку «Импорт стилей из Figma» под кнопкой «Управление стилями», используйте полученный ID импорта.

Что импортируется:

Цветовые стили — только сплошные цвета

Текстовые стили — шрифт, размер, начертание, интервалы

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

Попробуйте Tildify Validator на готовом примере

Откройте наш демонстрационный файл и запустите валидацию, чтобы увидеть плагин в действии

Открыть демонстрационный файл Figma

💡 Подсказка: Выделите корневой FRAME "Tildify Demo" и запустите Tildify Validator, чтобы увидеть все возможности плагина

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

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

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

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

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

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

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

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

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

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

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

Перенесите ваш дизайн в Tilda Zero Block используя ID импорта

Откройте Tilda Zero Block

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

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

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

Вставьте ID импорта

В окне расширения вставьте скопированный ID импорта из плагина Tildify Validator в поле ID импорта

Пример ID импорта:

8j3jm4e674q89frhpmn3vr

Кнопка Tildify в Zero Block Editor

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

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

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

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

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

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

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

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

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

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

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

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

Безопасность: Данные подготовлены и загружены в безопасное хранилище, доступное только по ID

Множество проектов: Подготавливайте дизайны в плагине для всех ваших проектов и импортируйте их одним кликом

Режим буфера обмена

Режим буфера обмена позволяет импортировать элементы из Figma в Tilda одним кликом. Просто скопируйте элементы в плагине и вставьте их прямо в Tilda — никаких промежуточных шагов!

Как работает режим буфера

Импорт элементов одним кликом через буфер обмена

В плагине получите Buffer ID

В плагине Tildify Validator перейдите в режим Буфера обмена с Tilda. Плагин автоматически выдаст Buffer ID.

Buffer ID выглядит так:

cb_6nyqbvsdsd6phjevbh7rz

Этот ID уникален для каждого набора скопированных элементов.

В расширении Tildify в Chrome укажите его в окне настроек

В Tilda Zero Block нажмите на кнопку настроек Tildify («шестеренка»). Вставьте полученный Buffer ID в поле настроек и сохраните.

Важно: Buffer ID нужно настроить только один раз. Он сохраняется в настройках расширения и используется для всех последующих вставок из буфера.

Скопируйте элементы в Figma

Выделите нужные элементы на артборде в Figma и скопируйте через кнопку плагина «Скопировать»). Элементы будут сохранены в буфере с привязкой к настроенному Buffer ID.

Вставьте элементы в Tilda

В Tilda Zero Block просто нажмите кнопку Вставить из буфера. Элементы будут вставлены мгновенно с сохранением всех стилей, позиций и структуры.

Автоматическая загрузка изображений — все изображения загружаются в Tilda CDN автоматически

Связывание стилей — цвета и текстовые стили автоматически связываются с глобальными стилями проекта

Сохранение структуры — полное сохранение иерархии и позиционирования элементов

Настройки координат

Управление позиционированием элементов при вставке

Координаты из артборда в Figma

Если опция включена, объекты вставляются в те же координаты, что и в Figma артборде. Это позволяет точно позиционировать элементы относительно друг друга.

Нормализация координат

Если опция отключена, объекты вставляются в видимую область относительно точки с координатами (300, 300). Это удобно для быстрого размещения элементов в видимой области редактора.

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

Преимущества режима буфера

Почему режим буфера обмена — это киллер-фича

Мгновенная вставка

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

Множественные вставки

Можно вставлять одни и те же элементы многократно

Сохранение стилей

Автоматическое связывание с глобальными стилями проекта

Быстрая итерация

Идеально для добавления повторяющихся элементов и быстрых правок

Идеально для: Быстрого добавления повторяющихся элементов (кнопки, карточки, блоки), итеративной работы над дизайном, добавления отдельных компонентов без полного импорта всего артборда.

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

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

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

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

Ширина артборда от 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»

Формы Tilda 🔥

Tildify автоматически распознает и экспортирует формы из Figma в Tilda Zero Block с сохранением всех полей, стилей и кнопок.

Как создать форму

Пошаговая инструкция по созданию формы в Figma

Шаг 1: Создайте группу формы

Сгруппируйте все элементы формы (поля, кнопку, заголовки)
Задайте группе тег [form]
Пример: Contact Form [form]

Шаг 2: Создайте группы с полями

Внутри группы [form] создайте отдельные группы для каждого поля
Каждая группа поля должна содержать: заголовок (текст), плейсхолдер (текст) и шейп (RECTANGLE/LINE для визуального оформления)
Задайте группам полей соответствующие теги
Пример: Email Field [email]

Важно для чекбоксов и радиокнопок: Если у вас несколько чекбоксов или радиокнопок, сгруппируйте их в одну родительскую группу и задайте тег [checkboxes] или [radiobuttons] именно родительской группе, а не отдельным элементам.

Шаг 3: Добавьте кнопку формы

Создайте кнопку внутри группы [form]
В названии кнопки должно быть слово "button" (регистр не важен)
Пример: Submit Button или Send [button]

Типы полей формы

Полный список поддерживаемых типов полей

Основные поля:

[input] или [in] — Текстовое поле

[email] или [em] — Email поле

[phone] или [ph] — Телефон с маской

[name] или [nm] — Имя

[textarea] или [ta] — Многострочный текст

[url] или [ur] — URL поле

Списки и выбор:

[select] или [sb] — Выпадающий список

[radio], [rd] или [radiobuttons] — Группа радиокнопок (одиночный выбор)

Тег задается родительской группе, содержащей несколько радиокнопок

[checkbox] или [cb] — Одиночный чекбокс

[checkboxes] — Список чекбоксов (множественный выбор)

Тег задается родительской группе, содержащей несколько чекбоксов

Интеллектуальные возможности

Автоматические функции Tildify для работы с формами

Автоматическое определение типа поля — плагин анализирует текст заголовка и плейсхолдера для определения типа (email, телефон, имя и т.д.)

Автоматический расчет ширины — ширина полей в сетке (1/2, 1/3, 1/4) рассчитывается автоматически

Автоматическое определение расположения — вертикальное или горизонтальное размещение полей определяется автоматически

Извлечение стилей — все стили полей, заголовков, ошибок и кнопки автоматически извлекаются из Figma

💡 Совет: Используйте AutoLayout для формы — это гарантирует идеальные отступы между полями.

Для телефона всегда автоматически включается маска «С автоматическим определением страны» (с флагами).

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

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

«Присвоить теги» — быстрый способ назначить теги

Автоматизируйте префиксы и указатели прямо в плагине

В плагине есть инструмент «Присвоить теги», который позволяет мгновенно добавлять теги вроде [img], [svg], [shape] к любому выделению. Выберите элементы, нажмите нужный тег и плагин автоматически переименует слои, сохранив исходные названия.

Работает с несколькими слоями и вложенными группами
Защита от дублирования: повторно тег не добавится
Можно быстро удалить все теги через ту же панель

Панель с быстрыми кнопками тегов в Tildify Validator

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

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

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

Примеры:

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

"Complex Card [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] - растровое изображение (WebP, PNG/JPG)
[shape-svg] - векторное изображение (SVG)

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

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

Форматы:

webpнаилучшее сжатие, поддержка прозрачности

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" → Кнопка социальной сети

Кнопка с состоянием Hover

Для создания кнопки с эффектом при наведении (Hover) используйте Component Set (Variants) в Figma:

Создайте Component Set (Variants)

Создайте Component Set в Figma и добавьте в него два варианта: Normal и Hover

Настройте варианты

В варианте Normal — обычное состояние кнопки. В варианте Hover — измените цвет фона, цвет текста, иконку или другие свойства для эффекта при наведении.

Используйте в дизайне

Разместите Instance из Component Set на артборде. Назовите его с "button" в имени (например, "CTA Button"). При импорте в Tilda кнопка автоматически получит состояние Hover.

Создание кнопки с Hover состоянием в Figma

Component Set с вариантами Normal и Hover для кнопки

Важно: Убедитесь, что вариант Hover содержит слово "Hover" в названии или в свойствах варианта. Это необходимо для корректного определения состояния при импорте.

Советы и best practices

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

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

"hero_title", а не "Rectangle 123"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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