Figmagic

Description

Generate Tokens for Your Design System from Figma

Overview

Generate design tokens, export graphics, and create React components driven by those tokens directly from your Figma documents.

Structured Approach

Figmagic follows the core principle of atomic design, encouraging a bottom‑up build process:

1. Decompose tokens – start with the fundamental design variables.
2. Shape elements – use tokens to define visual properties.
3. Build components – assemble elements into reusable pieces.
4. Arrange compositions – organize components into larger structures.
5. Present views – display final compositions in user interfaces.

Code Generation

The tool outputs code for:

• React files
• Styled Components
• Storybook stories
• CSS (css‑in‑js style)
• Markdown documentation

This streamlined workflow ensures consistency across your design system and development environment.

Creator

Mikael Vesavuori