🤖 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 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/`
├── .env.*          ← Environment-specific proxy settings
esbuild.config.mjs  ← Build configuration
dist/               ← Output directory for plugin

Building the Plugin

To build the plugin, you need to have Node.js installed. The plugin uses npm for package management and esbuild for building.

1. Install Dependencies

npm install

2. Setup `.env` Files

The plugin loads its proxy backend URL from environment files during build. Create the following:

`.env.development`

PROXY_URL=http://localhost:5000

`.env.production`

PROXY_URL=https://your.production.proxy

The URL is injected into code.ts during the build process. It is not read from the UI at runtime.

3. Build the plugin

To build for development using .env.development, run:

npm run dev

To build for production using .env.production, run:

npm run build

Both commands will output the built plugin to the dist/ folder.

Usage in Figma

Open Figma → Plugins → Development → Import plugin from manifest...
Choose: dist/manifest.json
Open the plugin: Plugins → MAID Plugin
Follow the on-screen steps:
- Select input/output
- Enter your proxy key
- Press "Generera svar"

Notes

Uses clientStorage to persist proxy key and selected node IDs between runs.

Backend

The plugin communicates with a backend server. It is designed to communicate with the MAID Proxy 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:

{
    "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:

{
    "response": "Some text to display in the output node"
}

Maintainers

Created by @nenzen.
Feel free to fork and adapt.

2.8 KiB Raw Permalink Blame History