Spaces:
Runtime error
Runtime error
File size: 8,323 Bytes
d969659 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 | # Design System Automation — Figma Plugin
Import design tokens into Figma and auto-generate a visual spec page. Works with W3C DTCG format (from the Design System Automation app) and legacy JSON formats.
  
---
## What It Does
Upload a JSON file with your design tokens. The plugin creates:
- **Figma Variables** — Color, number, and string variable collections
- **Paint Styles** — Every color as a reusable Figma paint style
- **Text Styles** — Typography with font family, size, weight, and line height
- **Effect Styles** — Shadows as Figma effect styles
- **Visual Spec Page** — Auto-generated frames showing all your tokens organized by category, with AA compliance badges on every color
The plugin auto-detects whether your JSON uses the **W3C DTCG format** (`$value`, `$type`) or a **legacy format** (`value`, `type`) and handles both.
---
## Quick Setup (5 Minutes)
### 1. Download the plugin
Clone this repo or download just the `figma-plugin/` folder. You need these three files:
```
figma-plugin/
manifest.json
src/code.js
ui/ui.html
```
### 2. Load into Figma
1. Open **Figma** (desktop app)
2. Go to **Plugins** > **Development** > **Import plugin from manifest...**
3. Select the `manifest.json` file from this folder
4. Done — the plugin is now available under **Plugins > Development**
### 3. Run it
1. Open any Figma file (or create a new one)
2. Go to **Plugins** > **Development** > **Design System Automation — Token Importer**
3. Upload your JSON file or paste JSON directly
4. Click **"Apply to Document"**
5. Check the **Assets** panel — all your styles and variables are created
---
## How to Get Your Token JSON
### Option A: Use the Design System Automation App (Recommended)
1. Go to the [Design System Automation app](https://huggingface.co/spaces/riazmo/Design-System-Automation)
2. Enter any website URL
3. Click Extract — the app analyzes the site and extracts all design tokens
4. Download the **AS-IS JSON** (W3C DTCG format)
5. Upload it to this plugin
### Option B: Create JSON Manually
The plugin accepts two formats:
**W3C DTCG Format** (recommended — output from the app):
```json
{
"color": {
"brand": {
"primary": {
"$type": "color",
"$value": "#0066ff",
"$description": "Primary brand color"
}
},
"text": {
"primary": {
"$type": "color",
"$value": "#1a1a1a"
}
}
},
"font": {
"heading": {
"lg": {
"$type": "typography",
"$value": {
"fontFamily": "Inter",
"fontSize": "32px",
"fontWeight": "700",
"lineHeight": "1.3"
}
}
}
},
"spacing": {
"md": {
"$type": "dimension",
"$value": "16px"
}
},
"radius": {
"md": {
"$type": "dimension",
"$value": "8px"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "2px",
"blur": "8px",
"spread": "0px",
"color": "#00000026"
}
}
}
}
```
**Legacy Format** (also supported):
```json
{
"global": {
"colors": {
"primary": { "value": "#0066ff", "type": "color" },
"secondary": { "value": "#ff007f", "type": "color" }
},
"typography": {
"heading": {
"value": {
"fontFamily": "Inter",
"fontWeight": "700",
"fontSize": "32px",
"lineHeight": "1.3"
},
"type": "typography"
}
},
"spacing": {
"md": { "value": "16px", "type": "spacing" }
}
}
}
```
---
## The Visual Spec Page
After importing, the plugin generates a visual spec page with separate frames for each token category:
```
+------------------------------------------------------------------+
| TYPOGRAPHY (Desktop) TYPOGRAPHY (Mobile) |
| H1 48px/Bold Inter H1 32px/Bold Inter |
| H2 36px/Bold Inter H2 28px/Bold Inter |
| Body 16px/Regular Inter Body 14px/Regular Inter |
+------------------------------------------------------------------+
| COLORS |
| BRAND TEXT BACKGROUND FEEDBACK |
| +------+ +------+ +------+ +------+ |
| |Primary| |Primary| |Primary| | Error| |
| +------+ +------+ +------+ +------+ |
| #0066ff #1a1a1a #ffffff #dc2626 |
| AA:Pass AA:Pass AA:Pass |
+------------------------------------------------------------------+
| SPACING RADIUS SHADOWS |
| 4 8 16 24 sm md lg full xs sm md lg xl |
+------------------------------------------------------------------+
```
Every color swatch shows its AA compliance status (Pass/Fail against white and black backgrounds).
---
## AS-IS vs TO-BE Workflow
The full Design System Automation workflow uses this plugin twice:
1. **Extract AS-IS** — Run the app on a website, download JSON, import to Figma
2. **Review** — See the current state of the design system as a visual spec
3. **AI Analysis** — The app's 4 AI agents analyze and suggest improvements
4. **Accept/Reject** — Choose which suggestions to keep
5. **Export TO-BE** — Download the improved JSON, import to Figma
6. **Compare** — Place AS-IS and TO-BE visual specs side by side
This gives you a clear before/after view of every change.
---
## Plugin Features
| Feature | Description |
|---------|-------------|
| DTCG Auto-Detection | Automatically detects W3C DTCG vs legacy JSON format |
| Figma Variables | Creates Color, Number, and String variable collections |
| Paint Styles | Every color token becomes a reusable paint style |
| Text Styles | Typography tokens with font, size, weight, line height |
| Effect Styles | Shadow tokens as Figma drop shadow effects |
| Visual Spec | Auto-generated spec page with organized frames |
| AA Badges | Contrast ratio check on every color swatch |
| File Upload | Upload JSON file or paste directly |
| Token Preview | See all detected tokens before applying |
| Progress Bar | Real-time feedback while creating styles |
---
## Troubleshooting
**Plugin won't load?**
- Make sure you're using the Figma desktop app (not the browser version)
- Check that `manifest.json`, `src/code.js`, and `ui/ui.html` are all present
- Try: Plugins > Development > Import plugin from manifest... and re-select
**Styles not appearing?**
- Open the **Assets** panel (left sidebar) and check under Local styles
- Make sure you clicked "Apply to Document" and waited for the progress bar
- Try refreshing: Cmd+R (Mac) or Ctrl+R (Windows)
**JSON upload fails?**
- Validate your JSON at [jsonlint.com](https://jsonlint.com)
- Check that hex colors use the full 6-digit format: `#0066ff` (not `#06f`)
- Make sure font sizes include units: `"32px"` (not `"32"`)
**Fonts look wrong?**
- Figma needs the font installed on your system or available through Google Fonts
- If a font isn't found, Figma falls back to a default — install the font and re-run
---
## Project Structure
```
figma-plugin/
manifest.json # Plugin configuration (name, entry points)
README.md # This file
src/
code.js # Main plugin logic (v7, ~1400 lines)
ui/
ui.html # Plugin UI panel
```
---
## Compatibility
- **Figma**: Desktop app (latest version recommended)
- **JSON Formats**: W3C DTCG v1, Tokens Studio, legacy `{value, type}` format
- **Token Types**: Colors, typography, spacing, border radius, shadows
- **Downstream**: Works with tokens exported from Tokens Studio, Style Dictionary, or the Design System Automation app
---
## License
MIT — free to use, modify, and distribute.
---
Built as part of [Design System Automation](https://github.com/hiriazmo/design-system-automation) — an open-source tool that extracts, analyzes, and improves design systems from any live website.
|