Tildify – Импорт дизайна из Figma в Tilda
192 subscribers
23 photos
7 videos
24 links
Расширение для браузера Chrome по переносу дизайна из Figma в Tilda с максимальной точностью.
https://tildify.ru

Чат поддержки и ваших предложений: t.me/tildify_support
Download Telegram
🚀 Tildify 0.9.8 — Кардинальное обновление архитектуры
Полностью переписана архитектура импорта. Скорость теперь не зависит от сложности макета — только от количества изображений. Даже самые сложные дизайны импортируются за секунды.

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

⚠️ Важно: Это переходная версия. Новый импорт доступен по кнопке "Экспорт в Tilda NEW", старый импорт также остается доступным для обратной совместимости. Позже останется только новый.

ЧТО НОВОГО:

⏰ Импорт за секунды
Кардинально переписана архитектура импорта. Скорость теперь не зависит от сложности макета — только от количества изображений. Даже самые сложные дизайны импортируются за секунды.

⚠️ Не перегружайте макет, Тильда может долго отрисовывать ZeroBlock после обновления страницы после импорта, если в макете много групп и автолэйаутов.

🖥 Улучшена обработка элементов
Значительно улучшена обработка всех типов элементов: фреймов, групп, текста, изображений. Элементы теперь импортируются более точно и корректно.

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

📐 Обработка автолэйаутов-свойств артборда
Добавлена обработка автолэйаут свойств артборда. Если у артборда установлен режим HUG, автоматически включается автовысота в Tilda для корректного отображения контента. Пока только в одиночном импорте, в адаптиве добавлю позже.

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

🔘 Улучшена обработка кнопок
Значительно улучшена обработка кнопок: более точное определение состояний, корректная работа с текстом и стилями, улучшенная поддержка интерактивности.

⚠️ Важно: Если у вас не обновилась версия, перезапустите браузер, или обновите вручную на странице настроек расширений chrome://extensions
Если плагин в Figma версии меньше 2.3, перезапустите Фигму, если у вас приложение, или закройте и откройте вкладку, если в браузере.

#Tildify #Figma #Tilda #Дизайн #Импорт
❤4🔥1🙏1
🚀 Обновление Tildify v0.9.85 + Плагин Tildify Validator 2.45

🔥 РЕЖИМ БУФЕРА ОБМЕНА!

Теперь импорт из Figma в Tilda — это один клик! Копируйте элементы в Figma и вставляйте прямо в Tilda через буфер обмена. Никаких промежуточных шагов — просто копируй и вставляй! ✨Не нужно разбивать дизайн на блоки. Просто выделяйте необходимые блоки, картинки и элементы. Картинки автоматически загружаются в Тильду с параметрами из настроек экспорта (сжатие, формат, ретина). Для работы с буфером необходимо сгенерировать ID буфера в плагине и указать его в настройках расширения. Предусмотрен "мини"-режим интерфейса, чтобы ничего лишнего.

📦 Что ещё нового:

✅ Исправлен баг с импортом стилей в настройки проекта.
Стили нельзя было применить. Теперь текстовые и цветовые стили работают корректно.

✅ Импорт из секции SECTION
Можно импортировать элементы из секций в Figma

✅ Поддержка гиперссылок в тексте
Ссылки из Figma теперь корректно переносятся в Tilda

✅ Глобальные стили проекта применяются при импорте и при работе с буфером
Цветовые и текстовые свойства элементов автоматически связываются с глобальными стилями Tilda при импорте и через буфер обмена (если стили в проект были импортированы заранее)

✅ Улучшена обработка графики
Линии, стрелки, векторы и повернутые объекты теперь импортируются точнее. Поработал с повернутыми объектами. Так как Тильда довольно странно обрабатывает повороты, решил "запекать" повороты на углы кратные 90 градусам. В итоге позиционирование и ширины элементов передаются более точно.


#Tildify #Figma #Tilda #Дизайн #ВебДизайн #Обновление
🔥7❤2👍2
🚀Обновление плагина Tildify Validator v2.47:
Формы уже здесь!

Теперь перенос форм из Figma в Tilda Zero Block стал автоматическим.

🔥 Поддержка ФОРМ
Больше не нужно собирать формы в Тильде вручную. Плагин сделает это за вас:
Умное распознавание: Просто добавьте тег [form] к группе (или фрейму) с формой, и плагин поймет, что это форма.
Интеллектуальный маппинг: Плагин сам определит тип поля (Email, Телефон, Имя и тд.) по тексту заголовка или плейсхолдера.
Поддержка основных полей: email, телефон, имя, сайт, textarea, выпадающий список, радиокнопоки, чекбоксы.

📐 Автоматическая сетка и стили
Расчет ширины: Плагин автоматически определяет ширину поля в сетке (1/2, 1/3, 1/4) и его расположение (в ряд или столбик).
Стили «под ключ»: Цвета, шрифты, скругления, обводки полей и даже Hover-эффекты кнопок переносятся один-в-один.
Поддержка адаптива и плоского режима.

Как попробовать?
Обновите плагин в Figma (перезапустите Фигму) и используйте тег [form] для ваших групп с формой.
🔥13👍3
Media is too big
VIEW IN TELEGRAM
Работа с формами
📖 Подробная инструкция по формам: https://tildify.ru/import-rules#forms
❤3🔥3
Обновление расширения для Хрома - Tildify v0.960 и плагина Tildify Validator 2.48 — система компонентов в ZeroBlock! 🔥
(В экспериментальном режиме)

Теперь в Tilda появилась полноценная система компонентов, почти как в Figma

Что нового:
✨ Введены Master и Instance — теперь можно работать с компонентами, как в Figma, с поддержкой связей. Можно создать компонент из любого элемента (шейп, кнопка и тд), а также групп.

✨ Оверрайды (локальные изменения) — изменения сохраняются в инстансах там, где их вносишь. Возможен сброс изменений до состояния мастера.

🧩 Компоненты из контейнеров (группы и автолэйауты): можно добавлять элементы в мастер-группу после создания инстансов (экземпляров), при этом новые элементы создаются и в инстансах тоже.

Добавил поддержку экспорта (и копирования через буфер) компонентов и их инстансов прямо из фигмы.
(⚠️ ВАЖНО: на артборде должны быть и мастер, и его инстансы, иначе связки не соберутся)

Подробно показал в небольшом видео тут (или ниже):
👉 https://tildify.ru/extras
❤3🔥1
Всем привет!

Небольшое, но полезное обновление для плагина. Раньше, чтобы обновить уже имеющееся изображение у элемента в Тильде, приходилось выгружать его из Фигмы и загружать снова в Тильду, либо копировать через буфер плагина (если сразу нужно сжатие и формат webP), потом брать ссылку на изображение через контекстное меню и перезаливать в объект (сам так делал).

Добавил в режим буфера функцию, что если мы копируем только одно изображение (будь то вектор, растр, или контейнер (группа) с тегами [img], [svg] и тд), то после успешного копирования появляется кнопка копирования ссылки на изображение в буфер обмена (системный), после этого нужно лишь поменять изображение в элементе через эту ссылку.
❤8🔥4🙏1
Привет! Небольшие обновления:

1. Незаметное, но полезное обновление-патч расширения (версия 0.9.861). Всех наверное утомило это нелепое ограничение на вложенность групп и автолэйаутов, убрал его.

2. Обновление плагина: Добавлена поддержка экспорта настроек автолэйаутов у артбордов при экспорте адаптивов. Свойства передаются в настройки автолэйаута у ZeroBlock.
🔥9🙏1
Тильда добавила, и мы не отстаем.

В плагине добавил поддержку экспорта градиентной обводки у кнопки.
🔥9👍6🙏1
Всем привет! Небольшие обновления Плагина и Расширения.

Благодаря вашей обратной связи пофиксил критические ошибки:

1. Импорт падал, если была кнопка, у которой была только одна видимая граница (обводка) – сделал защиту для подобных моментов.

2. Введена блокирующая проверка в Плагине на количество узлов. Ранее, если присутствовал массивный векторный объект (тысячи элементов), которые не были обернуты в тег [svg], то импорт зависал, подвешивая фигму. Введено ограничение и предупреждение, если узлов более 800.

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

4. Исправлен баг с импортом кнопок, у которых шрифт стилистически совпадал с текстовыми стилями проекта (пропадали поля настройки гарнитуры и жирности)

4. По просьбе пользователей добавлен алиас (синоним) для кнопки. Теперь чтобы элемент стал кнопкой, достаточно указать btn у кнопки в фигме (как целое слово, а не часть)

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

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

7. Исправление мелких ошибок.

Для обновления плагина нужно как обычно перезапустить Фигму, расширение должно обновиться само.
🔥10❤6👍4
Всем привет! Небольшое обновление Плагина связанное в основном с производительностью.

1. Улучшена производительность на проверке макетов. Теперь даже на больших макетах плагин не виснет (спасибо пользователю из Тильдошной @ksanksss222 за обратную связь)

2. Увеличена производительность при обработке и выгрузке изображений, теперь большие макеты обрабатываются быстрее, изменена логика обработки и выгрузки "обрезанных" (clipping) контейнером изображений.

3. Исправлена ошибка с неверной передачей прозрачности обводки у кнопок - прозрачность при экспорте в два раза занижалась (спасибо пользователю @zuenkov_nikita за обратную связь)

Следующее обновление планирую не такое скучное как это 😀
🔥9👍4🙏2❤1👏1
Друзья, привет!

Новое крупное обновление расширения и плагина Tildify.

🧩 Создана библиотека элементов Tildify Elements.
Появились готовые элементы: слайдер, аккордеон и табы.

Теперь типовые интерактивные блоки можно сразу импортировать из Фигмы в готовые рабочие компоненты.

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

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

Почитать подробнее, посмотреть примеры, скопировать себе можно на сайте https://elements.tildify.ru/

Библиотека будет пополнятся новыми элементами. Пишите, что бы вам хотелось видеть. Не нужно подключение jQuery.

⚡️ Добавление элементов в Tilda
Компоненты теперь можно вставлять прямо в Tilda Zero Block через меню элементов Tildify Elements (встроил в стандартное меню элементов Тильды). Теперь можно собрать свой слайдер, аккордеон или табы прямо в Тильде, без лишних хлопот. Всё в одном месте. Не обязательно импортировать из Фигмы.

📦 Экспорт из Zero Block
Добавил экспорт содержимого ZeroBlock — удобно переиспользовать уже собранные решения, передавать содержимое зероблока на другой аккаунт (без передачи страницы) или в поддержку :)

🔧 Улучшения и фиксы
Поработал с плоским импортом, увеличил скорость сбора изображений (убрал лишние проходы), улучшил логику сопоставления текстовых элементов между брейкпоинтами.

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

➕ Сброс параметров экземпляров в системе компонентов
Теперь можно гибко выбирать, какие настройки сбрасывать у экземпляров.

Внесены множество фиксов по вашим отзывам, как в UI плагина, так и в логику работы.
Спасибо за обратную связь!

Небольшое видео где кратко рассказал про обновления:
Кинескоп
Youtube
🔥11❤7👍7👏2🙏2
Media is too big
VIEW IN TELEGRAM
Видео с импортом слайдера

Еще небольшое видео где кратко рассказал про обновления:
Кинескоп
Youtube
🔥8👍4❤2
Привет! Добавил в движок слайдера Tildify Elements пятый режим для точек - "Превью слайдов". Подойдет для слайдера-галереи с 1 видимым слайдом.

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

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

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

Посмотреть примеры
👍8❤4🔥4
Всем привет!

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

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

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

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

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

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

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

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

Если хотите добавить такой элемент к себе в проект, можно взять готовые примеры со страницы и быстро адаптировать под свой Zero Block (через импорт блока по ID со страницы примеров).
🔥12❤7👍3👏1
Друзья, привет!

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

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

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

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

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

Спасибо, что остаётесь с проектом! ❤️
🔥31❤8👍6🙏3
Всем привет!

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

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

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

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

P.S. Если на странице разные провайдеры, то будет использоваться первый удачно загрузившийся скрипт.
❤6🙏4🔥3👏1
Друзья, привет!

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

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

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

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

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

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

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