Figma перед импортом в Tilda: чек-лист Frame 1200 px, групп и кнопок
Хороший импорт начинается не в Tilda, а в Figma. Плагин может перенести много элементов, но не угадает, какие слои должны стать кнопкой, где заканчивается смысловая группа и какой эффект лучше собрать средствами Zero Block. Подготовленный исходник уменьшает число исправлений и помогает сохранить композицию.
Перед работой проверьте актуальную справку Tilda: требования к импорту могут меняться. В качестве базовой проверки используйте Frame шириной 1200 px, понятные группы и ограниченную вложенность.
Какой Frame создать
Создайте отдельный Frame для одного экрана или логического блока. Задайте ширину 1200 px и убедитесь, что контент не выходит за границы. Длинный лендинг лучше разделить на несколько Frame, чтобы каждый переносился и проверялся отдельно.
Что удалить до экспорта
Спрячьте черновые направляющие, невидимые слои, комментарии, тестовые надписи и дубликаты вариантов. Убедитесь, что в Frame осталась финальная композиция, а не набор скрытых экспериментов.
Как назвать и сгруппировать элементы
Соберите кнопку из формы и текста в одну группу и назовите ее `button`, если это требуется правилами импорта. Для изображений и SVG используйте понятную структуру, чтобы после переноса отличать их от декоративных фигур.
Не делайте глубокую вложенность ради порядка в панели слоев. Tilda предупреждает, что более шести уровней групп могут не импортироваться. Плоская структура обычно проще для адаптации.
Что проверить в автолейауте и отступах
Проверьте направление, расстояния и размеры элементов в автолейауте. Сравните положение заголовка, текста и кнопки при длинной строке. Если композиция держится на случайных координатах, импорт может сохранить картинку, но не логику адаптации.
Отдельно проверьте стили текста, градиенты и фоновые изображения. Эффект, которого нет в Zero Block, может импортироваться как изображение — это влияет на редактируемость и вес страницы.
Как подготовить изображения и фон
Определите, какие изображения должны стать самостоятельными файлами на Tilda. Если после импорта они ссылаются на сервер Figma, загрузите их в настройки элементов. Проверьте разрешение, обрезку, alt и отсутствие скрытых персональных данных в макете.
Не переносите в рабочий проект скриншоты с реальными заявками, телефонами или адресами. Используйте тестовые материалы и заменяйте их перед публикацией.
Чек-лист перед копированием
Проверьте Frame 1200 px, границы, группы, имя кнопки, вложенность, шрифты, изображения, фон, автолейаут и вариант импорта. Сначала импортируйте один тестовый блок, сравните его с исходником и только потом переносите остальные экраны.
