@designid/tokens 1.2.2 → 1.2.4

package/README.md

@@ -10,7 +10,16 @@ The tokens are defined in a JSON file according to the [Design Tokens Community
 
 The build tokens can be used in various ways, such as in CSS files, CSS-in-JS libraries, CSS preprocessors, or even directly in your JavaScript or TypeScript code.
 
-You can also use the tokens in your design tools, like Figma, Sketch, Adobe XD, etc., to ensure that your design system is consistent across all platforms.
+You can also use the tokens in your design tools, like Figma, Sketch, Adobe XD, etc., to ensure that your design system is consistent across all platforms.
+
+## ✨ Features
+
+- 🎨 **W3C Design Token Format** - Full compliance with the W3C standard
+- 🔄 **Figma Plugin** - Bidirectional sync between tokens and Figma variables/styles
+- 📝 **Token Editor** - Web-based editor for managing tokens with CRUD operations
+- 🎯 **Multiple Outputs** - Generate CSS, TypeScript, JSON, and more
+- 🔧 **Watch Mode** - Auto-rebuild on file changes
+- 📦 **Type-Safe** - Full TypeScript support with comprehensive types
 
 ## Get started
 
@@ -47,6 +56,62 @@ To build the design system tokens in development mode, you can use the `tokens-w
 bun tokens-watch
 ```
 
+## Figma Plugin
+
+Synchronize design tokens between your codebase and Figma with bidirectional sync support.
+
+### Quick Start
+
+1. **Build the plugin:**
+   ```bash
+   bun ./scripts/build-figma-plugin.ts
+   ```
+
+2. **Install in Figma:**
+   - Open Figma Desktop App
+   - Go to **Menu → Plugins → Development → Import plugin from manifest...**
+   - Select `dist/figma/manifest.json`
+
+3. **Use the plugin:**
+   - Open any Figma file
+   - Run **Plugins → Development → @DesignID/tokens - Figma Sync**
+   - Import JSON tokens or load from Figma
+   - Click "Sync to Figma" to synchronize
+
+### Features
+
+- ✅ **Bidirectional Sync** - Import from Figma or export to Figma
+- 🎨 **Variables** - Colors, dimensions, typography properties
+- 📝 **Styles** - Paint styles, text styles, effect styles
+- 🌲 **Tree View** - Hierarchical token organization
+- ✏️ **Live Editing** - Edit, add, delete tokens in real-time
+- 📦 **JSON Import/Export** - Work with W3C Design Token Format files
+
+### Supported Token Types
+
+| Token Type | Figma Output |
+|------------|--------------|
+| `color` | Variable + Paint Style |
+| `dimension` | Variable (FLOAT) |
+| `fontFamily`, `fontWeight`, `fontSize`, `lineHeight`, `letterSpacing` | Variables |
+| `typography` | Text Style |
+| `shadow` | Effect Style |
+| `duration` | Variable (FLOAT) |
+
+### Documentation
+
+- [Quick Start Guide](docs/FIGMA_PLUGIN_QUICKSTART.md) - Get started in 5 minutes
+- [Integration Guide](docs/FIGMA_PLUGIN_INTEGRATION.md) - Detailed workflows and best practices
+- [Plugin README](src/figma/README.md) - Technical documentation
+- [Sample Tokens](docs/sample-tokens-for-figma.json) - Example token file for testing
+
+### Development
+
+```bash
+# Watch mode for plugin development
+bun ./scripts/watch-figma-plugin.ts
+```
+
 ## Token Editor
 
 A web-based editor for managing W3C Design Tokens with full CRUD operations, token references, and mode support.
@@ -137,6 +202,61 @@ The editor will be available at `http://localhost:3002` (or your custom port).
 
 For detailed documentation, see [src/editor/README.md](src/editor/README.md).
 
+## Figma Plugin
+
+Synchronize your design tokens with Figma variables, styles, and effects.
+
+### Features
+
+- 🔄 **Bidirectional Sync** - Push tokens to Figma or pull from Figma
+- 📦 **Variable Support** - Colors, dimensions, typography primitives
+- 🎨 **Style Support** - Paint styles, text styles, effect styles
+- 📝 **Token Editor UI** - Full CRUD operations within Figma
+- 📥 **Import/Export** - Work with JSON token files
+- ✅ **W3C Compliant** - Uses W3C Design Token Format standard
+
+### Quick Start
+
+1. **Build the plugin:**
+   ```bash
+   bun run build:figma
+   ```
+
+2. **Install in Figma:**
+   - Open Figma Desktop App
+   - Go to **Menu → Plugins → Development → Import plugin from manifest...**
+   - Select `dist/figma/manifest.json`
+
+3. **Use the plugin:**
+   - Open plugin: **Plugins → Development → @DesignID/tokens - Figma Sync**
+   - Import your token JSON file
+   - Click "Sync to Figma"
+
+### Watch Mode for Development
+
+```bash
+bun run watch:figma
+```
+
+This watches `src/figma/` for changes and automatically rebuilds the plugin.
+
+### Supported Token Types
+
+| Token Type | Figma Output |
+|------------|-------------|
+| `color` | Variable + Paint Style |
+| `dimension`, `number` | Variable (FLOAT) |
+| `fontFamily` | Variable (STRING) |
+| `fontWeight`, `fontSize`, `lineHeight`, `letterSpacing` | Variable (FLOAT) |
+| `typography` | Text Style |
+| `shadow` | Effect Style |
+| `duration` | Variable (FLOAT) |
+
+### Documentation
+
+- [Figma Plugin README](src/figma/README.md) - Plugin usage and features
+- [Integration Guide](docs/FIGMA_PLUGIN_INTEGRATION.md) - Detailed workflow and best practices
+
 ### File structure
 The file structure of the design system tokens is as follows in a typical web application project: