Главная полная инструкция по использованию 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 брейкпоинтов? Пожалуйста! Только тильда будет не в восторге :)

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

Шаг 2. Копирование ссылки для импорта

После того, как отрисовали все нужные брейкпоинты блока и выполнили все правила для макета, можно копировать ссылку на общий фрейм для того, чтобы вставить её в соответствующее поле в расширении.
Где найти и как скопировать ссылку
Выбери общий фрейм и скопируй на него ссылку через Copy as > Copy link to selection в меню или нажатием CTRL+L

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

Для импорта понадобится токен FigmaAPI, где его найти и как правильно создать для Arvess, смотрите в этом разделе. Очень важно выдать нужные разрешения при его создании!

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