Skip to main content

​
export_tokens

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

​
Tool Schema

{
  "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

ParameterTypeRequiredDescription
tokenset_idstringYesTokenset ID
mode_idstringYesMode ID
formatstringYesExport format: json, css, ios, android

​
Response

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

​
Supported Formats

​
JSON (W3C)

W3C Design Tokens format: 
{
  "colors": {
    "primary": {
      "500": {
        "value": "#3b82f6",
        "type": "color"
      }
    }
  }
}

​
CSS

CSS Custom Properties: 
:root {
  --colors-primary-500: #3b82f6;
  --spacing-base: 16px;
}

​
iOS (Swift)

Swift UIColor and CGFloat: 
enum DesignTokens {
    enum Color {
        static let colorsPrimary500 = UIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1.000)
    }
}

​
Android (XML)

XML Resources: 
<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