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/`
└── 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 installed. The plugin uses npm for package management and esbuild for building.

1. Install Dependencies

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:

npm run build

Or for development with auto-rebuild:

npm run watch

The built plugin will be output 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 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 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.