SXL Studio
Database

Обзор

Что делает Database в SXL Studio: datasets, mappings, assets, Apply Data, Generate instance и практический workflow в Figma.

Overview

Database связывает слои в вашем макете Figma с внешними данными. Вместо ручного заполнения карточек, списков и таблиц вы готовите данные, задаёте правила маппинга и запускаете Apply Data или Generate instance.

Строительный блокХранится какЧто это
Dataset.json / .csvСтроки контента (JSON-массив/объект или CSV-таблица)
Assetфайл изображенияПереиспользуемое изображение (base64 / data URL или Git-путь)
Mapping.map.jsonПравила связи ключей датасета → слои Figma (fields[])
ДействиеЧто делает
Apply DataЗаполняет выбранные существующие ноды из датасета через маппинг
Generate instanceКлонирует шаблон-инстанс по строке датасета и заполняет каждую строку

Так контент в UI синхронизируется с реальными продуктовыми данными, а ручных ошибок становится меньше.

Чем можно управлять

Через Database можно заполнять:

  • TEXT-слои (characters);
  • слои с изображением (fills) из URL, загруженных assets, data URL или Git-путей;
  • свойства INSTANCE через директивы;
  • видимость/opacity/lock узлов через директивы;
  • видимость строк в контейнерах списочного типа через @rows.

Также доступны:

  • Auto-hide unused для целей маппинга;
  • генерация нескольких строк/инстансов из одного шаблона;
  • Git-синхронизация datasets/mappings/assets.

Рабочая область Database

Во вкладке Database две зоны:

ЗонаНазначение
Левая панельДерево файлов (datasets, mappings, assets, папки)
Центральная панельРедактор dataset или mapping

Типы файлов

  • Dataset: источник данных JSON/CSV.
  • Mapping (.map.json): правила привязки ключей к слоям.
  • Asset: загруженный файл изображения для подстановки.

Основные действия

Apply Data

Запускает все маппинги в выбранном scope и записывает значения в совпавшие слои.

Доступные scope:

  • Selection (по умолчанию)
  • Page
  • Document

Для быстрой итерации используйте Selection; для полного обновления — Page/Document.

Generate instance

Создаёт множество строк/инстансов из одного выбранного шаблона и применяет маппинг построчно.

Типовые сценарии:

  • сетки товарных карточек,
  • строки таблиц тарифов,
  • превью меню/каталогов,
  • большие списки с реальным контентом.

Типовой workflow

  1. Создайте или импортируйте dataset (.json или .csv).
  2. Создайте mapping (.map.json) и настройте поля.
  3. Выделите целевые объекты в Figma.
  4. Нажмите Apply Data.
  5. При необходимости запустите Generate instance для автодублирования строк.

Функции, зависящие от плана

Часть возможностей зависит от активных feature flags (план/тариф), например:

  • Generate instance,
  • директивы @prop / @node,
  • Auto-hide + component binding.

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

Связанные страницы