Установка и быстрый старт
Плагин создаёт пакет в Figma, расширение принимает его в Tilda, а сайт хранит аккаунт и доступ.
Установи две части
Добавь TildEka из Figma Community и расширение TildEka из Chrome Web Store. Они работают вместе и используют один аккаунт TildEka.
Подготовь Frame
Каждый брейкпоинт — отдельный Frame внутри общего родителя. Ширина Frame задаёт breakpoint. Внутри одного экрана имена слоёв должны быть уникальными.
Скопируй данные
Открой плагин, выдели родительский Frame и запусти диагностику. Если всё зелёное — нажми «Обновить, синхронизировать и скопировать».
Проверь и импортируй
Открой Zero Block, нажми TILDEKA и сначала посмотри сводку изменений. Выбери умную синхронизацию, полную замену или добавление, затем подтверди импорт.
Проверь результат
Открой каждый breakpoint, проверь медиа и шрифты. Для slider, tabs и accordion убедись, что маркеры есть в именах слоёв — runtime добавится автоматически.
Подробная установка Figma, Pixso и расширения
TildEka состоит из трёх связанных частей. Сайт отвечает за аккаунт и лимиты, плагин собирает макет, расширение вставляет его в Zero Block.
Figma
Откройте Figma Community, найдите TildEka и нажмите Run или Save. В нужном файле запустите Plugins → Saved plugins → TildEka. Плагин работает локально: API-токен Figma не нужен.
Pixso
Откройте Pixso Community, установите TildEka и запустите его в макете. Интерфейс и формат пакета такие же, а редактор определяется автоматически. Если Community-версия ещё проходит модерацию, используйте локальную установку из официального архива TildEka.
Chrome / Edge
Установите расширение TildEka в Chromium-браузер. Нажмите «Авторизоваться»: откроется сайт. После входа или регистрации сайт подтвердит привязку, а расширение получит отдельную защищённую сессию. Пароль расширению не передаётся.
Tilda
Откройте страницу и редактор Zero Block, затем обновите вкладку. Кнопка TILDEKA появляется именно внутри Zero Block. Нажмите её и выберите «Импортировать пакет из буфера» — обычный Ctrl+V не требуется.
Как проверить, что всё связано
- В кабинете отображается ваш email и доступ.
- В расширении виден статус «Подключено».
- Плагин находит выбранный Frame и показывает брейкпоинты.
- После импорта операция появляется в истории кабинета.
- Каждый успешный импорт уменьшает бесплатный остаток на один.
Подготовка макета
Импортёр читает не только пиксели, но и структуру. Эти три правила делают результат предсказуемым.
Frame «Landing / 768»
Frame «Landing / 390»
↳ Button [c-hero-button] [l-#pricing]
Интерактивы из имён слоёв
TildEka генерирует скрытый HTML-runtime внутри Zero Block. Никаких ручных скриптов после импорта.
Что переносится
Текст, формы, фигуры и медиа сохраняют редактируемость там, где это позволяет Tilda.
Где хранятся данные и как всё проверить
Сайт хранит аккаунт и право на импорт. Сам макет идёт напрямую из плагина в расширение через буфер обмена и в базу сайта не попадает.
Проверьте работу за пять минут
Создайте аккаунт и запомните число оставшихся импортов. Выполните импорт одного Frame и обновите кабинет — остаток уменьшится на один, а операция появится в истории. Повторите импорт: после второго успешного завершения остаток уменьшится ещё на один. Отменённая или неуспешная операция лимит не расходует. Выйдите и войдите снова — тариф, остаток и история сохранятся.
Частые вопросы
Нужен ли платный аккаунт Figma?
Нет. TildEka работает локально и не использует Figma API, токены или платную подписку.
Чем умная синхронизация отличается от замены?
Она сопоставляет слои по устойчивому ключу, обновляет выбранные категории и сохраняет остальные элементы блока. Первый импорт создаёт связи, а последующие используют их.
Что происходит с изображениями?
В Beta 0.1 есть три режима: автоматическая загрузка уникальных WebP на CDN Tilda, создание нативных блоков нужного размера для ручной загрузки и полный пропуск растров.
Поддерживается ли Pixso?
Да. Pixso использует тот же экспортёр и отдельный manifest. Хост определяется автоматически, а пакет совместим с тем же расширением.
Почему кнопка не появляется?
Расширение добавляет кнопку только в редакторе Zero Block. Убедись, что оно загружено, перезагрузи вкладку Tilda и открой редактор блока.
Как сделать слайдер?
Добавь имена-маркеры [c-slide], [l-#prev], [l-#next], [c-dot], [c-current], [c-total] и [c-scrollbar]. Runtime проставится при импорте.