https://github.com/emasuriano/design-system-storybook-workflow

Example of storybook and Figma working together to keep consistent components with design system.
https://github.com/emasuriano/design-system-storybook-workflow

Last synced: 21 days ago
JSON representation

Example of storybook and Figma working together to keep consistent components with design system.

• Host: GitHub
• URL: https://github.com/emasuriano/design-system-storybook-workflow
• Owner: EmaSuriano
• License: mit
• Created: 2020-04-06T13:46:07.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-06T14:42:52.000Z (about 5 years ago)
• Last Synced: 2025-02-10T21:45:47.810Z (2 months ago)
• Size: 3.91 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Roadmap: ROADMAP.md

Awesome Lists containing this project

README

        
# design-system-storybook-workflow

Example of storybook and Figma working together to keep consistent components with design system.

Figma link --> [PLEASE FILL ME]

## What do we want to do?

Present a component library in Storybook and the integration with a prototype in Figma.

## Integration ideas

### Sync stories with Design name

Check for all the pages inside Figma, inside each page there is several frames.

Figma:

- **Pages**

  - **Frames**

    - Symbols

Storybook:

- **Story**

  - **Variation**

    - Component

To fetch data from Figma we can use --> https://github.com/braposo/figma-graphql

1. Check how many stories don't have a design linked.

2. Add new stories with the name of new pages and frames.

### Sync stories with Screenshots

Add the figma frame to the story (screenshot).

### Visual test

Automatic test that check the diffing between the rendered component and the screenshot.

## License

Mit.