Skip to main content

​
export_mode

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

​
Tool Schema

{
  "name": "export_mode",
  "description": "Export a specific mode's tokens in various formats (json, css, ios, android)",
  "inputSchema": {
    "type": "object",
    "properties": {
      "tokenset_id": {
        "type": "string",
        "description": "The ID of the tokenset"
      },
      "mode_id": {
        "type": "string",
        "description": "The ID of the mode to export"
      },
      "format": {
        "type": "string",
        "enum": ["json", "css", "ios", "android"],
        "default": "json",
        "description": "The export format (default: json)"
      }
    },
    "required": ["tokenset_id", "mode_id"]
  }
}

​
Parameters

ParameterTypeRequiredDescription
tokenset_idstringYesThe ID of the tokenset to export from
mode_idstringYesThe ID of the mode to export
formatstringNoExport format: json, css, ios, android (default: json)

​
Response

The response contains the exported token data as a string in the requested format. 
{
  "content": ":root {\n  --colors-primary: #007AFF;\n  --spacing-medium: 16px;\n}",
  "format": "css"
}

​
Supported Formats

​
JSON (W3C Design Tokens)

Standard W3C Design Tokens format: 
{
  "color": {
    "primary": {
      "value": "#007AFF",
      "type": "color",
      "description": "Primary brand color"
    }
  },
  "spacing": {
    "medium": {
      "value": "16px",
      "type": "dimension"
    }
  }
}

​
CSS Custom Properties

CSS variables ready for your stylesheets: 
:root {
  /* Primary brand color */
  --color-primary: #007AFF;
  --spacing-medium: 16px;
  --font-size-base: 16px;
}

​
iOS (Swift)

Swift code with UIColor and CGFloat definitions: 
import UIKit

extension UIColor {
    static let colorPrimary = UIColor(red: 0.000, green: 0.475, blue: 1.000, alpha: 1.000)
}

extension CGFloat {
    static let spacingMedium: CGFloat = 16.0
    static let fontSizeBase: CGFloat = 16.0
}

​
Android (XML)

Android XML resources: 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_primary">#007AFF</color>
    <dimen name="spacing_medium">16dp</dimen>
    <dimen name="font_size_base">16sp</dimen>
</resources>

​
Example Usage in Claude

​
Export CSS Variables

You: Export the Light mode from my Colors tokenset as CSS

Claude: I'll export the Light mode tokens as CSS custom properties.

Here's your CSS export:

```css
:root {
  /* Brand Colors */
  --color-primary: #007AFF;
  --color-secondary: #5856D6;
  --color-background: #FFFFFF;

  /* Spacing */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}
You can copy this CSS and use it in your project. 

### Export for Development
You: Give me the JSON format for the Dark mode so I can use it in my design system Claude: I’ll export the Dark mode tokens in W3C Design Tokens JSON format. 
{
  "color": {
    "primary": {
      "value": "#0A84FF",
      "type": "color",
      "description": "Primary brand color for dark mode"
    },
    "background": {
      "value": "#000000",
      "type": "color"
    }
  }
}


### Cross-Platform Export
You: Export the Light mode in both iOS Swift and Android XML formats Claude: I’ll export the tokens in both formats for you. iOS Swift: 
extension UIColor {
    static let colorPrimary = UIColor(red: 0.000, green: 0.475, blue: 1.000, alpha: 1.000)
    static let colorBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
}
Android XML: 
<color name="color_primary">#007AFF</color>
<color name="color_background">#FFFFFF</color>


## Common Use Cases

### 1. Web Development
You: Export CSS variables for my component library 

### 2. Mobile Apps
You: Generate Swift color constants for the iOS app 

### 3. Design System Documentation
You: Export JSON format to generate style documentation 

### 4. Cross-Platform Consistency
You: Export both iOS and Android formats to ensure consistency 

## Notes

- Only exports tokens from the specified mode
- Aliased tokens are resolved to their actual values in the export
- Comments and descriptions are included where supported by the format
- The export is returned as a string that you can copy to your project

## Tips

1. **Format Selection**: Choose the format that matches your target platform
2. **Mode Selection**: Export different modes for theme support (Light/Dark)
3. **Copy Content**: The export content is displayed but not automatically saved
4. **Batch Exports**: Request multiple formats in one conversation

## See Also

- [export_tokenset](/mcp/tools/export-tokens) - Export complete tokenset with all modes
- [list_tokens_by_mode](/mcp/tools/list-tokens-by-mode) - Preview tokens before export
- [get_mode](/mcp/tools/get-mode) - Get mode details