Вкладка Database
Как заполнять макеты реальными данными: наборы данных JSON и CSV, маппинги на слои, изображения, кнопка Apply Data с областью применения и Generate instances для списков и таблиц.
Вкладка Database связывает слои макета с внешними данными. Вместо ручного заполнения карточек, списков и таблиц вы загружаете данные, описываете, какой ключ идёт в какой слой, и нажимаете Apply Data. Для списков из многих строк есть Generate instances: плагин размножит шаблон и заполнит каждую копию своей строкой.
Вкладка Database: дерево данных слева, редактор маппинга справа с полями Key Expression, Target Layer и Fill.
Из чего состоит
| Файл | Формат | Что это |
|---|---|---|
| Data | .json или .csv | Строки контента: массив объектов JSON или таблица CSV |
| Mapping | .map.json | Правила: какой ключ данных попадает в какой слой |
| Asset | PNG, JPG, GIF, WebP, SVG | Изображение, которое можно подставить в слой |
Все файлы лежат в папке данных источника: внутри плагина, в репозитории Git или в папке Local Workspace, и синхронизируются вместе с токенами. См. Источники токенов и синхронизация.
Что можно заполнить
- Текстовые слои: текст из ключа данных.
- Слои с изображением: картинка по адресу
https://…, из загруженного ассета или из файла в репозитории. - Свойства инстансов компонентов: текстовые, булевы и варианты через директивы
@prop. - Видимость и прозрачность слоёв через
@node,@hide,@show. - Число видимых строк в контейнере через
@rows.
Рабочая область
Боковая панель показывает дерево папок с данными, маппингами и изображениями. В её тулбаре: поиск, Add dataset file, New mapping, Add folder, а также загрузка файлов JSON, CSV и изображений с компьютера. Внизу кнопка Generate instance.
Рабочая область открывает выбранный файл: набор данных в виде кода или таблицы, маппинг в редакторе полей.
Клик по изображению в дереве подставляет его как заливку в выделенный слой.
Как это работает
- Создайте данные. Нажмите Add dataset file, введите имя файла с расширением
.jsonили.csv, нажмите Enter и заполните содержимое в редакторе, или загрузите готовый файл через Upload. - Создайте маппинг. Нажмите New mapping, введите имя и добавьте поля: слева ключ данных, справа имя целевого слоя. Кнопка пипетки берёт имя слоя из выделения в Figma.
- Выделите макет в Figma: карточку, список или страницу.
- Нажмите Apply Data. Стрелка рядом выбирает область: Selection по умолчанию, Page или Document. Плагин найдёт слои с именами из маппинга и запишет значения.
Подробнее о форматах и ключах: Файлы и маппинги. О правилах применения и генерации: Apply Data и Generate.
Apply Data
Кнопка в шапке плагина. Состояния: Apply Data до первого применения, Applied после, Update Data, когда данные изменились. Если в выделении нет слоёв, подходящих ни под один маппинг, кнопка неактивна с подсказкой Selection has no layers matching any mapping. Switch scope to Page or Document, or select a matching layer.
Generate instances
Кнопка Generate instance внизу дерева. Выделите фрейм с автолейаутом или инстанс, который будет шаблоном строки, выберите маппинг и число строк: все или ограничение. Плагин создаст копии по числу строк данных и заполнит каждую. Подходит для сеток товарных карточек, строк таблиц, списков с реальным контентом.