Инструкция всегда доступна на вкладке Инструкция — там быстрый старт и подробные шаги.
Обзор
Тариф
—
Импорты
—
Арвесс сэкономил
В среднем ручная вёрстка одного блока в Tilda занимает ~20 минут. Мы умножаем это время на количество ваших импортов.
—
Полезные ссылки
Тарифы
Автосписаний нет. Продление происходит вручную
Пакеты импортов
Импорты из пакетов не сгорают и доступны без действующей подписки — используйте когда удобно
Промокод
Есть промокод?
Введите его и получите бонусные импорты
Быстрый старт
Сделай первый импорт за несколько минут — следуй шагам по порядку
Демо
1
Установи плагин Figma
Плагин Arvess for Figma нужен, чтобы скопировать данные блока, которые потом вставляются в расширение
Демо
2
Установи расширение Chrome
Расширение Chrome нужно, чтобы в редакторе Zero Block появилась кнопка «Импорт из Figma»
Демо
3
Скопируй демо-данные
Скопируются данные блока «Контакты» из демо-макета в Figma — то же самое можно сделать через плагин
Демо
4
Нажми «Импорт из Figma» в Tilda
Создай страницу, добавь новый Zero Block и зайди в редактирование. В правом тулбаре появится кнопка «Импорт из Figma» — нажми её
Демо
5
Вставь и нажми «Импортировать»
Вставь скопированные данные в поле и нажми «Импортировать». Блок появится на странице!
Перед импортом назначьте шрифт в настройках Tilda. В демо-макете это Roboto
→
Что дальше?
Ознакомьтесь с правилами для макетов — это поможет избежать ошибок при импорте.
🚀 Как импортировать блок
1
Подготовь макет в Figma
Чтобы импортировать дизайн в Tilda, макет должен быть подготовлен по определённым правилам. Подробнее — в разделе «Подготовка макета» ниже.
2
Скопируй данные плагином
Открой плагин Arvess for Figma через панель плагинов Ctrl+K. Выдели родительский фрейм, в котором все нужные брейкпоинты блока и нажми «Скопировать данные для импорта».
Данные скопируются в буфер обмена.
3
Открой Zero Block в Tilda
Создай новый Zero Block на своей странице. Войди в его редактор.
4
Нажми «Импорт из Figma» в тулбаре
В правом верхнем углу редактора Zero Block, рядом с кнопками «Save» и «Close» появится кнопка «Импорт из Figma».
⚠️ Кнопка появляется только после установки расширения Chrome. Если её нет — сначала установи расширение.
5
Вставь данные и нажми «Импортировать»
Вставь скопированные данные в открывшемся окне импорта (Ctrl+V) и нажми «Импортировать». После импортирования расширение предложит перезагрузить страницу. После перезагрузки блок появится на странице.
⚙️ Как установить плагин и расширение
1
Установи плагин Figma
Для установки плагина заходим в какой-нибудь свой проект в Figma, в котором есть права редактора, и нажимаем «Actions» на панели инструментов внизу, либо CTRL/CMD+K.
Нажимаем на вкладку «Plugins & widgets», в поиске находим Arvess for Figma и нажимаем либо «Save» либо «Run». Теперь плагин будет доступен через эту панельку в любое время.
Нажимаем на вкладку «Plugins & widgets», в поиске находим Arvess for Figma и нажимаем либо «Save» либо «Run». Теперь плагин будет доступен через эту панельку в любое время.
2
Как открыть плагин в Figma
Нажми Ctrl+K (или Cmd+K на Mac) и выбери Arvess for Figma. Или правой кнопкой мыши на холсте → Plugins → Arvess for Figma.
3
Установи расширение для браузера
Перейди по ссылке ниже и нажми «Установить».
Расширение доступно для установки в любом браузере на базе Chromium: Chrome, Яндекс Браузер, Opera и других.
4
Войди в расширение
Нажми на иконку расширения в панели браузера. Если ты уже залогинен в личном кабинете, расширение автоматически подтянет аккаунт. Если нет — нажми «Войти» и авторизуйся.
Расширение и личный кабинет используют один аккаунт
🎨 Подготовка макета
Прочитайте 3 обязательных правила — это займёт минуту, но поможет избежать ошибок. Учитывайте их прямо во время отрисовки, иначе потом придётся переделывать.
!
Правило 1. Каждый брейкпоинт — отдельный фрейм внутри общего
Отрисовывайте каждый брейкпоинт в отдельном фрейме (не группе!). Все фреймы брейкпоинтов помещайте в один общий родительский фрейм — это и есть ваш блок, который будет импортирован.
Ширина фрейма задаёт брейкпоинт: например, 1440, 768 и 390. Количество и ширина брейкпоинтов — любые. Хоть 50 штук, если очень хочется.
Ширина фрейма задаёт брейкпоинт: например, 1440, 768 и 390. Количество и ширина брейкпоинтов — любые. Хоть 50 штук, если очень хочется.
⚠️ Как перенести только один брейкпоинт?
Если брейкпоинт только один, его всё равно нужно обернуть в родительский фрейм.
Если брейкпоинт только один, его всё равно нужно обернуть в родительский фрейм.
Изображения появятся здесь
!
Правило 2. Внутри каждого брейкпоинта — только уникальные названия
Все элементы внутри одного фрейма-брейкпоинта должны иметь уникальные названия. Если два элемента называются одинаково — импортируется только тот, который выше по слоям. Второй будет потерян.
Правильно: Line 157, Line 158, Line 159
Неправильно: два элемента с одинаковым именем Line 157
Плагин подскажет, если в каком-то брейкпоинте будут одинаковые названия у элементов.
Правильно: Line 157, Line 158, Line 159
Неправильно: два элемента с одинаковым именем Line 157
Плагин подскажет, если в каком-то брейкпоинте будут одинаковые названия у элементов.
Изображения появятся здесь
!
Правило 3. Одинаковые элементы на разных брейкпоинтах — одинаковые названия
Если картинка называется IMG_2323 на десктопе — она должна называться так же на всех остальных брейкпоинтах этого блока.
Если элемент есть только на одном брейкпоинте — не страшно: Arvess автоматически скроет его на остальных.
Лайфхак: нужна другая картинка на мобиле? Дайте ей другое имя — Arvess скроет десктопную на мобильном и наоборот.
Если элемент есть только на одном брейкпоинте — не страшно: Arvess автоматически скроет его на остальных.
Лайфхак: нужна другая картинка на мобиле? Дайте ей другое имя — Arvess скроет десктопную на мобильном и наоборот.
Изображения появятся здесь
Теперь по шагам:
1
Отрисуйте все брейкпоинты блока в Figma
Отрисуйте каждый брейкпоинт как отдельный фрейм, соблюдая все 3 правила. Затем выделите все фреймы брейкпоинтов и объедините их в родительский фрейм с помощью Ctrl+Alt+G (Cmd+Option+G на Mac).
Не уверены в структуре? Посмотрите пример в Figma — там 3 блока, сделанных по всем правилам.
2
Скопируйте данные через плагин Arvess for Figma
Запустите плагин Arvess for Figma (Ctrl+K → Arvess for Figma, или ПКМ на холсте → Plugins → Arvess), выделите родительский фрейм блока (тот, в котором лежат все брейкпоинты) и нажмите «Скопировать данные для импорта». Данные скопируются в буфер обмена.
3
Импортируйте блок в Tilda
Перед импортом зайдите в настройки сайта на Tilda и подключите все шрифты, которые используются в вашем макете. Если шрифт не подключён — текст отобразится некорректно.
Создайте новый Zero Block, откройте его редактор и нажмите «Импорт из Figma». Вставьте скопированные данные (Ctrl+V) и нажмите «Импортировать». После того как расширение предложит перезагрузить страницу — перезагрузите. Блок появится на странице.
Повторяйте для каждого нового блока.
Создайте новый Zero Block, откройте его редактор и нажмите «Импорт из Figma». Вставьте скопированные данные (Ctrl+V) и нажмите «Импортировать». После того как расширение предложит перезагрузить страницу — перезагрузите. Блок появится на странице.
Повторяйте для каждого нового блока.
Не забудьте сохранить блок кнопкой Save после импорта.
📦 Элементы
Что переносится из Figma и как — коротко о каждом типе элемента.
Текст
- Шрифт, размер, цвет, жирность, курсив
- Подчёркивание, зачёркивание, прозрачность
- Межстрочный и межбуквенный интервал
- Выравнивание, тип поля (Fixed / AutoHeight / AutoWidth)
- Смешанные стили внутри одного текстового контейнера
- Списки
Шейп
- Прямоугольники, эллипсы, линии
- Цвет, градиент, обводка, тени
- Скругление, включая индивидуальные углы
- Blur, прозрачность
Изображение
- Переносится блок-заглушка с точными размерами и позицией
- Картинку загружаешь сам — качество под контролем
- Импорт не тормозит на обработке файлов
Автолейаут
- Направление (горизонт. / вертикальное)
- Gap, padding со всех сторон
- Выравнивание элементов (align, justify)
- Wrap — перенос при нехватке места
Кнопка
- Frame или AutoLayout с «button» в названии (регистр не важен)
- Например: «Main Button», «button_1»
- Тело кнопки — фрейм, текст — текст внутри фрейма
Группа
- Позиционирование
- Вложенность
- Сохранение иерархии слоёв
SVG
- Переносится как
vector, неimg - Фрейм с одним векторным элементом — переносится полностью
- Несколько векторных элементов внутри — переносится только верхний
Эффекты
- Тени — в том числе несколько на один элемент
- Background blur
- Всё, что поддерживает Tilda — переносится
💬 Частые вопросы
Убедитесь, что расширение установлено и активно. Перейдите в редактор Zero Block и запустите расширение — убедитесь, что вы залогинены. Затем обновите страницу. Если кнопка не появилась — напишите нам, быстро поможем.
Кнопка появляется только внутри редактора Zero Block — не на обычной странице Tilda.
Кнопка появляется только внутри редактора Zero Block — не на обычной странице Tilda.
Проверь структуру макета: все ли элементы во фреймах (не группах), правильно ли названы слои. Посмотри раздел «Подготовка макета».
Это осознанное решение — и оно работает в вашу пользу.
Инструменты, которые импортируют картинки автоматически, вынуждены их сжимать и конвертировать в webp. Алгоритм не знает, где качество критично, а где нет — и пережимает всё подряд. В итоге всё равно приходится проверять каждую картинку вручную и пересжимать.
Arvess создаёт плашки с правильными размерами и расположением — а вы загружаете картинки сами, контролируя качество там, где это важно. Плюс именно поэтому импорт происходит мгновенно: не нужно ждать обработки и загрузки изображений.
Инструменты, которые импортируют картинки автоматически, вынуждены их сжимать и конвертировать в webp. Алгоритм не знает, где качество критично, а где нет — и пережимает всё подряд. В итоге всё равно приходится проверять каждую картинку вручную и пересжимать.
Arvess создаёт плашки с правильными размерами и расположением — а вы загружаете картинки сами, контролируя качество там, где это важно. Плюс именно поэтому импорт происходит мгновенно: не нужно ждать обработки и загрузки изображений.
Да — автолейауты поддерживаются и переносятся в точности согласно макету в Figma.
Arvess переносит автолейауты, типографику, цвета, тени, градиенты, векторы, группы, геометрию и многое другое — в точности согласно макету в Figma.
Изображения (PNG, JPEG) переносятся как заглушки нужного размера. Картинки потом легко загрузить прямо в Tilda, предварительно оптимизировав по размеру и весу.
Изображения (PNG, JPEG) переносятся как заглушки нужного размера. Картинки потом легко загрузить прямо в Tilda, предварительно оптимизировав по размеру и весу.
Нет. Arvess работает на бесплатном аккаунте Figma — платная подписка не нужна.
Зайди на вкладку Главная — там отображается твой тариф и количество оставшихся импортов.
Пишите в Telegram-чат поддержки — ответим быстро.
Реферальная программа
Поделитесь ссылкой с коллегами — вместо стандартного триала на 3 дня и 20 импортов они получат расширенный тариф PROбный+: 7 дней и 40 импортов.
Когда кто-то из приглашённых впервые оплатит подписку PRO, вам автоматически начислится +1 месяц PRO бесплатно. Если подписка уже активна — +30 дней добавятся к ней, если нет — активируется PRO на 1 месяц, даже если аккаунт полностью неактивен.
—
Перешли по ссылке
—
Совершили оплату
—
Месяцев заработано
История платежей
История импортов
Загрузка...
