Как перенести из Figma в Tilda не только дизайн, но и модификации

Одно из главных преимуществ Zero-блоков в том, что дизайн для них можно собрать не только вручную, но и перенести из Figma. Правда, переносится только вёрстка, а чтобы блок мог работать как полноценный слайдер или аккордеон, элементы и код приходится настраивать вручную.

Вместе с Максимом Постниковым, автором модификаций, мы придумали способ, как решить эту проблему — переносить из Figma не только вёрстку, но и классы и ссылки, которые нужны для работы модов. Их можно задать прямо в макете — при переносе в Tilda расширение установит их автоматически, останется только скопировать код и убедиться, что всё работает.

Плагин Arvess в Figma определил модификацию Постникова по префиксам в именах слоёв — Плагин Arvess распознаёт модификацию прямо в макете Figma — по префиксам в именах слоёв.

Как всё задумано

В основе способа лежит два инструмента:

Arvess — сервис для переноса Zero-блоков из Figma в Tilda. Анализирует выделенный фрейм и собирает из него Zero-блок со всеми стилями и настройками для каждого брейкпоинта — на выходе получается точная копия макета. В общем, полезный и удобный инструмент, который экономит дизайнерам часы работы.
Модификации для Zero-блоков — скорее всего, уже знакомая вам библиотека. Позволяет сделать дизайн функциональным — например, собрать из Zero-блоков слайдер, вкладки или аккордеон со своей логикой, поведением и стилями. Способ установки одинаковый для всех модов: сверстать элементы в Zero → добавить им классы/ссылки → вставить в блок T123 строчку кода с нужными настройками.

В работе дизайнеры часто используют вместе и то, и другое. Но если перенести дизайн и сгенерировать код можно легко, то классы и ссылки до сих пор приходится расставлять вручную и заодно следить, чтобы в редакторе при этом ничего не слетело (так например, внезапная смена типа группы с Object на Logical — отдельная боль, после которой приходится чистить десяток лишних классов).

Теперь все настройки можно сделать прямо в Figma, в момент, когда вы только рисуете макет — и без проблем перенести их в Tilda.

Что нужно для переноса

Для переноса понадобится плагин Arvess для Figma и расширение Arvess для браузера Chrome. После того, как всё установили:

Добавьте префиксы к именам слоёв в Figma — [c-] для классов и [l-] для ссылок (см. подробнее в разделе «Как правильно назвать слои»).

Запустите плагин — он проанализирует выделенный фрейм, определит модификацию и подскажет дальнейшие шаги.

Скопируйте данные макета и перенесите их в Zero-блок через расширение Arvess. Классы и ссылки с префиксами появятся на элементах автоматически.

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

Подробная инструкция и видео по переносу — в инструкции Arvess.

Как правильно назвать слои в Figma

Разметка строится на двух префиксах, которые добавляются перед названием слоя:

Префикс	Что задаёт	Имя слоя в Figma	Результат в Tilda
`[c-]`	Класс	`[c-slide]` Rectangle	класс `.slide`
`[l-]`	Ссылка-якорь	`[l-#next]` Button	ссылка `#next`
`[l-]`	Ссылка-адрес	`[l-/contacts]` Button	ссылка `/contacts`

Всё, что идёт после префикса и пробела, — произвольное имя слоя, можно указывать на своё усмотрение.

⚠️ Классы блоков (.uc-slider, .uc-accordion и др.) в Figma задавать не нужно. Они указываются в настройках самого блока в Tilda, как обычно.

Ниже — небольшие инструкции и справочник имён с классами и ссылками по каждой модификации. Элементы, помеченные звёздочкой, — обязательные, по ним плагин определяет, какой мод используется в дизайне. Если их префиксы написаны с ошибкой или отсутствуют, мод распознать не получится.

Слайдер в Zero-блоке

Создайте два фрейма для слайдов и кнопок управления, добавьте префиксы [c-slide] карточкам со слайдами и [l-#next]/[l-#prev] кнопкам вперёд/назад.

Элемент	Класс / ссылка	Префикс
Слайды*	`.slide`	`[c-slide]`
Кнопка «Назад»	`#prev`	`[l-#prev]`
Кнопка «Вперёд»	`#next`	`[l-#next]`

Инструкция по установке: Слайдер в Zero-блоке

Слайдер в шейпе Zero-блока

Создайте в Figma фрейм со слайдером, добавьте слайдам префикс [c-slide] и объедините их в общую группу (фрейм). Задайте префикс [c-container] шейпу-контейнеру и [l-#next]/[l-#prev] вперёд/назад.

Элемент	Класс / ссылка	Префикс
Слайды*	`.slide`	`[c-slide]`
Контейнер для слайдера*	`.container`	`[c-container]`
Кнопка «Назад»	`#prev`	`[l-#prev]`
Кнопка «Вперёд»	`#next`	`[l-#next]`

Инструкция по установке: Слайдер в шейпе Zero-блока

Классические табы в Zero-блоке

Создайте в Figma несколько фреймов: общий фрейм со вкладками и фреймы с переключающимся контентом. Каждой вкладке укажите префикс [l-#tab] и расположите их в слоях в порядке возрастания. При необходимости рядом со вкладками можно также добавить кнопки управления [l-#prev]/[l-#next].

Элемент	Класс / ссылка	Префикс
Вкладки* (в одном блоке)	`#tab`	`[l-#tab]`
Кнопка «Назад»	`#prev`	`[l-#prev]`
Кнопка «Вперёд»	`#next`	`[l-#next]`

Инструкция по установке: Классические табы в Zero-блоке

Переключатель Zero-блоков по кнопкам

Создайте в Figma несколько переключаемых фреймов, задайте вкладкам в каждом из них префикс [l-#tab] и расположите их в слоях в порядке возрастания. При необходимости можно добавить в блок кнопки управления с префиксом [l-#prev]/[l-#next].

Элемент	Класс / ссылка	Префикс
Вкладки* (в каждом блоке)	`#tab`	`[l-#tab]`
Кнопка «Назад»	`#prev`	`[l-#prev]`
Кнопка «Вперёд»	`#next`	`[l-#next]`

Инструкция по установке: Переключатель Zero-блоков по кнопкам

Переключатель контента в Zero-блоке

Создайте в Figma фрейм, добавьте в него вкладки с префиксом [l-#tab] и переключаемый контент [c-tab-elem] и расположите их в слоях в порядке возрастания. При необходимости можно также добавить во фрейм кнопки управления [l-#prev]/[l-#next].

Элемент	Класс / ссылка	Префикс
Вкладки*	`#tab`	`[l-#tab]`
Переключаемый контент*	`.tab-elem`	`[c-tab-elem]`
Активные вкладки	`#tab` / `.tab-active`	`[l-#tab][c-tab-active]`

Инструкция по установке: Переключатель контента в Zero-блоке

Продвинутый слайдер

Создайте фрейм со слайдером, задайте каждому слайду префикс [c-slide] и объедините их в общий фрейм с Auto Layout. Точкам пагинации добавьте префикс [c-dot] и точно так же объедините их во фрейм; кнопкам управления задайте префиксы [l-#next]/[l-#prev].

Элемент	Класс / ссылка	Префикс
Слайды*	`.slide`	`[c-slide]`
Точки пагинации*	`.dot`	`[c-dot]`
Кнопка «Назад»	`#prev`	`[l-#prev]`
Кнопка «Вперёд»	`#next`	`[l-#next]`

Инструкция по установке: Продвинутый слайдер

Продвинутый слайдер со скроллбаром

Создайте фрейм со слайдером, задайте каждому слайду префикс [c-slide] и объедините их в общий фрейм с Auto Layout. Полосе прокрутки добавьте префикс [c-scrollbar], ползунку — [c-scrollbar-thumb] и так же объедините их в общий фрейм; кнопкам управления задайте префиксы [l-#next]/[l-#prev].

Элемент	Класс / ссылка	Префикс
Слайды*	`.slide`	`[c-slide]`
Полоса прокрутки*	`.scrollbar`	`[c-scrollbar]`
Ползунок скроллбара*	`.scrollbar-thumb`	`[c-scrollbar-thumb]`
Кнопка «Назад»	`#prev`	`[l-#prev]`
Кнопка «Вперёд»	`#next`	`[l-#next]`

Инструкция по установке: Продвинутый слайдер со скроллбаром

Продвинутый слайдер с нумерацией

Создайте фрейм со слайдером, задайте каждому слайду префикс [c-slide] и объедините их в общий фрейм с Auto Layout. Добавьте префиксы для нумерации: [c-current] текущему слайду и [c-total] общему их количеству; кнопкам управления задайте префиксы [l-#next]/[l-#prev].

Элемент	Класс / ссылка	Префикс
Слайды*	`.slide`	`[c-slide]`
Счётчик текущего слайда	`.current`	`[c-current]`
Счётчик количества слайдов	`.total`	`[c-total]`
Кнопка «Назад»	`#prev`	`[l-#prev]`
Кнопка «Вперёд»	`#next`	`[l-#next]`

Инструкция по установке: Продвинутый слайдер с нумерацией

Аккордеон в Zero-блоке

Создайте фрейм с аккордеоном в раскрытом состоянии, объедините каждую вкладку и содержимое в отдельные группы (фреймы) с префиксами [c-accordion] и [c-accordion-content] и расположите их в слоях в порядке возрастания. При необходимости во фрейм можно также добавить иконки с префиксом [c-accordion-icon].

Элемент	Класс / ссылка	Префикс
Заголовочная секция (вкладка)*	`.accordion`	`[c-accordion]`
Содержимое карточки*	`.accordion-content`	`[c-accordion-content]`
Иконка аккордеона	`.accordion-icon`	`[c-accordion-icon]`

Инструкция по установке: Аккордеон в Zero-блоке

Что делать после переноса?

После переноса блока останется всего три шага:

Задать класс блоку. Укажите нужный класс в настройках блока в Tilda (например, .uc-slider, .uc-accordion или другой, указанный на странице мода).
Вставить код инициализации. Скопируйте код из генератора на странице мода и вставьте его в блок T123 в конец страницы.
Проверить результат. Опубликуйте страницу и откройте её в браузере. Если возникнут сложности, можно добавить ?showerrors в конец ссылки — диагностика покажет ошибки и рекомендации по их исправлению.

Надеемся, что теперь рабочий процесс на Tilda станет для вас удобнее. Пользуйтесь с удовольствием!