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

Поддерживаемые объекты Figma

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

Базовые элементы

TEXT
Текстовые элементы

Любой текст с полным сохранением форматирования

Текст, стили, форматирование
Шрифт, цвет, размер
Тип текстового поля (Fixed, AutoHeight, AutoWidth)
Выравнивание и кернинг
→ Text Element
RECTANGLE
Прямоугольники

Прямоугольные формы с полной поддержкой стилей

Размер, цвет, скругления
Обводка, тени, градиенты
Индивидуальные углы
Эффекты размытия
→ Shape
ELLIPSE
Круги и эллипсы

Круглые формы с сохранением всех эффектов

Размеры (width, height)
Заливка (solid, gradient)
Обводка, тени, эффекты
→ Shape
IMAGE
Растровые изображения

Любые изображения с умной обработкой

PNG, JPG, SVG форматы
Image Transform (scale, crop)
Тип Image или Shape с фоновой картинкой
Retina масштабирование
→ Image/Shape Element

Цвета и сетки (Layout Guides)

Цветовая палитра
Автоматический импорт цветов в Tilda
Импорт палитры фрейма
Импорт стилей из фрейма
Сохраненная палитра Tilda поддерживает до 22 цветов
→ Saved Colors
Layout Guides (Сетки)
Автоматический перенос настроек сетки из Figma
Импорт параметров колонок (count, width, gutter, margins)
Автоматический расчет ширины контейнера
Перенос цвета и прозрачности сетки
Поддержка адаптивных сеток для каждого breakpoint
Импортируются только видимые сетки типа Columns типа Stretch. Настройки сеток применяются для текущего блока.
COLUMNS only

Контейнеры

GROUP
Группы элементов

Группировка с сохранением иерархии

Позиционирование
Вложенность
Сохранение иерархии
Masks и clipping (обработка как Image)
→ Group
FRAME (обычный)
Фреймы без AutoLayout

Контейнеры с background и border

Позиционирование детей
Background (заливка, изображение)
Border и Border Radius
Пустой Frame - как Shape с заливкой или картинкой
→ Group или Shape
FRAME с AutoLayout 🔥
Фреймы с AutoLayout - полная поддержка Flexbox

Все параметры AutoLayout автоматически конвертируются в Flexbox параметры Tilda

Направление и выравнивание:

layoutMode → flex-direction
primaryAxisAlignItems → justify-content
counterAxisAlignItems → align-items
layoutWrap → flex-wrap

Отступы и размеры:

itemSpacing → gap
padding → padding-*
HUG/FILL
FIXED

Позиционирование элемента:

Абсолютное позиционирование
Абсолютное позиционирование работает корректно, если автолэйаут c абсолютным элементом не в группе или не в автолэйауте — особенности Tilda
→ Flex Container

Векторная графика

VECTOR

Любые векторные объекты

Полная векторная геометрия
Экспорт в SVG/Vector/PNG/JPG
→ SVG/Vector Element
POLYGON

Многоугольники

Полная векторная геометрия
Экспорт в SVG/Vector/PNG/JPG
→ SVG/Vector Element
STAR

Звезды

Полная векторная геометрия
Экспорт в SVG/Vector/PNG/JPG
→ SVG/Vector Element

Специальные случаи

Mask Groups (Группы с масками)
Автоматическая обработка масок

Как обрабатывается:

  1. Вся группа экспортируется как одно изображение
  2. Применяется маска
  3. Сохраняются эффекты
→ Shape with Image
Auto-Button Detection (Автоматические кнопки)
Слои с "button" в названии

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

Примеры:

"Submit button" → Button
"CTA Button" → Button
"button_primary" → Button
→ Button Element

Адаптивная видимость 🔥

Адаптивная видимость элементов
Элементы могут быть скрыты или показаны на разных брейкпоинтах

В адаптивном режиме Tildify автоматически анализирует видимость каждого элемента на всех брейкпоинтах (Mobile, Tablet, Desktop) и переносит эти настройки в Tilda.

Пример использования:

• Элемент видим на Mobile (340px) → скрыт на Desktop (1200px)
• Кнопка показывается только на Tablet (640px)
• SVG иконка скрыта на Desktop, видима на Mobile

✨ Важная особенность:

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

Работает в режиме "Responsive"

Что передается из Figma в Tilda

Позиционирование
Абсолютные координаты (left, top)
Размеры (width, height)
Поворот - в процессе разработки
Настройки праметров AutoLayout
Стили
Цвета
Градиенты (linear, radial)
Комбинированная прозрачность
Радиусы углов
Тени
Текстовые стили
Название шрифта
Размер шрифта
Жирность шрифта
Межстрочный интервал
Кернинг
Эффекты
Layer Blur
Background Blur
Настройки сеток
Настройки видимости