Figma Integration

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.

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.