Блог
2026-07-02 21:29 Модификации

Как перенести из Фигмы в Тильду настройки модификаций

Главная
Модификации
Статья
10 минут
Одно из главных преимуществ Zero-блоков в том, что дизайн для них можно собрать не только вручную, но и перенести из Фигмы. Правда, переносится только вёрстка, а чтобы блок мог работать как полноценный слайдер или аккордеон, элементы и код приходится настраивать вручную.
Вместе с автором Arvess мы придумали способ, как решить эту проблему — переносить из Фигмы не только вёрстку, но и классы и ссылки, которые нужны для работы модов. Их можно задать прямо в макете — при переносе в Тильду расширение установит их автоматически, останется только скопировать код и убедиться, что всё работает.

В основе способа лежит два инструмента:
  • Arvess — сервис для переноса Zero-блоков из Фигмы в Тильду. Анализирует выделенный фрейм и собирает из него Zero-блок со всеми стилями и настройками для каждого брейкпоинта — на выходе получается точная копия макета. В общем, полезный и удобный инструмент, который экономит дизайнерам часы работы.
  • Модификации для Zero-блоков — скорее всего, уже знакомая вам библиотека. Позволяет сделать дизайн функциональным — например, собрать из Zero-блоков слайдер, вкладки или аккордеон со своей логикой, поведением и стилями. Способ установки одинаковый для всех модов: сверстать элементы в Zero → добавить им классы/ссылки → вставить в блок T123 строчку кода с нужными настройками.
В работе дизайнеры часто используют вместе и то, и другое. Но если перенести дизайн и сгенерировать код можно легко, то классы и ссылки до сих пор приходится расставлять вручную и заодно следить, чтобы в редакторе при этом ничего не слетело (так например, внезапная смена типа группы с Object на Logical — отдельная боль, после которой приходится чистить десяток лишних классов).
Теперь все настройки можно сделать прямо в Фигме, в момент, когда вы только рисуете макет — и без проблем перенести их в Тильду. Arvess узнает модификации в макете по классам и ссылкам и перенесёт их в Zero-блок.

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

Для переноса понадобится плагин Arvess для Figma и расширение Arvess для браузера Chrome. После того, как всё установили:
  1. Добавьте префиксы к именам слоёв в Фигме — [c-] для классов и [l-] для ссылок (см. подробнее в разделе «Как правильно назвать слои»).
  2. Запустите плагин — он проанализирует выделенный фрейм, определит модификацию и подскажет дальнейшие шаги.
  3. Скопируйте данные макета и перенесите их в Zero-блок через расширение Arvess. Классы и ссылки с префиксами появятся на элементах автоматически.
  4. После переноса останется только задать нужный класс самому блоку, скопировать код модификации и вставить его в конец страницы.
Подробная инструкция и видео по переносу есть тут: arvess.ru/guide

Как правильно назвать слои в Фигме?

Разметка строится на двух префиксах, которые добавляются перед названием слоя:
Префикс
Что задаёт
Имя слоя в Figma
Результат в Тильде
[c-]
Класс
[c-slide] Rectangle
класс .slide
[l-]
Ссылка-якорь
[l-#next] Button
ссылка #next
[l-]
Ссылка-адрес
[l-/contacts] Button
ссылка /contacts
Всё, что идёт после префикса и пробела, — произвольное имя слоя, можно указывать на своё усмотрение.
Классы блоков (.uc-slider, .uc-accordion и др.) в Фигме задавать не нужно. Они указываются в настройках самого блока в Тильде, как обычно.
Ниже — небольшие инструкции и справочник имён с классами и ссылками по каждой модификации. Элементы, помеченные звёздочкой — обязательные, по ним плагин определяет, какой мод используется в дизайне. Если их префиксы написаны с ошибкой или отсутствуют, мод распознать не получится.

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

Создайте два фрейма для слайдов и кнопок управления, добавьте префиксы [c-slide] карточкам со слайдами и [l-#next]/[l-#prev] кнопкам вперёд/назад.
Элемент
Класс / ссылка
Префикс
Слайды*
.slide
[c-slide]
Кнопка «Назад»
#prev
[l-#prev]
Кнопка «Вперёд»
#next
[l-#next]
Инструкция по установке: Слайдер в Zero-блоке

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

Создайте в Фигме фрейм со слайдером, добавьте слайдам префикс [c-slide] и объедините их в общую группу (фрейм). Задайте префикс [c-container] шейпу-контейнеру и [l-#next]/[l-#prev] вперёд/назад.
Элемент
Класс / ссылка
Префикс
Слайды*
.slide
[c-slide]
Контейнер для слайдера*
.container
[c-container]
Кнопка «Назад»
#prev
[l-#prev]
Кнопка «Вперёд»
#next
[l-#next]
Инструкция по установке: Слайдер в шейпе Zero-блока

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

Создайте в Фигме несколько фреймов: общий фрейм со вкладками и фреймы с переключающимся контентом. Каждой вкладке укажите префикс [l-#tab] и расположите их в слоях в порядке возрастания. При необходимости рядом со вкладками можно также добавить кнопки управления [l-#prev]/[l-#next]
Элемент
Класс / ссылка
Префикс
Вкладки* (в одном блоке)
#tab
[l-#tab]
Кнопка «Назад»
#prev
[l-#prev]
Кнопка «Вперёд»
#next
[l-#next]
Инструкция по установке: Классические табы в Zero-блоке

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

Создайте в Фигме несколько переключаемых фреймов, задайте вкладкам в каждом из них префикс [l-#tab] и расположите их в слоях в порядке возрастания. При необходимости можно добавить в блок кнопки управления с префиксом [l-#prev]/[l-#next]
Элемент
Класс / ссылка
Префикс
Вкладки* (в каждом блоке)
#tab
[l-#tab]
Кнопка «Назад»
#prev
[l-#prev]
Кнопка «Вперёд»
#next
[l-#next]
Инструкция по установке: Переключатель Zero-блоков по кнопкам

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

Создайте в Фигме фрейм, добавьте в него вкладки с префиксом [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-блоке

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

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