Create a design-system repo

[mcturco]

Hi team 👋
Wanted to propose this idea in a discussion and get your feedback!

In issue #22, we began to discuss the foundations of what our design system should look like and what the process will be like for building out components as they are designed.

@magicmatatjahu and I discussed that it might be a great idea to create a repo separate from brand called design-system where we can properly build out and test each component, make changes, and ship. Within this repo, I have the idea of using Storybook to build, test, and document our component library in the design system repo as a whole. Then eventually when we feel like we have a solid foundation in the design system, we can move into using some of the smaller components to create UI kits for things like documentation template, tooling, and website.

How does one contribute to the design system within this repo?

1. Issues will be added both by myself as a maintainer as well as the contributors of the design system. These issues will represent the need to design a specific component in a small scope.
2. Once the team has decided on a design direction for this component, an engineer can pick up the issue and add the component to the Storybook.
3. From there, we can interact with the component and make any necessary adjustments. These adjustments must also be made in the Figma file so as to keep the design file in sync with the code at all times.
4. Once we have a finalized version, we can "ship" the component and sync it with the react component (although I think this process is still being thought about)

What does that mean for brand?
The goal for brand if this new repo is added is to continue to build and maintain the visual identity of AsyncAPI as well as be a hub for design requests for marketing, social media assets, etc.

@asyncapi/tsc_members, when you have a moment will you review this request and have a vote on whether this repo should be added to the org? 😄

[magicmatatjahu]

We need a repo where we can keep the components for our design. Converting an existing one would be a big problem. We can always transform the brand, but brand and design are two different topics, as you Missy wrote :)

However, referring to the last 2 points:

From there, we can interact with the component and make any necessary adjustments. These adjustments must also be made in the Figma file so as to keep the design file in sync with the code at all times.

Will this have to be done for each component? You have to take into account that some components like Modal/Dialog, Tabs or form elements have very complex implementation (I mean complex JS implementation) and I think it would be better to write this implementation first and then talk about design which can always be changed. In general we have to remember two things in design. UX for users (nice design and intuitive usage) + UX for developers (easy use and good composition of components in existing projects). It seems to me that in the initial phases of the project this point will not be so easy to meet, but in later phases it will be.

Once we have a finalized version, we can "ship" the component and sync it with the react component (although I think this process is still being thought about)

This is problematic, because using these components in react-component should be done when we have enough components to rewrite react-component, so it will happen when we find out that design-system is "approaching" 1.0.0. Such a small digression from my side. Of course we have to remember about the Studio and Website, because there we should also use new components.

So much for my part. The rest of the assumptions is ok for me :)

[mcturco]

From there, we can interact with the component and make any necessary adjustments. These adjustments must also be made in the Figma file so as to keep the design file in sync with the code at all times.

Will this have to be done for each component? You have to take into account that some components like Modal/Dialog, Tabs or form elements have very complex implementation (I mean complex JS implementation) and I think it would be better to write this implementation first and then talk about design which can always be changed.

@magicmatatjahu So the ideal design process IMO will always be to ideate the components via sketches/figma mocks FIRST. From there, we can collaborate on improvements and then with that feedback go back into the design ideation phase until we are at a comfortable spot with the design (this process will be on a smaller scale, for example: maybe we are ideating on a component that shows Payload). Then, once we all agree on a design after a few rounds of Ideation -> Feedback, we can work on the JS implementation (this experience will be up to engineers) within the sandbox design-system repo. Once the component is an actual working React component, we can all interact with it within the sandbox repo and have another round of feedback and possibly a couple more rounds of design iterations based on that feedback (this is where we need to make sure that the design in figma ALWAYS matches the component in the JS implementation). After this step, we can ship the component into the proper area (for this Payload example, it would have to get added to the React Component)

So I guess what I am thinking is that the design-system repo will be a tool for us to document and test the components before they are shipped. I hope that makes sense?

If it helps to add this process into the README of the new design-system repo for contributors to follow, I am up for leading the organization of that process.

[quetzalliwrites]

Makes a lot of sense and that's how I've done it before in a previous agency I worked at. Def makes sense to have a new repo now for the design components.

Adding to the YES votes.

[fmvilas]

I transferred this discussion to the community repo for broader visibility. Gonna create the repo so you folks are not blocked.

In the meantime, if someone has something to object against it, feel free to leave a comment here.

[fmvilas]

Here's the new repo https://github.com/asyncapi/design-system @mcturco @magicmatatjahu

[mcturco]

Thank you, @fmvilas !!

[derberg]

@mcturco all good here? or done or do you need something?

[mcturco]

All good! Thank you 😄