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

Главная

Модификации

Статья

10 минут

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

Вместе с автором Arvess мы придумали способ, как решить эту проблему — переносить из Фигмы не только вёрстку, но и классы и ссылки, которые нужны для работы модов. Их можно задать прямо в макете — при переносе в Тильду расширение установит их автоматически, останется только скопировать код и убедиться, что всё работает.

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

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

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

Теперь все настройки можно сделать прямо в Фигме, в момент, когда вы только рисуете макет — и без проблем перенести их в Тильду. Arvess узнает модификации в макете по классам и ссылкам и перенесёт их в Zero-блок.

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

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

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

Подробная инструкция и видео по переносу есть тут: 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 в конец ссылки — диагностика покажет ошибки и рекомендации по их исправлению.

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

]]>