design-system-hub

KO | EN

gitlite — search

#python #android #nodejs #php #mongodb #docker #hacktoberfest #ruby #rust #kotlin #buildkite #example

design-system-hub

★ 17 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Design System Hub</h1>

![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)

</div>

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.

design-system-hub

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README