Unoff bridges design and code through the @unoff/ui component library and the Figma Console MCP (Model Context Protocol) server.

The @unoff/ui Component Library

Unoff includes a Figma component library that is perfectly synced with the @unoff/ui npm package. What you design in Figma is what ships in code.

Available components

@unoff/ui provides a complete set of Figma-native components:

• Button, Input, Dropdown, Menu, Icon, Bar
• layouts — layout primitives for consistent spacing
• texts — typography tokens matching Figma's type system
• Feature — wrapper component that conditionally renders based on FeatureStatus

Mapping Figma designs to code

The skills directory includes .github/skills/externals/implement-design/ which documents the exact mapping between Figma component names and @unoff/ui imports. AI agents use this to generate accurate code from your designs.

What is Figma Console MCP?

Figma Console MCP is a Model Context Protocol server that lets AI agents read and interact with your Figma files. It creates a bridge between your design tool and your coding agent.

Step 1 — Configure the MCP servers

The template includes MCP configs for each IDE:

• .vscode/mcp.json — VS Code
• .cursor/mcp.json — Cursor