105 lines
2.7 KiB
Markdown
105 lines
2.7 KiB
Markdown
# 🤖 MAID Plugin for Figma
|
|
|
|
This Figma plugin is designed for the **Människa-AI-Interaktionsdesign (MAID)** course to let students connect their own designed Figma UI to [MAID Proxy](../proxy/README.md) using a proxy key.
|
|
The plugin allows students to select text nodes for input and output, the plugin sends the input to the proxy and displays the returned response in the output node.
|
|
|
|
---
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── code.ts ← Figma plugin backend
|
|
├── ui.ts ← Frontend logic injected into UI
|
|
├── ui.html ← HTML template (CSS and JS injected)
|
|
├── styles.css ← CSS injected into `ui.html`
|
|
├── manifest.json ← Plugin manifest copied to `dist/`
|
|
└── types.ts ← TypeScript type definitions
|
|
esbuild.config.mjs ← Build configuration
|
|
dist/ ← Output directory for plugin
|
|
```
|
|
|
|
---
|
|
|
|
## Building the Plugin
|
|
|
|
To build the plugin, you need to have [Node.js](https://nodejs.org/) installed. The plugin uses `npm` for package management and `esbuild` for building.
|
|
|
|
### 1. Install Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 2. Configure API URL in Plugin
|
|
|
|
The plugin requires users to manually configure the API URL through the UI.
|
|
|
|
### 3. Build the plugin
|
|
|
|
To build the plugin, run:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Or for development with auto-rebuild:
|
|
|
|
```bash
|
|
npm run watch
|
|
```
|
|
|
|
The built plugin will be output to the `dist/` folder.
|
|
|
|
---
|
|
|
|
## Usage in Figma
|
|
|
|
1. Open Figma → `Plugins` → `Development` → `Import plugin from manifest...`
|
|
2. Choose: `dist/manifest.json`
|
|
3. Open the plugin: `Plugins` → `MAID Plugin`
|
|
4. Follow the on-screen steps:
|
|
- Select the API URL
|
|
- Enter your proxy key
|
|
- Select input/output text nodes
|
|
- Optionally set a system role
|
|
- Press **"🤖 Generera svar"**
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Uses `clientStorage` to persist API URL, proxy key, and selected node IDs between runs.
|
|
- The API URL must be configured before the plugin can be used.
|
|
- All settings can be cleared using the "Rensa alla inställningar" button.
|
|
|
|
---
|
|
|
|
## Backend
|
|
|
|
The plugin communicates with a backend server. It is designed to communicate with the [MAID Proxy](../proxy/README.md) backend. If you wish to implement your own backend, you can do so by following the API structure outlined below.
|
|
Make sure your backend exposes the `/ask` endpoint and handles the following payload:
|
|
|
|
```json
|
|
{
|
|
"proxy_key": "your-proxy-key",
|
|
"system_role": "You are a helpful AI assistant.",
|
|
"prompt": "Some text from input node"
|
|
}
|
|
```
|
|
|
|
The backend should return a JSON response with the following structure:
|
|
|
|
```json
|
|
{
|
|
"response": "Some text to display in the output node"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Maintainers
|
|
|
|
Created by [@nenzen](mailto:nenzen@dsv.su.se).
|
|
Feel free to fork and adapt.
|