Frame-Relay documentation
Frame-Relay turns your Figma components into a design kit your AI coding agent follows.
New here? Start with Getting started. It walks you from an empty folder to an AI-built page. If you want the ideas first, read Concepts.
Start here
| Page | What it covers |
|---|---|
| Getting started | First-time walkthrough: create an app, export from Figma, run init, sync and doctor. |
| Concepts | Plain-English explanations of the kit, sync, rules files, MCP, check, doctor and live mode. |
Guides
| Page | What it covers |
|---|---|
| CLI commands | Every frame-relay command, its flags and what it writes into your project. |
| Figma plugin | The Lint, Export and Live tabs, plus the icon export rule and warnings. |
| Live mode | Pairing Figma with your agent, the Live tab, the live tools and the security model. |
| MCP server | The 10 tools your AI agent calls, resources and setup for each supported client. |
Reference
| Page | What it covers |
|---|---|
| Kit format | Folder layout and every field in the kit JSON files. |
| Converter | How Figma snapshots map to kit specs, including every warning code. |
| Figma naming contract | The naming rules that keep exports deterministic and agent-friendly. |
| JSON schemas | Stable URLs for the manifest, tokens and component schemas. |