DataMapper Pro - Bulk Generate Frames From JSON

About this plugin

1. Introduction

DataMapper Pro generates dynamic Figma frames from JSON/CSV data. Transform design templates into data-driven frames containing text, images, barcodes, and QR codes with advanced text manipulation via helper functions.

2. Getting Started

Install via Figma Plugins → "DataMapper Pro"

Select a frame with template fields labeled with # (e.g., #employeeName, #employeeId)

Click "Analyze" in the plugin panel

Data Types Supported:

Text, Image (URL), Barcode (CODE39), QR Code

3. Analyzing Your Template

The plugin lists all template fields. Assign appropriate data types to each field and press "Next".

4. Importing Data

JSON Import

Upload JSON file or provide URL

Set entry point: '$' (root) or '$.data' (nested arrays)

Configure delimiter (default '-') to flatten nested objects

CSV Import (NEW)

Upload CSV files with configurable delimiters (comma, semicolon, tab, pipe)

Download sample CSV for format reference

Automatic header detection and data type recognition

5. Mapping Fields

Basic Mapping

Map template fields to data fields from your JSON/CSV with data type assignments and preview.

Helper Functions (NEW)

Transform text fields using template syntax: {{functionName(field:fieldName, parameters)}}

Available Functions:

Case: trim, uppercase, lowercase, titlecase

Programming: camelcase, snakecase, kebabcase

Formatting: padleft(field, length, char), padright(field, length, char)

Advanced: concat(field1, "text", field2) - mix fields and literals

Features:

Toggle helper visibility for clean UI

Interactive parameter configuration for complex functions

Tooltips with examples

Real-time syntax preview

Examples:

{{trim(field:name)}} - " John " → "John"

{{uppercase(field:city)}} - "london" → "LONDON"

{{padleft(field:id, 5, "0")}} - "123" → "00123"

{{concat(field:first, " ", field:last)}} - "John" + "Doe" → "John Doe"

6. Generating Frames

Click "Generate" to:

Process field mappings and helper functions

Apply text transformations

Generate frames for each data entry

Place frames on the same page

7. Disclaimers

Select properly structured frames only

One frame processed at a time

Duplicate field names use last defined data type

Invalid data types default to text

Helper functions only for text fields

URLs must be accessible via GET requests

Large datasets may impact performance

CSV files need proper headers in first row

8. Updates

2025-08-16: Major Release - CSV Support & Helper Functions

✅ CSV import with configurable delimiters

✅ Sample CSV download

✅ 10 text helper functions (case, formatting, concatenation)

✅ Interactive parameter configuration

✅ Collapsible helper UI with tooltips

✅ Template syntax: {{functionName(field:fieldName, params)}}

2023-10-28: Fixed JSON upload, added frame naming and mapping statistics.