# Figma Integration — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/hi/storybook/sb-figma-integration

> Storybook stories को Figma designs से जोड़ें ताकि designers और developers components के लिए एक ही source of truth साझा करें।

## Design-to-code synchronization

Storybook के लिए Figma plugin designers और developers को component stories को सीधे Figma designs से link करने देता है, component specifications के लिए एक single source of truth बनाता है।

## Stories को Figma से link करना

Design specifications से link करने के लिए अपने story metadata में Figma URLs add करें।

```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

Designs को stories से link करना design-implementation mismatches को जल्दी पकड़ने में मदद करता है और component specifications के लिए documentation के रूप में काम करता है।

## Design sync को maintain करना

जैसे designs evolve करते हैं Figma links को update रखें। Design और implementation दोनों में changes को track करने के लिए version control का use करें।