Auto fields filler by text data
Automatically populate components with real data and images.
Plugin Preview
About this plugin
Populate designs with real data in seconds.
This plugin automates the tedious task of filling UI mockups with content. Instead of manually copying and pasting text or images into 50 different cards, simply define your data lists, and let the plugin do the heavy lifting.
Key Features:
- Mass Cloning: Instantly generate dozens or hundreds of instances from a single Master Component.
- Smart Data Mapping: Automatically inject text strings into text layers and fetch images from URLs to fill shapes.
- Image Proxy Support: Detects URLs in your data and downloads images securely to fill your layers.
- Grid Overflow System: Perfect for pagination. Define multiple target frames (e.g., "Page 1", "Page 2"), and the plugin will distribute items across them based on your specified limits.
Perfect for: E-commerce catalogs, user lists, news feeds, and complex data tables.
How to use (Instructions)
Select the Component: Click on the Master Component (or Frame) you want to duplicate on your canvas.
Map Data Layers:
Click + Add Data Layer.
Enter the Layer Name exactly as it appears in your component (e.g., Title, Price, ImageLayer).
Paste your list of data into the text area (one item per line).
Note: If you paste a URL starting with http..., the plugin will automatically fetch and apply it as an image fill.
Configure Grids:
Enter the Frame Name where you want the items to appear.
Set the Count limit (how many items fit in that frame).
Add multiple grids if you need pagination (once the first frame is full, items will flow to the next).
Generate: Click 🚀 GENERATE and watch your design populate!
Plugin Details
| Version | 3 |
|---|---|
| Created | December 1, 2025 |
| Last Updated | December 11, 2025 |
| Category | data-templates |
| Creator | DISORDER |
| Stats | 0 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Network Access:
CORS DATA
- Editor Types:figma
- Allowed Domains:
- http://localhost:3000
- https://figma-proxy-mpbg.onrender.com
More Like This
Discover other plugins in the data-templates category.