> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tokencraft.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# export_tokens

> Export tokens in various formats

# export\_tokens

Exports design tokens from a specific mode in your chosen format (JSON, CSS, iOS, Android).

## Tool Schema

```json theme={null}
{
  "name": "export_tokens",
  "description": "Export design tokens in various formats",
  "inputSchema": {
    "type": "object",
    "properties": {
      "tokenset_id": {
        "type": "string",
        "description": "ID of the tokenset to export"
      },
      "mode_id": {
        "type": "string",
        "description": "ID of the mode to export"
      },
      "format": {
        "type": "string",
        "enum": ["json", "css", "ios", "android"],
        "description": "Export format"
      }
    },
    "required": ["tokenset_id", "mode_id", "format"]
  }
}
```

## Parameters

| Parameter     | Type   | Required | Description                                    |
| ------------- | ------ | -------- | ---------------------------------------------- |
| `tokenset_id` | string | Yes      | Tokenset ID                                    |
| `mode_id`     | string | Yes      | Mode ID                                        |
| `format`      | string | Yes      | Export format: `json`, `css`, `ios`, `android` |

## Response

```json theme={null}
{
  "format": "css",
  "content": ":root {\n  --colors-primary-500: #3b82f6;\n}",
  "filename": "tokens-light.css"
}
```

## Supported Formats

### JSON (W3C)

W3C Design Tokens format:

```json theme={null}
{
  "colors": {
    "primary": {
      "500": {
        "value": "#3b82f6",
        "type": "color"
      }
    }
  }
}
```

### CSS

CSS Custom Properties:

```css theme={null}
:root {
  --colors-primary-500: #3b82f6;
  --spacing-base: 16px;
}
```

### iOS (Swift)

Swift UIColor and CGFloat:

```swift theme={null}
enum DesignTokens {
    enum Color {
        static let colorsPrimary500 = UIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1.000)
    }
}
```

### Android (XML)

XML Resources:

```xml theme={null}
<resources>
    <color name="colors-primary-500">#3b82f6</color>
    <dimen name="spacing-base">16dp</dimen>
</resources>
```

## Example Usage

### Export CSS

```
You: Export the Colors tokenset Light mode as CSS
```

````
Claude: Here's the CSS export:

```css
:root {
  /* Primary brand color */
  --colors-primary-500: #3b82f6;
  --colors-primary-600: #2563eb;
  --colors-background-default: #ffffff;
  ...
}
````

Saved as: tokens-light.css

```

### Export Multiple Formats

```

You: Export the Colors tokenset in both CSS and JSON formats for the Light mode

```
```

Claude: \[Exports both formats and displays them]

```

### Export All Modes

```

You: Export the Colors tokenset in CSS for both Light and Dark modes

```
```

Claude: \[Exports Light mode]
\[Exports Dark mode]

Created:

* tokens-light.css (50 tokens)
* tokens-dark.css (50 tokens)

```

## Common Use Cases

### 1. Download for Development

```

You: I need the design tokens as CSS for my web project

```

### 2. Generate Documentation

```

You: Export all tokens as JSON so I can generate documentation

```

### 3. Mobile App Integration

```

You: Give me the iOS Swift file for the Light mode tokens

```

### 4. Cross-Platform Export

```

You: Export tokens for both iOS and Android

```

## Tips

1. **Save Exports**: Claude will display the export content but won't save files. Copy the content to your project.

2. **Batch Exports**: Ask Claude to export multiple modes/formats in one request.

3. **Preview First**: Use `list_tokens` to preview before exporting.

4. **Format Selection**: Choose the format that matches your platform.

## See Also

- [list_tokens](/mcp/tools/list-tokens) - Preview tokens before export
- [Export API](/api-reference/export/mode) - Direct API access

```