Token Workflow Diagram

A diagram showing how design tokens are created and distributed for Spectrum, Adobe's design system.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#F8F8F8',
      'primaryTextColor': '#222222',
      'primaryBorderColor': '#B1B1B1'
    }
  }
}%%

flowchart TD
    figma("<a style='color: #35;0265DC;' href='https://figma.com'>Figma</a>")
    tokenStudio("<a style='color: #35;0265DC;' href='https://github.com/adobe/spectrum-tokens-studio-data'>Tokens Studio Data Git Repo</a>")
    spectrumTokens("<a style='color: #35;0265DC;' href='https://github.com/adobe/spectrum-tokens'>Spectrum Tokens Git Repo</a>")
    spectrumTokensNPM(<a style='color: #35;0265DC;' href='https://www.npmjs.com/package/@adobe/spectrum-tokens'>NPM Package</a>)
    spectrumIOS("Spectrum iOS (internal)")
    spectrumCSS(<a style='color: #35;0265DC;' href='https://github.com/adobe/spectrum-css'>Spectrum CSS</a>)
    drover("Drover (internal)")
    reactSpectrum(<a style='color: #35;0265DC;' href='https://react-spectrum.adobe.com/react-spectrum/'>React Spectrum</a>)
    spectrumWebComponents(<a style='color: #35;0265DC;' href='https://opensource.adobe.com/spectrum-web-components/'>Spectrum Web Components)
    
    figma -->|"<a style='color: #35;0265DC;' href='https://tokens.studio/'>Tokens Studio Plugin</a>"| tokenStudio
    tokenStudio -->|Automated Pull Request| spectrumTokens
    spectrumTokens --> spectrumTokensNPM
    spectrumTokensNPM --> spectrumIOS
    spectrumTokensNPM -->|CSS Custom Properties|spectrumCSS
    spectrumCSS --> spectrumWebComponents
    spectrumTokensNPM -->drover
    figma -->|Design Sync Meetings|reactSpectrum

Loading

The work with Spectrum 2 is slightly different.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#F8F8F8',
      'primaryTextColor': '#222222',
      'primaryBorderColor': '#B1B1B1'
    }
  }
}%%

flowchart TD
    figma("<a style='color: #35;0265DC;' href='https://figma.com'>Figma</a>")
    tokenStudio("<a style='color: #35;0265DC;' href='https://github.com/adobe/spectrum-tokens-studio-data'>Tokens Studio Data Git Repo</a>")
    spectrumTokens("<a style='color: #35;0265DC;' href='https://github.com/adobe/spectrum-tokens'>Spectrum Tokens Git Repo</a>")
    spectrumTokensNPM(<a style='color: #35;0265DC;' href='https://www.npmjs.com/package/@adobe/spectrum-tokens'>NPM Package</a>)
    spectrumIOS("Spectrum iOS (internal)")
    spectrumCSS(<a style='color: #35;0265DC;' href='https://github.com/adobe/spectrum-css'>Spectrum CSS</a>)
    drover("Drover (internal)")
    reactSpectrum(<a style='color: #35;0265DC;' href='https://react-spectrum.adobe.com/react-spectrum/'>React Spectrum</a>)
    spectrumWebComponents(<a style='color: #35;0265DC;' href='https://opensource.adobe.com/spectrum-web-components/'>Spectrum Web Components)
    spectrumQt("Qt (internal)")
    
    figma -->|"<a style='color: #35;0265DC;' href='https://tokens.studio/'>Tokens Studio Plugin</a>"| tokenStudio
    tokenStudio -->|Automated Pull Request| spectrumTokens
    spectrumTokens --> spectrumTokensNPM
    spectrumTokensNPM --> spectrumIOS
    spectrumTokensNPM -->|CSS Custom Properties|spectrumCSS
    spectrumCSS --> spectrumWebComponents
    spectrumTokensNPM --> drover
    spectrumTokensNPM --> reactSpectrum
    spectrumTokensNPM --> spectrumQt

Loading