Документация
Инструкция по Arvess
Всё что нужно: установка, первый импорт, правила для макетов и ответы на частые вопросы.
⚡ Быстрый старт
Сделай первый импорт за несколько минут — следуй шагам по порядку.
Демо
1
Установи плагин Figma
Плагин Arvess for Figma нужен, чтобы скопировать данные блока, которые потом вставляются в расширение
Демо
2
Установи расширение Chrome
Расширение Chrome нужно, чтобы в редакторе Zero Block появилась кнопка «Импорт из Figma»
Демо
3
Запусти плагин и скопируй данные
Открой плагин Arvess for Figma в Figma, выдели родительский фрейм блока и нажми «Скопировать данные для импорта». Данные скопируются в буфер обмена.
Демо
4
Нажми «Импорт из Figma» в Tilda
Создай страницу, добавь новый Zero Block и зайди в редактирование. В правом тулбаре появится кнопка «Импорт из Figma» — нажми её
Демо
5
Вставь и нажми «Импортировать»
Вставь скопированные данные в поле и нажми «Импортировать». Блок появится на странице!
Перед импортом назначьте шрифт в настройках Tilda. В демо-макете это Roboto
→
Что дальше?
Ознакомьтесь с правилами для макетов — это поможет избежать ошибок при импорте.
🚀 Как импортировать блок из Figma в Tilda
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) и нажми «Импортировать». После импорта расширение предложит перезагрузить страницу — перезагрузите. Блок появится на странице.
⚙️ Установка плагина Figma и расширения Chrome
1
Установи плагин Figma
Открой любой свой проект в Figma с правами редактора. Нажми Actions на панели инструментов (или Ctrl+K). Перейди на вкладку «Plugins & widgets», найди Arvess for Figma и нажми «Save» или «Run».
2
Как открыть плагин
Нажми Ctrl+K (или Cmd+K на Mac) и выбери Arvess for Figma. Или правой кнопкой мыши на холсте → Plugins → Arvess for Figma.
3
Установи расширение для браузера
Перейди по ссылке ниже и нажми «Установить». Работает в Chrome, Яндекс Браузере, Opera и других браузерах на базе Chromium.
4
Войди в расширение
Нажми на иконку расширения в панели браузера. Если ты уже залогинен в личном кабинете, расширение автоматически подтянет аккаунт. Если нет — нажми «Войти» и авторизуйся.
Расширение и личный кабинет используют один аккаунт
🎨 Подготовка макета Figma к импорту
Прочитайте 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 (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.
Проверь структуру макета: все ли элементы во фреймах (не группах), правильно ли названы слои. Смотри раздел «Подготовка макета».
Это осознанное решение — и оно работает в вашу пользу.
Инструменты, которые импортируют картинки автоматически, вынуждены их сжимать и конвертировать в webp. Алгоритм не знает, где качество критично, а где нет — и пережимает всё подряд. В итоге всё равно приходится проверять каждую картинку вручную и пересжимать.
Arvess создаёт плашки с правильными размерами и расположением — а вы загружаете картинки сами, контролируя качество там, где это важно. Плюс именно поэтому импорт происходит мгновенно: не нужно ждать обработки и загрузки изображений.
Инструменты, которые импортируют картинки автоматически, вынуждены их сжимать и конвертировать в webp. Алгоритм не знает, где качество критично, а где нет — и пережимает всё подряд. В итоге всё равно приходится проверять каждую картинку вручную и пересжимать.
Arvess создаёт плашки с правильными размерами и расположением — а вы загружаете картинки сами, контролируя качество там, где это важно. Плюс именно поэтому импорт происходит мгновенно: не нужно ждать обработки и загрузки изображений.
Да — автолейауты поддерживаются и переносятся в точности согласно макету в Figma.
Arvess переносит автолейауты, типографику, цвета, тени, градиенты, векторы, группы, геометрию и многое другое — в точности согласно макету в Figma.
Изображения (PNG, JPEG) переносятся как заглушки нужного размера. Картинки потом легко загрузить прямо в Tilda, предварительно оптимизировав по размеру и весу.
Изображения (PNG, JPEG) переносятся как заглушки нужного размера. Картинки потом легко загрузить прямо в Tilda, предварительно оптимизировав по размеру и весу.
Нет. Arvess работает на бесплатном аккаунте Figma — платная подписка не нужна.
Зайди в личный кабинет — на главной вкладке отображается тариф и количество оставшихся импортов.
Пишите в Telegram — ответим быстро.
Готов попробовать?
3 дня бесплатно — без карты. Начни импортировать блоки прямо сейчас.
Попробовать бесплатно →