Using AI to Build a Design system in 2 minutes | Figma Agent | Design System #figma #ai
1470 次观看 · 2026-10-12
UI 设计
I asked an Figma agent to build a complete design system directly in Figma, with light and dark mode, in under 2 minutes. ⚡
The agent writes directly to the canvas: variables, components, and a full screen.
🧩 What gets built:
- Primitive colors + semantic tokens (Light & Dark modes)
- Type scale, spacing, and radius
- Components with variants and states (Button, Input, Card, Badge, Toggle)
- A real screen that uses the system, themed in both modes
📋 The prompt I used:
create a design system in this file: primitive color palette, semantic color variables with Light and Dark modes, type scale, spacing, radius, and components (Button, Input, Card, Badge, Toggle) with variants and states, all bound to the semantic variables.
💡 Tip: bind components to semantic variables only (not raw colors). That's what makes the theme flip with one click.
Follow for more AI + design workflows.
#figma #designsystem #figmaai
The agent writes directly to the canvas: variables, components, and a full screen.
🧩 What gets built:
- Primitive colors + semantic tokens (Light & Dark modes)
- Type scale, spacing, and radius
- Components with variants and states (Button, Input, Card, Badge, Toggle)
- A real screen that uses the system, themed in both modes
📋 The prompt I used:
create a design system in this file: primitive color palette, semantic color variables with Light and Dark modes, type scale, spacing, radius, and components (Button, Input, Card, Badge, Toggle) with variants and states, all bound to the semantic variables.
💡 Tip: bind components to semantic variables only (not raw colors). That's what makes the theme flip with one click.
Follow for more AI + design workflows.
#figma #designsystem #figmaai