SXL Studio
Database

Overview

What Database does in SXL Studio: datasets, mappings, assets, Apply Data, Generate instance, and practical workflow in Figma.

What Database is

Database connects your design layers in Figma with external content.

Instead of filling cards, lists, and tables manually, you:

  1. prepare data in JSON/CSV,
  2. define mapping rules,
  3. run Apply Data or Generate instance.

This keeps UI content synchronized with real product data and reduces manual errors.

What you can control

Database can apply data to:

  • TEXT layers (characters);
  • image-capable layers (fills) from URLs, uploaded assets, data URLs, or Git paths;
  • INSTANCE component properties via directives;
  • node visibility/opacity/lock via directives;
  • row visibility in list-like containers via @rows.

It also supports:

  • Auto-hide unused for mapping targets;
  • multi-row generation from one template instance;
  • Git-backed datasets/mappings/assets.

Database workspace

The Database tab has two areas:

AreaPurpose
Left panelFile tree (datasets, mappings, assets, folders)
Center panelDataset or mapping editor

File types

  • Dataset: JSON/CSV data source.
  • Mapping (.map.json): key/layer binding rules.
  • Asset: uploaded image file for replacements.

Main actions

Apply Data

Runs all mappings in selected scope and writes values to matching layers.

Available scopes:

  • Selection (default)
  • Page
  • Document

Use Selection for fast iteration; use Page/Document for full updates.

Generate instance

Creates multiple rows/instances from one selected template and applies mapping row-by-row.

Typical use cases:

  • product card grids,
  • pricing rows,
  • menu/catalog previews,
  • large list mocks with realistic content.

Typical workflow

  1. Create/import a dataset (.json or .csv).
  2. Create a mapping (.map.json) and set fields.
  3. Select target objects in Figma.
  4. Click Apply Data.
  5. Optional: run Generate instance to duplicate rows automatically.

Plan-dependent features

Some controls depend on active feature flags (plan/tier), for example:

  • Generate instance,
  • @prop / @node directives,
  • Auto-hide + component binding.

If your plan does not include a feature, related controls may be hidden or ignored.