Design Systems 2025: Figma to Code

Design systems bridge design and development, ensuring consistency across products. 2025 brings tighter Figma-to-code workflows with automated token syncing and AI assistance. At ZIRA Software, our design system reduced UI development time by 60%.

Modern Design System Architecture

Design System Stack 2025
├── Design Tokens (source of truth)
│   ├── Colors, spacing, typography
│   ├── Figma Variables
│   └── Exported to CSS/JS
├── Component Library
│   ├── React/Vue components
│   ├── Storybook documentation
│   └── Automated visual testing
└── Integration Layer
    ├── Figma plugin sync
    ├── CI/CD pipelines
    └── Version management

Design Tokens with Style Dictionary

// tokens/base.json
{
  "color": {
    "primary": {
      "50": { "value": "#f0f9ff" },
      "500": { "value": "#0ea5e9" },
      "900": { "value": "#0c4a6e" }
    },
    "semantic": {
      "background": { "value": "{color.neutral.50}" },
      "foreground": { "value": "{color.neutral.900}" },
      "accent": { "value": "{color.primary.500}" }
    }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" },
    "xl": { "value": "32px" }
  },
  "typography": {
    "fontFamily": {
      "sans": { "value": "Inter, system-ui, sans-serif" },
      "mono": { "value": "JetBrains Mono, monospace" }
    },
    "fontSize": {
      "sm": { "value": "14px" },
      "base": { "value": "16px" },
      "lg": { "value": "18px" },
      "xl": { "value": "24px" }
    }
  }
}

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/css/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables',
      }],
    },
    js: {
      transformGroup: 'js',
      buildPath: 'dist/js/',
      files: [{
        destination: 'tokens.js',
        format: 'javascript/es6',
      }],
    },
    tailwind: {
      transformGroup: 'js',
      buildPath: 'dist/',
      files: [{
        destination: 'tailwind.config.js',
        format: 'tailwind/config',
      }],
    },
  },
};

Component Library Structure

packages/ui/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   ├── Button.test.tsx
│   │   │   └── index.ts
│   │   ├── Input/
│   │   ├── Card/
│   │   └── index.ts
│   ├── tokens/
│   │   └── index.css
│   └── index.ts
├── package.json
└── tsconfig.json

React Component with Variants

// components/Button/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { forwardRef } from 'react';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-primary-500 text-white hover:bg-primary-600',
        secondary: 'bg-secondary-100 text-secondary-900 hover:bg-secondary-200',
        outline: 'border border-input bg-transparent hover:bg-accent',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        destructive: 'bg-destructive text-white hover:bg-destructive/90',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-base',
        lg: 'h-12 px-6 text-lg',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  isLoading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, isLoading, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={buttonVariants({ variant, size, className })}
        disabled={isLoading || props.disabled}
        {...props}
      >
        {isLoading && <Spinner className="mr-2 h-4 w-4" />}
        {children}
      </button>
    );
  }
);

Storybook Documentation

// components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg', 'icon'],
    },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    children: 'Primary Button',
    variant: 'primary',
  },
};

export const AllVariants: Story = {
  render: () => (
    <div className="flex gap-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  ),
};

Figma Token Sync

// scripts/sync-figma-tokens.ts
import { FigmaAPI } from '@figma/rest-api-spec';

async function syncTokens() {
  const figma = new FigmaAPI(process.env.FIGMA_TOKEN);

  // Fetch variables from Figma
  const variables = await figma.getLocalVariables(FILE_KEY);

  // Transform to Style Dictionary format
  const tokens = transformFigmaVariables(variables);

  // Write to tokens file
  await fs.writeFile(
    'tokens/figma-sync.json',
    JSON.stringify(tokens, null, 2)
  );

  // Rebuild design tokens
  await exec('npx style-dictionary build');

  console.log('Tokens synced from Figma');
}

function transformFigmaVariables(variables: FigmaVariable[]): TokenFile {
  return variables.reduce((acc, variable) => {
    const path = variable.name.split('/');
    setNestedValue(acc, path, {
      value: variable.resolvedValue,
      description: variable.description,
    });
    return acc;
  }, {});
}

Visual Regression Testing

// Button.visual.test.ts
import { test, expect } from '@playwright/test';

test.describe('Button Visual Tests', () => {
  test('primary button matches snapshot', async ({ page }) => {
    await page.goto('/storybook/iframe.html?id=components-button--primary');

    await expect(page.locator('.button')).toHaveScreenshot('button-primary.png');
  });

  test('all variants match snapshot', async ({ page }) => {
    await page.goto('/storybook/iframe.html?id=components-button--all-variants');

    await expect(page).toHaveScreenshot('button-all-variants.png');
  });
});

Conclusion

Design systems in 2025 automate the Figma-to-code pipeline with tokens, component libraries, and visual testing. This consistency accelerates development while ensuring design fidelity.

Need a design system? Contact ZIRA Software for design engineering services.