Одно из главных преимуществ Zero-блоков в том, что дизайн для них можно собрать не только вручную, но и перенести из Фигмы. Правда, переносится только вёрстка, а чтобы блок мог работать как полноценный слайдер или аккордеон, элементы и код приходится настраивать вручную.
Вместе с автором Arvess мы придумали способ, как решить эту проблему — переносить из Фигмы не только вёрстку, но и классы и ссылки, которые нужны для работы модов. Их можно задать прямо в макете — при переносе в Тильду расширение установит их автоматически, останется только скопировать код и убедиться, что всё работает.
В основе способа лежит два инструмента:
- Arvess — сервис для переноса Zero-блоков из Фигмы в Тильду. Анализирует выделенный фрейм и собирает из него Zero-блок со всеми стилями и настройками для каждого брейкпоинта — на выходе получается точная копия макета. В общем, полезный и удобный инструмент, который экономит дизайнерам часы работы.
- Модификации для Zero-блоков — скорее всего, уже знакомая вам библиотека. Позволяет сделать дизайн функциональным — например, собрать из Zero-блоков слайдер, вкладки или аккордеон со своей логикой, поведением и стилями. Способ установки одинаковый для всех модов: сверстать элементы в Zero → добавить им классы/ссылки → вставить в блок T123 строчку кода с нужными настройками.
В работе дизайнеры часто используют вместе и то, и другое. Но если перенести дизайн и сгенерировать код можно легко, то классы и ссылки до сих пор приходится расставлять вручную и заодно следить, чтобы в редакторе при этом ничего не слетело (так например, внезапная смена типа группы с Object на Logical — отдельная боль, после которой приходится чистить десяток лишних классов).
Теперь все настройки можно сделать прямо в Фигме, в момент, когда вы только рисуете макет — и без проблем перенести их в Тильду. Arvess узнает модификации в макете по классам и ссылкам и перенесёт их в Zero-блок.
Что нужно для переноса?
Для переноса понадобится плагин Arvess для Figma и расширение Arvess для браузера Chrome. После того, как всё установили:
- Добавьте префиксы к именам слоёв в Фигме — [c-] для классов и [l-] для ссылок (см. подробнее в разделе «Как правильно назвать слои»).
- Запустите плагин — он проанализирует выделенный фрейм, определит модификацию и подскажет дальнейшие шаги.
- Скопируйте данные макета и перенесите их в Zero-блок через расширение Arvess. Классы и ссылки с префиксами появятся на элементах автоматически.
- После переноса останется только задать нужный класс самому блоку, скопировать код модификации и вставить его в конец страницы.
Подробная инструкция и видео по переносу есть тут: arvess.ru/guide
Как правильно назвать слои в Фигме?
Разметка строится на двух префиксах, которые добавляются перед названием слоя:
Всё, что идёт после префикса и пробела, — произвольное имя слоя, можно указывать на своё усмотрение.
Классы блоков (.uc-slider, .uc-accordion и др.) в Фигме задавать не нужно. Они указываются в настройках самого блока в Тильде, как обычно.
Ниже — небольшие инструкции и справочник имён с классами и ссылками по каждой модификации. Элементы, помеченные звёздочкой — обязательные, по ним плагин определяет, какой мод используется в дизайне. Если их префиксы написаны с ошибкой или отсутствуют, мод распознать не получится.
Слайдер в Zero-блоке
Создайте два фрейма для слайдов и кнопок управления, добавьте префиксы [c-slide] карточкам со слайдами и [l-#next]/[l-#prev] кнопкам вперёд/назад.
Инструкция по установке: Слайдер в Zero-блоке
Слайдер в шейпе Zero-блока
Создайте в Фигме фрейм со слайдером, добавьте слайдам префикс [c-slide] и объедините их в общую группу (фрейм). Задайте префикс [c-container] шейпу-контейнеру и [l-#next]/[l-#prev] вперёд/назад.
Инструкция по установке: Слайдер в шейпе Zero-блока
Классические табы в Zero-блоке
Создайте в Фигме несколько фреймов: общий фрейм со вкладками и фреймы с переключающимся контентом. Каждой вкладке укажите префикс [l-#tab] и расположите их в слоях в порядке возрастания. При необходимости рядом со вкладками можно также добавить кнопки управления [l-#prev]/[l-#next]
Инструкция по установке: Классические табы в Zero-блоке
Переключатель Zero-блоков по кнопкам
Создайте в Фигме несколько переключаемых фреймов, задайте вкладкам в каждом из них префикс [l-#tab] и расположите их в слоях в порядке возрастания. При необходимости можно добавить в блок кнопки управления с префиксом [l-#prev]/[l-#next]
Инструкция по установке: Переключатель Zero-блоков по кнопкам
Переключатель контента в Zero-блоке
Создайте в Фигме фрейм, добавьте в него вкладки с префиксом [l-#tab] и переключаемый контент [c-tab-elem] и расположите их в слоях в порядке возрастания. При необходимости можно также добавить во фрейм кнопки управления [l-#prev]/[l-#next]
Инструкция по установке: Переключатель контента в Zero-блоке
Продвинутый слайдер
Создайте фрейм со слайдером, задайте каждому слайду префикс [c-slide] и объедините их в общий фрейм с Auto Layout. Точкам пагинации добавьте префикс [c-dot] и точно так же объедините их во фрейм; кнопкам управления задайте префиксы [l-#next]/[l-#prev]
Инструкция по установке: Продвинутый слайдер
Продвинутый слайдер со скроллбаром
Создайте фрейм со слайдером, задайте каждому слайду префикс [c-slide] и объедините их в общий фрейм с Auto Layout. Полосе прокрутки добавьте префикс [c-scrollbar], ползунку — [c-scrollbar-thumb] и так же объедините их в общий фрейм; кнопкам управления задайте префиксы [l-#next]/[l-#prev]
Инструкция по установке: Продвинутый слайдер со скроллбаром
Продвинутый слайдер с нумерацией
Создайте фрейм со слайдером, задайте каждому слайду префикс [c-slide] и объедините их в общий фрейм с Auto Layout. Добавьте префиксы для нумерации: [c-current] текущему слайду и [c-total] общему их количеству; кнопкам управления задайте префиксы [l-#next]/[l-#prev]
Инструкция по установке: Продвинутый слайдер с нумерацией
Аккордеон в Zero-блоке
Создайте фрейм с аккордеоном в раскрытом состоянии, объедините каждую вкладку и содержимое в отдельные группы (фреймы) с префиксами [c-accordion] и [c-accordion-content] и расположите их в слоях в порядке возрастания. При необходимости во фрейм можно также добавить иконки с префиксом [c-accordion-icon]
Инструкция по установке: Аккордеон в Zero-блоке
Что делать после переноса?
После переноса блока останется всего три шага:
- Задать класс блоку. Укажите нужный класс в настройках блока в Тильде (например, .uc-slider, .uc-accordion или другой, указанный на странице мода)
- Вставить код инициализации. Скопируйте код из генератора на странице мода и вставьте его в блок T123 в конец страницы.
- Проверить результат. Опубликуйте страницу и откройте её в браузере. Если возникнут сложности, можно добавить ?showerrors в конец ссылки — диагностика покажет ошибки и рекомендации по их исправлению.
Надеемся, что теперь рабочий процесс на Тильде станет для вас удобнее.
Пользуйтесь с удовольствием!
Пользуйтесь с удовольствием!
