Главная полная инструкция по использованию Arvess

Инструкция делится на обязательные правила и шаги.

Перенос происходит по блокам! Импортировать сразу все блоки или весь сайт не получится!

Весь текст обязателен к прочтению иначе первый опыт использования может быть испорчен.

Лень читать - наглядная видеоинструкция
Ссылка на макет в фигме из примера, который собран по всем правилам

Содержание

3 обязательных правила:

3 шага для импорта:

3 обязательных правила для макета в Figma

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

Правило 1. Блоки должны быть в отдельных фреймах

Блоки должны быть в отдельных фреймах, не группах! Все фреймы блока помещаем в один общий фрейм.

Правило 2. В одном фрейме нельзя делать одинаковые названия элементам

Внутри каждого брейкпоинта все элементы должны иметь уникальные названия
Правильный пример - линии называются:
Line 160, Line 159, Line 158, Line 157.

Если бы какая-то текстовка или любой другой элемент назывался Line 160 - это было бы ошибкой. Все элементы должны иметь уникальное название в рамках одного брейкпоинта.

Правило 3. Каждый элемент должен сохранить своё название на всех брейкпоинтах

Например, если ваша картинка называется IMG_2323, то эта же картинка на других брейкпоинтах должна называться также. Тоже самое работает для остальных элементов
Если название на другом брейкпоинте будет другим, то картинка продублируется, но расширение это учитывает и элементы, которых нет на других брейкпоинтах переводятся в opacity: 0 и перемещаются на координаты 9999. То есть видимого дублирования не будет.

Например, у вас на мобильном брейкпоинте картинка отличается от десктопного брейка. Тогда вы делаете разные названия этим картинкам и Arvess сделает десктопную картинку невидимой на мобильном брейке и наоборот, мобильную сделает невидимой на десктопе.
На этом обязательные правила заканчиваются. Далее перейдём к конкретным шагам, после выполнения которых получим готовый блок в редакторе тильды.

Шаг 1. Отрисовка макета в Figma для импорта

Отрисовываем нужные брейкпоинты блока, в примере это 1440, 768 и 390. У вас в проекте может быть сколько угодно и какие угодно брейкпоинты, хотите сделать 50 брейкпоинтов? Пожалуйста! Только тильда будет не в восторге :)

Не забываем про правила! Их нужно учитывать прямо на этапе отрисовки, иначе потом переделывать
Брейкпоинты задаются шириной фрейма, на примере это 1440, 768 и 390
Ссылка на этот макет в фигме. Там 3 блока, которые сделаны по всем правилам, можете наглядно посмотреть структуру и попробовать импортировать их самостоятельно.

Шаг 2. Копирование данных через плагин в фигме

После того, как отрисовали все нужные брейкпоинты блока и выполнили все правила для макета, можно копировать данные блока через плагин для фигмы, чтобы вставить их в соответствующее поле в расширении в браузере.
Где найти плагин?
Для установки плагина заходим в какой-нибудь свой проект в фигме, в котором есть права редактора и нажмаем «Actions» на панели инструментов внизу, либо CTRL/CMD+K

Нажимаем на вкладку "Plugins & widgets", в поиске находим Arvess for Figma и нажимаем либо «Save» либо «Run». Теперь плагин будет доступен через эту панельку в любое время.
Как скопировать данные для расширения в тильде?
После запуска плагина, появится его окно в фигме, дальше выделяем родительский фрейм блока, в котором расположены все нужные брейкпоинты и нажимаем «скопировать данные для импорта» в плагине

Шаг 3. Импорт блока в Тильду

Перед импортом подключите все нужные шрифты в Тильде
Как установить расширение?
Переходим в магазин расширений, в поиске пишем "Arvess" и нажимаем кнопочку "Установить". Готово, расширение установилось. Теперь переходим в зероблок, обновляем страничку и видим новую кнопочку «Импорт из Figma»
Импорт блока в тильду
В Tilda через кнопку расширения выгружаем блок:
  1. Обязательно создайте новый ZeroBlock, перейдите в редактор и нажмите кнопочку «Импорт из Figma».
  2. Вставьте данные которые были скопированы через плагин в поле в расширении и нажмите кнопку "импортировать"
  3. После импортирования сохраните блок стандартной кнопочкой save.
  4. Повторять цикл для каждого блока и радоваться сэкономленному времени на вёрстке.
Руководства для работы с элементами:
Полезное: