如何将Adobe XD导出的CSS设计令牌程序化注入Material-UI组件？

Great question! Yes, you absolutely can programmatically inject your Adobe XD design tokens into Material-UI, and set up automatic sync when you update your prototype. Let’s break down how to do this, plus share a more scalable workflow for design tokens in React/Material-UI.

1. Injecting XD's CSS Tokens into Material-UI (Immediate Solution) #

Your exported CSS file already defines global variables and character styles—here’s how to make Material-UI use them:

Step 1: Import the CSS Globally #

First, save the exported CSS file to your project (e.g., src/styles/xd-tokens.css). Import it in your root component (like index.js or App.js) to make the variables and classes available everywhere:

import './styles/xd-tokens.css';

Step 2: Customize Material-UI Theme to Reference Tokens #

Material-UI relies on a theme object to style components. Map the XD CSS variables directly to this theme so all components inherit your design system automatically. Create a src/theme.js file:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: 'var(--unnamed-color-6c63ff)', // Your purple accent from XD
    },
    text: {
      primary: 'var(--text-color)', // Main text color
      secondary: 'var(--name-text)', // Secondary text
      disabled: 'var(--eth-subtext-stars)', // Dimmed text
    },
    background: {
      default: 'var(--bg-drawer)', // App background
      paper: 'var(--message-bar-avatar-panel)', // Card/modal background
    },
  },
  typography: {
    fontFamily: 'var(--unnamed-font-family-fira-sans)',
    // Map XD's heading styles to MUI's typography variants
    h1: {
      fontFamily: 'var(--unnamed-font-family-abril-fatface)',
      fontSize: 'var(--unnamed-font-size-32)',
      lineHeight: 'var(--unnamed-line-spacing-32)',
      letterSpacing: 'var(--unnamed-character-spacing-1-31)',
    },
    // Add custom variants for XD's character styles
    'text-small-mobile': {
      fontFamily: 'var(--unnamed-font-family-fira-sans)',
      fontStyle: 'var(--unnamed-font-style-light)',
      fontSize: 'var(--unnamed-font-size-14)',
      lineHeight: 'var(--unnamed-line-spacing-20)',
      color: 'var(--text-color)',
    },
  },
});

export default theme;

Wrap your app with the ThemeProvider in index.js to apply this theme:

import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Step 3: Use XD's Character Styles #

You have two options to apply the pre-defined text styles:

1. Directly use the CSS classes:

   <Typography className="text-small-mobile-">Hello World</Typography>
   

2. Use custom MUI typography variants:

   <Typography variant="text-small-mobile">Hello World</Typography>
   

2. Automatic Sync with XD Updates #

To avoid manually copying the exported CSS every time you tweak your prototype:

• Set up a watch script to monitor the XD export folder and auto-copy the CSS to your project. Use chokidar-cli for this:
  1. Install the tool: npm install chokidar-cli --save-dev
  2. Add this script to your package.json:

     "scripts": {
       "watch-xd-tokens": "chokidar '/path/to/your/xd/export/folder/tokens.css' -c 'cp {path} src/styles/xd-tokens.css'"
     }
     

  3. Run the script in a terminal: npm run watch-xd-tokens
     Now, every time you export the CSS from XD, it’ll automatically update in your project, and hot reloading will show changes instantly.

3. Better Design Token Workflows (Scalable Alternative) #

While the CSS approach works for small projects, using structured design tokens (JSON/JS) is more flexible for React/Material-UI. Here’s the optimal workflow:

Option 1: Export Tokens as JSON from XD #

Use plugins like Tokens Studio for Adobe XD to export your colors, typography, and spacing as a structured JSON file (instead of CSS). This gives you a clean, machine-readable format like:

{
  "colors": {
    "text-primary": "#F8E29F",
    "accent-purple": "#6C63FF",
    "bg-dark": "#101010"
  },
  "typography": {
    "text-small-mobile": {
      "fontFamily": "Fira Sans",
      "fontWeight": 300,
      "fontSize": "14px",
      "lineHeight": "20px"
    }
  }
}

Option 2: Use Style Dictionary to Generate Platform-Specific Tokens #

Style Dictionary is a tool that takes your JSON tokens and generates output for CSS, JS, and even Material-UI themes.

1. Install it: npm install style-dictionary --save-dev
2. Create a style-dictionary.config.js file to define how tokens are converted:

   module.exports = {
     source: ['tokens/**/*.json'],
     platforms: {
       js: {
         buildPath: 'src/theme/',
         files: [{
           destination: 'tokens.js',
           format: 'javascript/module'
         }]
       },
       mui: {
         buildPath: 'src/theme/',
         files: [{
           destination: 'mui-theme.js',
           format: 'javascript/module',
           template: './templates/mui-theme-template.js' // Custom template to map tokens to MUI
         }]
       }
     }
   };
   

3. Add scripts to package.json to build/watch tokens:

   "scripts": {
     "build-tokens": "style-dictionary build",
     "watch-tokens": "style-dictionary build --watch"
   }
   

4. Run npm run watch-tokens to auto-regenerate tokens whenever your JSON file updates (after exporting from XD).

Option 3: Integrate Tokens into Material-UI #

Import the generated JS tokens to build your MUI theme directly:

import tokens from './theme/tokens';

const theme = createTheme({
  palette: {
    primary: { main: tokens.colors['accent-purple'] },
    text: { primary: tokens.colors['text-primary'] },
  },
  typography: {
    fontFamily: tokens.typography['base-font'],
    'text-small-mobile': tokens.typography['text-small-mobile'],
  },
});

This workflow ensures your design system stays in sync across XD and your React app without manual edits.

Pro Tip #

Rename your tokens in XD to be descriptive (e.g., accent-purple instead of unnamed-color-6c63ff)—this makes mapping to the MUI theme way cleaner.

内容的提问来源于stack exchange，提问作者derper