Step 1: Export as JSON

Download your palette in JSON format for programmatic access.

Step 2: Create Theme File

// theme/colors.js
export const colors = {
  primary: '#3498db',
  secondary: '#2ecc71',
  accent: '#e74c3c',
  neutral: {
    50: '#f8f9fa',
    100: '#ecf0f1',
    900: '#34495e'
  }
};

Step 3: Styled Components Integration

import styled from 'styled-components';
import { colors } from '../theme/colors';

export const Button = styled.button`
  background-color: ${colors.primary};
  color: ${colors.neutral[50]};
  border: 2px solid ${colors.primary};
  
  &:hover {
    background-color: ${colors.neutral[50]};
    color: ${colors.primary};
  }
`;

Step 4: CSS Variables Generation

// utils/generateCSSVars.js
export const generateCSSVariables = () => {
  const root = document.documentElement;
  Object.entries(colors).forEach(([key, value]) => {
    if (typeof value === 'object') {
      Object.entries(value).forEach(([variant, color]) => {
        root.style.setProperty(`--${key}-${variant}`, color);
      });
    } else {
      root.style.setProperty(`--${key}`, value);
    }
  });
};

Step 1: SCSS Variables Integration

// assets/scss/colors.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$accent-color: #e74c3c;

// Export as CSS custom properties
:root {
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
  --accent-color: #{$accent-color};
}

Step 2: Nuxt Configuration

// nuxt.config.js
export default {
  css: ['~/assets/scss/colors.scss'],
  styleResources: {
    scss: ['~/assets/scss/colors.scss']
  }
}

Step 3: Component Usage

<template>
  <button class="btn-primary">Click Me</button>
</template>

<style scoped>
.btn-primary {
  background-color: var(--primary-color);
  color: white;
  border: 2px solid var(--primary-color);
}
</style>

Step 1: Manual Color Addition

1. Copy hex codes from your exported palette
2. In Figma, select the fill tool
3. Click the "+" next to Local styles
4. Paste hex code and name your color
5. Repeat for all colors in your palette

Step 2: Figma Plugin Usage

Use plugins like "Design Tokens" or "Figma to Code" for automated import:

• Install the "Design Tokens" plugin
• Upload your JSON export
• Auto-generate Figma color styles
• Sync with development tokens

Step 3: Team Library Publishing

1. Create your color styles in a dedicated file
2. Click "Publish styles" in the assets panel
3. Add descriptive names and documentation
4. Team members can then subscribe to updates