DataMapper Pro is a Figma plugin designed to simplify the process of generating frame templates based on a JSON dataset. With this plugin, you can transform your design templates into dynamic data-driven frames. This documentation will guide you through the usage and features of the plugin.
2. Getting Started
2.1. Installation
To use DataMapper Pro, follow these steps:
Open Figma and create or open a design document.
Navigate to the "Plugins" menu and select "Manage Plugins."
Search for "DataMapper Pro" and click the "Install" button to add it to your Figma workspace.
2.2. Selecting a Frame
Before you can start generating templates, you must select a frame in your Figma design. This frame should contain the template fields that you want to map to your JSON data. Each template field must be labeled with a unique name starting with a # symbol. For example, #employeeName, #employeeId, and so on.
3. Analyzing Your Template
Once you've selected a frame, follow these steps:
Click on the frame you've chosen in the Figma canvas.
In the DataMapper Pro panel, click the "Analyze" button.
3.1. Defining Data Types
The plugin will list all the template fields within the frame. For each field, you need to select the appropriate data type. Supported data types include:
Text
Image (URL)
Barcode (CODE39)
QR Code
Ensure that you correctly assign data types to each field and then press the "Next" button.
4. Importing JSON Data
Once you've defined data types for your template fields, follow these steps:
Click the "Import & Process" button in the plugin panel.
You'll be prompted to upload a JSON file or provide a JSON URL.
Additionally, you can specify the entry point within the JSON data using the '$' symbol for the root of the array or '$.data' for nested data arrays.
There is also an option to set a delimiter (default is '-') to flatten nested objects in the JSON.
5. Mapping Fields
After importing your JSON data, the plugin will display a table for mapping fields. You can review and reassign the mappings for each field if necessary. Ensure that the mappings are correct, and press the "Generate" button.
6. Generating Frames
Upon pressing the "Generate" button, the plugin will generate frames for each data entry in the JSON array and place them in the same page. These frames will reflect the template fields you defined earlier.
7. Disclaimers
Please be aware of the following disclaimers:
The frame you select must be structured properly for the plugin to work effectively.
Only one frame can be processed at a time.
If the same name is used for multiple fields, the last defined data type will be used.
Fields with incorrect data types will be treated as text fields.
Concatenation of multiple fields is not supported.
Ensure that the provided URLs for JSON, images, QR codes, and barcodes are accessible via a simple GET request without authentication barriers.
If the image, QR code, or barcode data is invalid or too long, the default image will be used.
Large data arrays or images may take time to process or lead to plugin instability. It's recommended to use smaller data chunks.
8. Reporting Bugs and Providing Feedback
If you encounter any bugs or typos in the plugin, please report them on the GitHub issue tracker.
9. Contact Information
For questions, suggestions, or additional information, you can contact the plugin developer, Devdutta Bain, via email at devdutta.bain@gmail.com.
Thank you for using DataMapper Pro to enhance your Figma design workflow!
Table of Contents
1. Introduction
DataMapper Pro is a Figma plugin designed to simplify the process of generating frame templates based on a JSON dataset. With this plugin, you can transform your design templates into dynamic data-driven frames. This documentation will guide you through the usage and features of the plugin.
2. Getting Started
2.1. Installation
To use DataMapper Pro, follow these steps:
2.2. Selecting a Frame
Before you can start generating templates, you must select a frame in your Figma design. This frame should contain the template fields that you want to map to your JSON data. Each template field must be labeled with a unique name starting with a
#symbol. For example,#employeeName,#employeeId, and so on.3. Analyzing Your Template
Once you've selected a frame, follow these steps:
3.1. Defining Data Types
The plugin will list all the template fields within the frame. For each field, you need to select the appropriate data type. Supported data types include:
Ensure that you correctly assign data types to each field and then press the "Next" button.
4. Importing JSON Data
Once you've defined data types for your template fields, follow these steps:
5. Mapping Fields
After importing your JSON data, the plugin will display a table for mapping fields. You can review and reassign the mappings for each field if necessary. Ensure that the mappings are correct, and press the "Generate" button.
6. Generating Frames
Upon pressing the "Generate" button, the plugin will generate frames for each data entry in the JSON array and place them in the same page. These frames will reflect the template fields you defined earlier.
7. Disclaimers
Please be aware of the following disclaimers:
8. Reporting Bugs and Providing Feedback
If you encounter any bugs or typos in the plugin, please report them on the GitHub issue tracker.
9. Contact Information
For questions, suggestions, or additional information, you can contact the plugin developer, Devdutta Bain, via email at devdutta.bain@gmail.com.
Thank you for using DataMapper Pro to enhance your Figma design workflow!