Data mapping

About this plugin

Data Mapping connects your Figma components to real data from JSON and CSV files. Stop copy-pasting placeholder text — fill entire designs with production data in seconds.

---

WHAT YOU CAN DO

→ Create and edit JSON/CSV data files right inside the plugin

→ Map data keys to Figma layer names with flexible expressions

→ Apply data to any selection — text, images, component properties

→ Generate multiple component instances filled with unique data

→ Control visibility, properties, and row counts from your data

→ Sync everything with GitHub or GitLab — branches, pull, push

→ Import/Export data as ZIP for easy team sharing

---

HOW IT WORKS

1. Create a data file (JSON or CSV) in the plugin

2. Create a mapping — connect data keys like [name] or [price] to your Figma layer names

3. Select a frame and click Apply — done!

For bulk work, use Generate to create dozens of filled components from a single template.

---

KEY FEATURES

• Smart auto-fill: the plugin matches your data keys to layer names automatically

• Multiple data sources: each field can pull from a different file

• Nested data: use dot notation like [user.address.city]

• Image support: URLs are applied as image fills to shapes

• Component properties: control variants, toggles, and text props with @prop: syntax

• Visibility control: hide/show layers with @hide, @node:visible, @rows:N

• Row count control: set how many child rows are visible per instance with $visibleRows

• Git integration: push/pull data to GitHub or GitLab, switch branches, preview diffs

• Grouped auto-generation: map different data files to different sections of a component

• Fill strategies: sequential (A-Z), reverse (Z-A), or random data distribution

• Minimize mode: collapse the plugin to a compact bar for small screens

• Built-in documentation with search (EN, RU, ZH)

---

WORKS GREAT FOR

• Design systems with real content

• Tables, cards, lists filled with production data

• Prototypes that need realistic variety

• Teams that version-control design data in Git

• QA mockups with edge-case data (long names, missing fields, etc.)

Free to use with all features included. 🎉