Arvess поддерживает импорт из Pixso в Tilda Zero Block по тому же принципу, что и из Figma. Если вы уже использовали Arvess — процесс знакомый. Если нет — вот полная инструкция с нуля.

💡 Уже используете Arvess с Figma? Расширение Chrome то же самое. Просто установите плагин Arvess в Pixso — и готово. Переходите сразу к шагу 3.

Что понадобится

  • Аккаунт Pixso (бесплатный)
  • Плагин Arvess for Pixso (устанавливается из Pixso Community)
  • Расширение Arvess для Chrome (Chrome Web Store)
  • Аккаунт Arvess — 3 дня бесплатно
  • Сайт на Tilda с Zero Block

Пошаговая инструкция

1

Установите плагин Arvess in Pixso

Откройте любой файл в Pixso. Нажмите кнопку плагинов (⊕) в левом тулбаре → «Найти плагины» → введите «Arvess» → нажмите «Установить». Плагин появится в разделе «Мои плагины».

2

Установите расширение Chrome и войдите

Если расширение ещё не установлено — найдите «Arvess» в Chrome Web Store и нажмите «Установить». После установки откройте расширение и войдите в аккаунт Arvess через Telegram.

3

Выделите фрейм в Pixso

Выделите родительский фрейм блока, который хотите перенести. Это должен быть именно фрейм (синяя иконка #), а не группа. Один импорт — один фрейм.

4

Скопируйте данные через плагин

Запустите плагин Arvess (⊕ → Мои плагины → Arvess). Нажмите «Скопировать данные для импорта». Данные блока скопируются в буфер обмена.

5

Откройте Zero Block в Tilda

На странице Tilda создайте Zero Block или откройте существующий. Войдите в редактор. Убедитесь, что расширение Arvess активно (иконка в панели Chrome не должна быть серой).

6

Импортируйте блок

В правом тулбаре редактора нажмите «Импорт из Pixso». В открывшемся окне нажмите на поле и вставьте данные (Ctrl+V). Нажмите «Импортировать» и подождите 5–10 секунд.

7

Проверьте результат

После импорта страница перезагрузится автоматически. Блок появится в редакторе с полной структурой слоёв. Проверьте типографику, цвета и отступы — обычно всё точно соответствует макету.

Как подготовить макет в Pixso для лучшего результата

Arvess работает лучше, если макет подготовлен по простым правилам:

  • Используйте фреймы, а не группы. Группы не поддерживают автолейаут и конвертируются хуже.
  • Давайте слоям уникальные имена. «Button», «Hero Title», «Card 1» — понятные имена помогают при редактировании после импорта.
  • Автолейауты — ваши друзья. Блоки на автолейаутах переносятся как настоящие flex-контейнеры в Tilda.
  • Не делайте слишком глубокую вложенность. Оптимально — до 5 уровней вложения фреймов.
  • Картинки — как заглушки. Растровые изображения переносятся как прямоугольники нужного размера — добавьте их вручную после импорта через медиатеку Tilda.
✅ Подробные правила подготовки макета — в инструкции Arvess. Там же есть видеопримеры.

Разбор ошибок

«Кнопка Импорт из Pixso не появляется»

Убедитесь, что вы находитесь внутри редактора Zero Block (не на странице сайта). Обновите страницу. Если не помогает — выйдите и снова войдите в расширение.

«Данные не вставляются в поле импорта»

Ещё раз скопируйте данные через плагин — буфер обмена мог очиститься. Убедитесь, что плагин вывел сообщение «Скопировано» после нажатия кнопки.

«Блок импортировался, но выглядит иначе»

Проверьте структуру макета в Pixso. Чаще всего проблема в группах вместо фреймов или в слишком глубокой вложенности. Перестройте проблемный элемент на автолейауте.