Token Architecture

Built a three-tier token system that flows from Figma to production:

// Primitive tokens
--color-blue-500: #0066CC;
--spacing-4: 16px;

// Semantic tokens
--surface-primary: var(--color-blue-500);
--spacing-component-padding: var(--spacing-4);

// Component tokens
--button-background: var(--surface-primary);
--button-padding: var(--spacing-component-padding);

Component Structure

Every Pillar component now follows a consistent pattern:

• Props API matches Figma component properties

• Styling driven entirely by design tokens

• TypeScript interfaces ensure type safety

• Storybook stories document all variants and states

Figma Library Organization

Restructured KIT into a scalable system:

• 9+ theme modes for multi-brand support

• Component variants matching code implementation exactly

• Variables & Modes for dynamic theming

• Auto Layout following Flexbox principles for accurate handoff

Automation & Tooling

Created custom tooling to maintain alignment:

• Figma plugin to validate component structure

• CI/CD pipeline that flags design-code drift

• Automated token sync via GitHub Actions

• Visual regression testing with Percy

Technical Implementation

Architecture Decisions

Why SCSS over CSS-in-JS:

• Legacy product constraints required CSS compatibility

• Design tokens work equally well with CSS variables

• Better performance for large-scale applications

• Easier migration path for existing products

Why Figma Variables over Plugins:

• Native Figma feature with better performance

• Easier for designers to maintain

• Built-in mode switching for themes

• Direct export to design tokens format

Component API Design: Followed these principles:

• Props mirror Figma properties (variant, size, state)

• Composable architecture (base component + variants)

• Accessibility built-in (ARIA labels, keyboard navigation)

• TypeScript for design-time validation

// Button component structure
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'tertiary';
  size: 'small' | 'medium' | 'large';
  state?: 'default' | 'hover' | 'active' | 'disabled';
  icon?: ReactNode;
  children: ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'medium',
  state,
  icon,
  children
}) => {
  const classNames = cn(
    'pillar-button',
    `pillar-button--${variant}`,
    `pillar-button--${size}`,
    state && `pillar-button--${state}`
  );
  
  return (
    <button className={classNames}>
      {icon && <span className="pillar-button__icon">{icon}</span>}
      <span className="pillar-button__text">{children}</span>
    </button>

Integration Flow

1. Designer updates KIT in Figma

2. Figma Variables export to JSON via plugin

3. GitHub Action transforms tokens to SCSS variables

4. Pillar components consume tokens automatically

5. Visual regression tests validate design-code alignment

6. Release to npm for product teams to consume