DataMapper Pro - Bulk Generate Frames From JSON

About this plugin

1. IntroductionDataMapper 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 StartedInstall via Figma Plugins → "DataMapper Pro"Select a frame with template fields labeled with # (e.g., #employeeName, #employeeId)Click "Analyze" in the plugin panelData Types Supported:Text, Image (URL), Barcode (CODE39), QR Code3. Analyzing Your TemplateThe plugin lists all template fields. Assign appropriate data types to each field and press "Next".4. Importing DataJSON ImportUpload JSON file or provide URLSet entry point: '$' (root) or '$.data' (nested arrays)Configure delimiter (default '-') to flatten nested objectsCSV Import (NEW)Upload CSV files with configurable delimiters (comma, semicolon, tab, pipe)Download sample CSV for format referenceAutomatic header detection and data type recognition5. Mapping FieldsBasic MappingMap 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, titlecaseProgramming: camelcase, snakecase, kebabcaseFormatting: padleft(field, length, char), padright(field, length, char)Advanced: concat(field1, "text", field2) - mix fields and literalsFeatures:Toggle helper visibility for clean UIInteractive parameter configuration for complex functionsTooltips with examplesReal-time syntax previewExamples:{{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 FramesClick "Generate" to:Process field mappings and helper functionsApply text transformationsGenerate frames for each data entryPlace frames on the same page7. DisclaimersSelect properly structured frames onlyOne frame processed at a timeDuplicate field names use last defined data typeInvalid data types default to textHelper functions only for text fieldsURLs must be accessible via GET requestsLarge datasets may impact performanceCSV files need proper headers in first row8. Updates2025-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.