Tildify
Elements

Табы

Это универсальные табы: они подходят для блоков, где нужно быстро переключать контент по кнопкам и держать все панели в одном месте.

Как создать в ФигмеКак создать в Тильде
Примеры работы табов
Почему это удобно
Если табы правильно собраны в Figma и размечены тегами, Tildify сам перенесет основную механику в Tilda, а тебе останется только проверить структуру и при необходимости настроить поведение.
Подходит для тарифов, кейсов, преимуществ, FAQ по категориям и любых блоков, где нужно быстро переключать контент.
Можно собрать классические табы с кнопками сверху или дополнить их кнопками назад и вперед.
Поддерживает счетчики, autoplay, анимацию переключения и другие настройки через конфиг.
После добавления в Tilda параметры можно менять через удобную кнопку на панели Tildify Elements.
1. Подготовка к экспорту в Figma
Ниже самый простой и понятный способ собрать табы так, чтобы они корректно прошли валидацию и потом нормально работали в Tilda.
Видеоинструкция: табы из Figma
1

Подготовь кнопки табов. Для удобства можно собрать их в один ряд.

2

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

3

Количество кнопок и панелей должно совпадать.

4

Объедини кнопки и панели в один общий контейнер табов и собери его как frame или группу.

5

Поставь тег [tabs] на общий контейнер табов.

6

Поставь тег [tabs-button] на каждую кнопку таба. Если хочешь явно связать кнопку с конкретной панелью, используй id, например [tabs-button|id=1].

7

Поставь тег [tabs-panel] на каждую панель. Панель лучше делать отдельным контейнером. Для явной связки с кнопкой задай такой же id, например [tabs-panel|id=1]. Если id не заданы, валидатор и импорт соберут структуру по геометрическому порядку кнопок и панелей.

8

Если нужны кнопки переключения, добавь элементы назад и вперед и задай им теги [tabs-prev] и [tabs-next].

9

Если нужен нумератор, подготовь текстовые элементы и задай им теги [tabs-current] и [tabs-total].

10

Если на странице несколько блоков табов, задай корневому контейнеру свой id, например [tabs|id=pricing]. Такой же id потом используй у управляющих элементов.

11

Для удобного нейминга тегов можно использовать Таггер.

12

Экспортируй табы в Tilda. Плагин автоматически создаст управляющие скрипты для их работы.

Демо-файл в Figma
2. Как создать в Tilda
Если собираешь табы вручную или хочешь проверить импортированный блок, ориентируйся на эту последовательность.
Видеоинструкция: табы в Tilda
1

Создай кнопки табов. Каждой кнопке задай класс tf_tabs-button. Если хочешь явно связать кнопку с конкретной панелью, используй вариант с id, например tf_tabs-button-1.

2

Создай панели с контентом. Каждая панель должна быть отдельной группой типа Object, и каждой панели задай класс tf_tabs-panel. Для явной связки с кнопкой используй такой же id, например tf_tabs-panel-1. Если id не заданы, структура будет собираться по порядку кнопок и панелей внутри блока.

3

Количество кнопок tf_tabs-button и панелей tf_tabs-panel должно совпадать.

4

Панели лучше собирать как отдельные контейнеры типа Object, чтобы контент внутри не ломал структуру.

5

Объедини кнопки и панели в один общий контейнер типа Object и задай ему класс tf_tabs.

6

Если нужны кнопки назад и вперед, задай им классы tf_tabs-prev и tf_tabs-next.

7

Если нужен нумератор, используй tf_tabs-current для текущего номера и tf_tabs-total для общего количества.

8

Если в одном Zero Block несколько блоков табов, используй отдельные id у корневых контейнеров и управляющих элементов: tf_tabs-1, tf_tabs-prev-1, tf_tabs-next-1, tf_tabs-current-1, tf_tabs-total-1.

9

Добавь конфиг табов через меню элементов Zero Block.

10

Если нужна ручная настройка параметров, выдели HTML-блок табов или сами табы и открой кнопку настроек на панели Tildify Elements.

3. Как это работает при импорте
Если структура собрана правильно, Tildify переносит базовую механику табов автоматически.
Автоматически добавит нужные классы элементам табов.
Автоматически добавит код табов и JSON-конфиг в блок.
Если что-то собрано не так, debug-режим подскажет, что именно нужно поправить.
Умный дебагер
Если табы не заработали с первого раза, ориентируйся на умный дебагер. Он быстро показывает, чего не хватает в структуре и какие элементы нужно поправить.
Покажет, если внутри блока нет кнопок табов или панелей.
Подскажет, если количество кнопок и панелей не совпадает.
Поможет разобраться с id, если на странице несколько блоков табов.
4. Теги в Figma
[tabs]
Корневой контейнер
Ставится на общий контейнер табов. Если блоков табов несколько, используй id, например: [tabs|id=pricing].
[tabs-button]
Кнопка таба
Ставится на каждую кнопку, которая переключает панели. Кнопки должны находиться внутри общего контейнера [tabs].
[tabs-panel]
Панель таба
Ставится на каждую панель с контентом. Панель лучше делать отдельным контейнером.
[tabs-prev]
Кнопка назад
Необязательный тег для перехода к предыдущему табу. Если блоков табов несколько, используй тот же id, что и у корневого контейнера.
[tabs-next]
Кнопка вперед
Необязательный тег для перехода к следующему табу. Если блоков табов несколько, используй тот же id, что и у корневого контейнера.
[tabs-current]
Текущий номер
Необязательный тег для текстового элемента, где должен показываться текущий номер активного таба.
[tabs-total]
Общее количество
Необязательный тег для текстового элемента, где должно показываться общее количество табов.
5. Классы в Tilda
tf_tabs
Корневой контейнер
Ставится на общий контейнер табов. Если блоков несколько, используй версию с id, например: tf_tabs-pricing.
tf_tabs-button
Кнопка таба
Ставится на каждую кнопку таба внутри корневого контейнера.
tf_tabs-panel
Панель таба
Ставится на каждую панель с контентом. Количество панелей должно совпадать с количеством кнопок.
tf_tabs-prev
Кнопка назад
Необязательный класс для перехода к предыдущему табу. Если блоков табов несколько, используй вариант с тем же id.
tf_tabs-next
Кнопка вперед
Необязательный класс для перехода к следующему табу. Если блоков табов несколько, используй вариант с тем же id.
tf_tabs-current
Текущий номер
Необязательный класс для текстового элемента с номером активного таба.
tf_tabs-total
Общее количество
Необязательный класс для текстового элемента с общим количеством табов.