@ -13,6 +13,7 @@ Select any frame or group of layers in Figma, click **Extract**, and the plugin
3. **Capture text content** inline, including font family, size, line height, letter spacing, and alignment
4. **Export visual assets** — PNG for every non-text node, plus SVG for nodes that don't contain text children
5. **Package everything** into a downloadable `.zip` archive with a structured `data.md` file
6. **Copy the Developer System Prompt** to your clipboard automatically. This prompt instructs code-generation AI agents on how to strictly implement the extracted design with zero guesswork.
---
@ -52,16 +53,47 @@ The markdown file contains:
| Node with text children | ✓ | ✗ | PNG preserves visual context; SVG skipped to avoid exposing raw text paths |
| Node without text | ✓ | ✓ | Both formats exported for maximum flexibility |
### Developer System Prompt
To make it seamless to hand off the extracted data to frontend AI agents (e.g., code-generation models), the plugin automatically copies a specialized **Developer System Prompt** to your clipboard during the ZIP extraction.
This prompt enforces:
- **Strict Structural Fidelity**: Instructs the agent to prioritize the exact coordinates, properties, and tree structures in `data.md` over generic CSS styling defaults or auto-generated mockups.
- **Asset Pipeline Rules**: Directs the agent to organize visual assets into the target project's `/assets/images/` directory and map them correctly in the code.
- **Visual Verification**: Tells the agent to cross-verify SVG assets against matching PNG references to ensure no bounding boxes or layout boxes are missing.
- **Zero Guesswork**: Prohibits the agent from correcting typos, changing text cases, or merging styles from child nodes up to parent containers.
---
## Installation
To install and load the plugin locally in Figma:
1. **Download the project** or clone this repository to your local machine.
2. **Open your terminal** and navigate to the project directory.
3. **Install the dependencies** by running:
```bash
npm i
```
4. **Build the project** to compile TypeScript:
```bash
npm run build
```
5. **Open Figma** (either in the browser or the desktop app).
6. Navigate to **Plugins** > **Development** > **Import plugin from manifest...** (or search for it under plugins menu).
7. Select the `manifest.json` file located in the root folder of this project.
---
## How to Use
1. Open a Figma file
2. Run the **AI Data Extractor** plugin
3. Select one or more frames/layers on the canvas
4. Click **Extract Selection**
5. Wait for processing — the plugin traverses nodes, exports assets, and generates the ZIP
6. The archive downloads automatically when complete
Once the plugin is installed:
1. **Select a frame** or layer group from your Figma design canvas.
2. **Open the plugin** (under Plugins > Development > AI Data Extractor) and click **Extract Selection**.
3. **Download the generated ZIP file** (`figma-ai-extraction.zip`) once the process is complete.
4. **Extract the ZIP archive** into a directory.
5. **Provide the extracted folder** to your AI agent model so it has access to `data.md` and the exported visual assets, then **paste the copied prompt** from your clipboard directly into the chat to instruct the agent model on how to implement the code.
