Fetch N' Set is a powerful Figma plugin that allows you to populate your designs with real data from JSON files or APIs. It handles text, images, and nested data structures with ease, making it the perfect tool for designing with data.
- 🐶 Fetch Data: Load data from a local JSON file or fetch it directly from a REST API.
- batch Population: Select multiple layers (frames, groups) and populate them all at once.
- 🖼️ Smart Image Handling:
- Supports standard image formats (JPG, PNG).
- WebP Support: Automatically converts WebP images (which Figma doesn't natively support) using a built-in browser fallback.
- Robust Loading: Handles redirects and complex image headers gracefully.
- 📂 Nested Data Support: Automatically flattens nested JSON objects (e.g.,
files: [{ url: "..." }]becomesfiles.0.url), allowing you to bind data to deep properties without manual reformatting. - 🎨 Intelligent Binding: Bind layer names to data keys (e.g., rename a text layer to
#nameto populate it with thenamefield). - Start Over: Easily reset your workspace to load new datasets.
- Load Data:
- Drag and drop a JSON file.
- Or click "Fetch from API" to make a GET request.
- Explore Data:
- View your data in the interactive table.
- Click a row to inspect details.
- Bind Layers:
- Select a layer in Figma.
- In the plugin Inspector, click a data key to bind it (renames layer to
#key).
- Populate:
- Select one or more parent frames in Figma.
- Click Populate Selected Layers.
- Watch your design fill with real data!
This plugin is built with React, Vite, and TypeScript.
- Node.js & npm
# Install dependencies
npm install
# Watch mode (for development)
npm run dev
# Build for production
npm run buildsrc/ui: The React frontend (UI logic, components, styles).src/code: The Figma plugin sandbox code (backend logic, layer manipulation).
Contributions are welcome! Please see CONTRIBUTING.md for details.
MIT © 2026. See LICENSE for details.