Tildify – Импорт дизайна из Figma в Tilda

🚀 Вышел Tildify 3.0 — перенос сайтов в Tilda Vibe Block

Теперь можно открыть готовый сайт или результат работы ИИ-генератора прямо в браузере, выбрать отдельный блок или всю страницу и перенести результат в Vibe Block.

Тестировалось на GPT Sites, Claude (шаблоны claudecms.com), Figma Make, Lovable, V0 и других генераторах.

Расширение подготовит HTML, CSS и JavaScript для вставки, а после переноса поможет связать дизайн с возможностями Tilda.

Краткий обзор возможностей в приложенном видео. 👆

⭐️В функционале Vibe Block было добавлено:

🛠 Новые инструменты редактора
Прямо в Vibe Block теперь можно:
— независимо дублировать элементы вместе с вложенной структурой (копия получает уникальный стиль и ее редактирование не влияет на родителя);
— отделять стиль выбранного элемента от похожих;
— оборачивать элементы в новые контейнеры;
— переключать макет между Block, Flex и Grid;
— добавлять заголовки, текст, изображения, кнопки, контейнеры и разделители.

📝 Редактор форм
Перенесённая форма становится полноценной формой Tilda и работает с её приёмщиками заявок. Добавдена возможность редактирования форм внутри вайб-блока.
Для каждого поля можно настроить:
— подпись и placeholder;
— имя переменной;
— обязательность;
— тип проверки;
— собственный попап или переход на страницу после отправки.

🛍 Каталог Tilda
Перенесённый дизайн можно подключить к каталогу Tilda. Карточки остаются в вашем дизайне, а данные загружаются из Tilda.
После переноса карточку можно настраивать на свой вкус — менять дизайн, добавлять новые поля и связывать их с данными из каталога.
Поддерживается перенос служебных блоков каталога (пагинация, поиск, фильтры, разделы). При импорте подключается тестовый каталог Тильды (источник можно изменить в настройках). Просмотр товара можно подключить к стандартным попапам просмотра товара Tilda.

📰 Потоки Tilda
Шаблон карточек с любого сайта можно превратить в шаблон публикации потока. Заголовки, текст, даты, изображения, разделы, ссылки и пользовательские поля будут подставляться автоматически.
Также поддерживаются разделы потока, галереи, пагинация и повторяющиеся значения Просмотр статьи можно подключить к стандартным попапам просмотра потока Tilda.

🖼 Загрузка изображений
Внешние картинки можно сохранить непосредственно в хранилище Tilda:
— загрузить только выбранное изображение;
— перенести сразу все изображения блока.
После этого блок больше не зависит от файлов исходного сайта.

————————————-
Что важно учитывать
Vibe Block принимает не более 150 000 байт кода (добавлен счетчик кода в интерфейсе).
Большие страницы лучше переносить отдельными логическими секциями.

Tildify хорошо переносит готовую HTML-разметку, стили и обычный JavaScript. Но сложную логику сайтов на React, Next.js, Vue и других фреймворках не всегда можно извлечь из собранного приложения. Внешний вид такого блока перенесётся, а интерактив, завязанный на компоненты, состояние приложения, API или сборочные модули, может потребовать отдельной реализации.

В подробной инструкции можно найти дополнительный промпт, чтобы генераторы сайтов следовали правилам генерации для последующего легкого переноса сайта в Tilda.

Функционал в бета-тесте и бесплатен, далее будет доступен без ограничений по подписке!
Надеюсь на вашу обратную связь чтобы сделать функционал стабильнее и удобнее! ❤️

📖 Подробная инструкция и видео-инструкция:
https://tildify.ru/ai-to-vibe-block

PS. Если обновление еще не пришло автоматически, расширение можно обновить в настройках расширения в Хром.

Привет!

Небольшое, но полезное обновление плагина Tildify Validator до версии 3.8 🚀

🎨 Добавил корректный перенос обводки текста из Figma в Tilda с сохранением цвета, толщины и типа расположения обводки.

🖼 Также теперь поддерживается разная толщина рамки (🔥новая возможность Тильды) для каждой стороны у фигур, изображений, кнопок и Flex-групп.

📋 Все новые свойства работают как при обычном экспорте, так и при копировании элементов через буфер Tildify.

ANNEXX x Tildify
Если дорогие вы рисуете в Фигме, верстаете в Тильде.

Как ненасильственно совершить акт миграции Figma → Tilda?

Это один из тех привычных вопросов в Службу заботы, которые как-то связаны с Тильдой, но не очень связаны с ANNEXX.

Дабы не плодить однотипные ответы, мы набрались наглости совершить акт ненасильственного совместного тарифа с Tildify. Это чуваки, которые хорошо сочленяют макеты из Фигмы или ИИ-генераторов с Zero-блоком Тильды.

Одна тысяча рублей за оба инструмента (Tildify + ANNEXX).

После оплаты перейдите на https://app.tildify.ru/auth/ и введите электропочту, которая зарегана в ANNEXX. В нее доставят код авторизации.

--

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

Аминь.

Привет! Небольшие обновления плагина и расширения.

🚀 Tildify Validator 3.7

Добавил возможность передавать ошибки валидатора для адаптивной структуры (несколько артбордов в режиме "структура") AI-агенту.
Плагин собирает готовый промпт с ошибками, ID артбордов и слоёв, уровнями риска и инструкциями по безопасному исправлению.

Его можно использовать во встроенном агенте Figma или в любом AI-агенте (ChatGPT, Clode и другие), подключённом через Figma MCP.

Хорошее подспорье, когда сложно разобраться в структуре слоев. Тестировал на Figma Agent, ChatGPT, Clode.

Что ещё нового:
— экспорт подчёркнутого и зачёркнутого текста;
— новые настройки для чекбоксов (толщина и закругление теперь передаются в настройки форм)
— поддержка подписей под полями формы;
— кнопки формы на всю ширину (если кнопка была на всю ширину формы);
— название экспортированного фрейма в блоке «Последний импорт».

В расширении:
— улучшен захват и эвристика страниц, сгенерированных ИИ;
— добавлена возможность захвата страниц из препросмотра Clode;
— по просьбе пользователей убрал из окна расширение последний ID импорта, чтобы не приходилось его постоянно удалять перед импортом;

В ближайшее время будут изменены лимиты на бесплатном тарифе.

Спасибо, что остаетесь с проектом! Многие улучшения делаются благодаря вашей обратной связи. ❤️

Всем привет!

Обновил расширение до версии 2.2.0 и плагин до версии 3.6.

🖼 Новая функция в Tildify: импорт галерей из Figma в Tilda

Теперь можно собрать галерею прямо в Figma и перенести ее в Tilda как объект Tilda Gallery.

Как работает:
🔹 Создайте группу или фрейм.
🔹 Поместите внутрь изображения (можно стопкой друг над другом).
🔹 Добавьте в название контейнера тег [tilda-gallery]. (Новый тег добавил в таггер в плагине.)
🔹 Экспортируйте или скопируйте через Figma-буфер.

Tildify сам соберет изображения, сожмет, загрузит их и передаст в Tilda уже как галерею ✨

Что поддерживается:
🔹 адаптив;
🔹 обычные image-слои;
🔹 фреймы с растровой заливкой;
🔹 элементы с тегами изображений, например [img] или [png|2];

Добавил отдельную настройку масштаба изображений для Tilda Gallery, чтобы можно было управлять качеством картинок независимо от общего Retina-масштаба. Это необходимо, если при клике на галерею изображение открывалось в полный размер.

Пробуйте на реальных галереях и пишите, если увидите кейсы, которые стоит улучшить.

🚀 Обновление Tildify Validator 3.5

Добавил экспорт анимаций из Figma Motion (новая функция Figma) в Tilda SBS 🎬

Теперь при переносе макета в Tilda можно сохранить базовые Motion-анимации из Figma:
✨ перемещение
✨ масштаб
✨ прозрачность
✨ поворот
✨ задержки и длительность
✨ easing-кривые, включая custom cubic-bezier

В настройках экспорта появилась новая опция:
✅ «Экспорт анимации Figma Motion»

Она включена по умолчанию. Если нужен только статический макет — можно отключить.

Также добавил предупреждения на этапе проверки макета: теперь Tildify заранее покажет, какие Motion-свойства не поддерживаются или будут перенесены приближённо 🔍

Важно: в режиме «Плоское дерево» Motion-анимации не экспортируются, чтобы не создавать некорректные SBS-анимации после разгруппировки структуры.

Обновляйтесь (перезапустите фигму) и тестируйте ✨

Всем привет!

Небольшая новая функция в расширении (напрашивалась давно): вставка изображений в Zero Block прямо из системного буфера обмена.

Теперь можно скопировать картинку из браузера, Figma (как Png или SVG) или другого источника и вставить ее в Zero Block через Ctrl/Cmd + V.

Расширение само определит изображение, подготовит файл, оптимизирует (сожмёт), загрузит его в Tilda и добавит на страницу как обычный image-элемент.

Что поддерживается:
✅ растровые изображения
✅ SVG из Figma
✅ SVG-картинки, если браузер передает их как ссылку или текст
✅ настройка формата и качества растра: WebP, JPEG или PNG

При этом штатная вставка Tilda и импорт элементов из Figma не ломаются: если в буфере не картинка, управление передается стандартному обработчику Tilda.

🚀 Обновление уже можно тестировать в расширении.

Всем привет!

🚀 Большое обновление расширения Tildify 2.0.0

Теперь Tildify переносит в Zero Block не только макеты из Figma, но и Тильда Vibe-блоки, а также сайты, созданные в ИИ-генераторах, таких как Figma Make, Lovable, Vercel V0 (тестировал на них) и другие. Впрочем как и любые Html-блоки (если сайт на React и подобных фреймворках).

Что добавил:

📱 Перенос адаптивов
Можно импортировать несколько версий макета под разные ширины экрана. Tildify сохраняет структуру и значения для нужных разрешений, чтобы после импорта было меньше ручной настройки в Zero Block.

🖱 Hover-состояния кнопок и групп
Расширение считывает состояния при наведении и переносит их в Tilda. Это полезно для кнопок и интерактивных групп.

✨ SBS-анимация при наведении
Для элементов с hover-эффектами Tildify может создавать поведение через step-by-step анимации в Zero Block. Так переносится не только внешний вид, но и часть интерактива.

📝 Перенос форм 🔥🔥
Формы импортируются с полями, кнопками и базовой структурой сразу в виде zero-форм. Можно перенести форму в Zero Block и дальше настроить ее уже средствами Tilda.

🎨 Иконки Font Awesome и Lucide
Поддержка переноса популярных иконок из Font Awesome и Lucide. Это помогает сохранить визуальные детали интерфейса без ручной пересборки иконок после импорта.

Важно: при захвате блоков из Lovable и Vercel страницу лучше предварительно опубликовать, чтобы она была публично доступна. Так Tildify сможет корректно получить изображения и другие внешние ресурсы.

При переносе сложных grid-макетов, может не всегда корректно переносится структура карточек. Иногда нужно настроить флексы вручную после импорта.

Проверил на десятке ИИ-сайтов.

Новый функционал пока в бете (на период отладки, так как разные ИИ имеют свои особенности). Импорты не учитываются в лимитах на бесплатном аккаунте.

Если что-то будет переносится не корректно — пишите в поддержку, постараюсь оперативно вносить изменения и улучшения.

🔗 Инструкция по импорту из ИИ-генераторов: https://tildify.ru/ai-to-tilda

Друзья, привет! Небольшая, но довольно важная правка браузерного расширения (обновлено до версии 1.0.5).

Если в макете использовался шрифт с пробелами в названии, то при добавлении такого шрифта в Тильду, пробелы в названии схлопываются (если используется встроенный шрифт с пробелами Тильды или шрифт из Google Fonts, такого не происходит). В результате, если в макете был шрифт, например, "SF Pro Text", то при добавлении в Тильду он становится "SFProText", из-за этого элементы при импорте становились с нераспознанным шрифтом.

Добавил защиту, теперь при импорте (а также вставке из буфера или импорте стилей) шрифт будет корректно сопоставлен со шрифтом, который добавлен в Тильду.

Спасибо за обратную связь Михаилу (@dubastudio)

Друзья, привет!

Иногда при импорте возникает ошибка Too much data, когда импортируемый блок слишком большой по структуре (много элементов или сложная структура).

В плагине добавил метрику веса блока, с блокировкой, если блок слишком большой и точно не сохранится в Тильде. Метрика появляется после результата экспорта.

По метрике можно судить, на сколько перевес, чтобы понять все ли безнадежно или можно что-то предпринять.

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

Друзья, привет!

Добавил новый элемент в Tildify Elements: модуль сравнения (Было/Стало) для Tilda Zero Block.

Теперь можно собирать блоки формата «было/стало», сравнение дизайнов, интерфейсов, фото и любых двух состояний в одном экране. Поддерживает полноэкранный формат и выравнивание по window (в Автолэйаут-режиме артборда)

Поддерживается сравнение как одиночных изображений или шейпов, так и групп.

Поддерживается перетаскивание ручки, hover-режим (автоследование за курсором) и несколько независимых модулей в одном блоке.

Как обычно все параметры доступны через панель управления Tildify Elements.

Инструкция и примеры уже на сайте: https://elements.tildify.ru/compare

Также по вашим просьбам немного изменил раздел стилизации для кнопок Табов, теперь можно выбирать какое состояние использовать для активных табов - состояние при наведении в Тильде или свои стили (тогда ховер Тильды сохраняет свое действие для кнопок), отдельно от текста доступна опция для цвета иконки в кнопке таба.

Всем привет!

Немного обновил браузерное расширение.

В настройках элементов библиотеки добавлена опция Провайдер Tildify Elements.

Можно выбрать откуда будут подгружаться скрипты библиотеки - с Yandex Cloud (удобно для RU-сегмента), или с Cloudflare (удобно для иностранного сегмента).

В Авто-режиме сначала будет попытка загрузить с Яндекса, при неуспешной попытке - с Cloudflare.

P.S. Если на странице разные провайдеры, то будет использоваться первый удачно загрузившийся скрипт.

Друзья, привет!

Бета-тест Tildify подходит к концу. И это было очень круто — спасибо каждому, кто пробовал, писал фидбек и помогал становиться лучше ❤️

За это время мы вместе сделали:
— более 65 000 успешных переносов из Figma (импорт и буфер)
— сэкономили реально тысячи часов времени работы (и нервов)

Тарифы с 4 мая:
🆓Free — бесплатный тариф. 20 импортов в месяц + весь функционал (библиотека элементов, компоненты, неограниченный импорт стилей)

🥇Pro — 550 ₽/мес. — безлимитные импорты и всё остальное (доступен уже сейчас).

Не останавливаюсь и уже готовлю новые улучшения 🚀

Спасибо, что остаётесь с проектом! ❤️

Всем привет!

Небольшое обновление расширение Расширения и Библиотеки элементов.

🎨 1. Вернул ссылку для импорта стилей в настройках сайта (после обновления Тильды, она потерялась, спасибо Михаилу (@dubastudio), что заметил и написал)

⏰ 2. Новый элемент в Tildify Elements: Таймер

Сделал универсальный таймер для Tilda Zero Block. Теперь можно не только запускать классический обратный отсчет до даты, но и показывать, сколько прошло с нужного момента: например, сколько лет вы на рынке, сколько длится проект или сколько времени прошло с запуска продукта.

Что можно собрать:

✅ обратный отсчет до даты и времени
✅ таймер на фиксированный интервал
✅ режим «прошло с даты»
✅ часы с часовыми поясами
✅ запуск сразу, при появлении блока или по клику (или стоп по клику)
✅ показ и скрытие элементов по состоянию таймера
✅ текстовые шаблоны прямо внутри текста
✅ прогресс-бары и проценты
✅ сохранение состояния для каждого пользователя

То есть один элемент закрывает сразу много сценариев: акции, дедлайны, анонсы, и тд.

Посмотреть вживую:
https://elements.tildify.ru/timer

Если хотите добавить такой элемент к себе в проект, можно взять готовые примеры со страницы и быстро адаптировать под свой Zero Block (через импорт блока по ID со страницы примеров).

Привет! Добавил в движок слайдера Tildify Elements пятый режим для точек - "Превью слайдов". Подойдет для слайдера-галереи с 1 видимым слайдом.

Просто создайте свои превью в контейнере с классом tf_slider-dots (добавил новый тег в Плагине в Фигме - [slider-thumbs]).

Контейнер с превью картинками можно сделать меньше по ширине, чем количество превьюшек, включить Overflow hidden - превью будут прокручиваться автоматически в контейнере. Можно задать дополнительные стрелки для превью (классы tf_thumbs-next и tf_thumbs-prev)

Как обычно поддерживается экспорт (и копирование через буфер) из Фигмы.

Посмотреть примеры