# Figma Integration — Storybook

Source: https://www.geekswithgeeks.com/en/storybook/sb-figma-integration

> Link Storybook stories to Figma designs for design-to-code alignment.

## Design-to-code synchronization

The Figma plugin for Storybook allows designers and developers to link component stories directly to Figma designs, creating a single source of truth for component specifications.

## Linking stories to Figma

Add Figma URLs to your story metadata to link it to design specifications.

```tsx
export default {
  component: Button,
  title: 'Components/Button',
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/...',
    },
  },
};

export const Primary = () => <Button>Primary</Button>;
```

## Workflow benefits

Linking designs to stories helps catch design-implementation mismatches early and serves as documentation for component specifications.

## Maintaining design sync

Keep Figma links updated as designs evolve. Use version control to track changes to both design and implementation.