MCP Tools
propose_design_system
Propose a complete design system to the user for interactive refinement in the Figma plugin.
Sends a design-system proposal (colors, typography, spacing, border-radius, shadows, components, layout patterns) to the Figma plugin. The plugin opens an interactive editor where you review, edit, add, or remove tokens. Once you confirm, subsequent render_html calls automatically apply the tokens as shared Figma styles so every element uses your design system. Prefer SVG icons or icon libraries (Lucide, Iconify, Heroicons) over emoji in generated HTML for consistent rendering.
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| name | string | Required | Name of the design system (e.g. 'E-commerce Design System') |
| colors | array | Optional | Color tokens with semantic categories (background, text, accent, border, other) |
| typography | array | Optional | Typography scale tokens (fontFamily, fontSize, fontWeight, lineHeight, label) |
| spacing | array | Optional | Spacing scale tokens in pixels |
| borderRadius | array | Optional | Border radius tokens in pixels |
| shadows | array | Optional | CSS box-shadow tokens with parsed offsets and color |
| components | array | Optional | Proposed components (e.g. Button, Input, Card) with variants |
| layoutPatterns | object | Optional | Common layout patterns (grid, stack, hero) for the system |
Example prompt
Try asking: Propose a design system for an e-commerce site with warm neutrals, Inter typography, and a clear type scale.
Tips
- Review, edit, and confirm the proposed tokens directly in the Figma plugin.
- After confirmation, new renders use the design system automatically — no extra parameter needed.
- Use SVG icons or icon libraries in HTML instead of emoji for predictable, styleable visuals.