https://github.com/interaction-dynamics/design-system-hub

A zero config alternative to Storybook with automatic synchronization with Figma, visual tests and more.
https://github.com/interaction-dynamics/design-system-hub

hacktoberfest nextjs react

Last synced: 5 months ago
JSON representation

A zero config alternative to Storybook with automatic synchronization with Figma, visual tests and more.

• Host: GitHub
• URL: https://github.com/interaction-dynamics/design-system-hub
• Owner: interaction-dynamics
• License: mit
• Created: 2024-05-14T11:51:31.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2025-02-18T11:49:22.000Z (over 1 year ago)
• Last Synced: 2025-02-18T12:39:37.937Z (over 1 year ago)
• Topics: hacktoberfest, nextjs, react
• Language: TypeScript
• Homepage: https://design-system-hub.com
• Size: 1.9 MB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Design System Hub




![horizontal_deep_pink](https://github.com/user-attachments/assets/5f8025c8-301f-4746-8383-951e9bf3c8d2)

Hacktoberfest is there! We are looking for contributors to help us build the future of design systems. If you are interested, please check our [Hacktoberfest page](https://github.com/interaction-dynamics/design-system-hub/discussions/90).

[[Demo]](https://design-system-hub.com/example-design-system---with-variants/components/button)



The only solution to maintain your design system that is developer-friendly AND designer-friendly.

It can replace Storybook and much more.

![image](https://github.com/interaction-dynamics/design-system-hub/assets/4005226/e8118830-1d55-47ff-b248-8c69634ae384)

> It is a work in progress and is not ready for production yet. But you can access the private beta by registering at [design-system-hub.com](https://design-system-hub.com) This is built in public so feel free to check our [wiki](https://github.com/interaction-dynamics/design-system-hub/wiki) for more information.

## Getting started

If you want to start using this tool, you can follow the instructions in [apps/documentation-portal/README.md](./apps/documentation-portal/README.md).

## Roadmap

The project is composed of multiple apps:

- [documentation-portal](./apps/documentation-portal/README.md): the website that will host the design systems [STARTED]

- a figma integration to extract the component from figma [DONE]

- a figma plugin that will help check the code from Figma (see development status, etc) [NOT STARTED]

- a cli [dshub](./apps/node-cli/README.md) to extract the components from the code [STARTED]

- a [tailwind plugin](./apps/style-tailwind/README.md) to set the theme from design tokens [STARTED]

- a cli to extract the components from the code [STARTED]

- a VS Code plugin to help the developer to use the design system [NOT STARTED]

- a eslint plugin to check the code against the design system [NOT STARTED]

You can check the roamap [here](https://github.com/orgs/interaction-dynamics/projects/10/views/4).

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code practices and the process for submitting pull requests.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.