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

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

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

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

TEXT

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

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

Текст, стили, форматирование

Шрифт, цвет, размер

Тип текстового поля (Fixed, AutoHeight, AutoWidth)

Выравнивание и кернинг

→ Text Element

RECTANGLE

Прямоугольники

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

Размер, цвет, скругления

Обводка, тени, градиенты

Индивидуальные углы

Эффекты размытия

→ Shape

ELLIPSE

Круги и эллипсы

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

Размеры (width, height)

Заливка (solid, gradient)

Обводка, тени, эффекты

→ Shape

IMAGE

Растровые изображения

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

WebP, PNG, JPG, SVG форматы

Image Transform (scale, crop)

Тип Image или Shape с фоновой картинкой

Retina масштабирование

→ Image/Shape Element

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

Цветовая палитра

Автоматический импорт цветов в Tilda

Импорт палитры фрейма

Импорт локальных цветовых стилей из файла Figma

Сохраненная палитра 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 с заливкой или картинкой

Фреймы с отступами (padding)

Раньше фреймы с отступами преобразовывались в группы, которые схлопывались. Теперь Tildify автоматически создает автолэйаут с абсолютным позиционированием объектов внутри фрейма.

Это позволяет полностью сохранить внешний вид элементов дизайна с отступами, включая точное позиционирование дочерних элементов.

→ Group, Shape или Flex Container

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 (Группы с масками)

Автоматическая обработка масок

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

Вся группа экспортируется как одно изображение
Применяется маска
Сохраняются эффекты

→ 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)

Комбинированная прозрачность

Радиусы углов

Тени

Прозрачные цвета заливок

Tilda не поддерживает прозрачные цвета в заливках. Tildify автоматически конвертирует прозрачный цвет в градиент с прозрачностями для сохранения визуального эффекта. Это позволяет сохранить внешний вид элементов с полупрозрачными заливками.

Текстовые стили

Название шрифта

Размер шрифта

Жирность шрифта

Межстрочный интервал

Кернинг

Эффекты

Layer Blur

Background Blur

Настройки сеток

Настройки видимости