Back to step one

Continuing from our previous articles, after we finished building the "Deal App" design system in a visual design format, in preparation to hand it over in stages to the Front-End team and study the required time and effort to complete the design system journey within the product, we found through research that the current situation would require the developers to start coding the application from scratch.

Therefore, we began an urgent phase of studying and researching how to facilitate coding the design system while preserving the appearance and diversity that we have achieved and staying within the direction of the front-end team as much as possible.

So, our first step was to form a squad from both teams that would be responsible for identifying specific problems and proposing solutions between them, to answer one question with as many details as possible: "How can we implement one design system between the teams without having to demolish the current application code, especially from the front-end side?"

The journey started from within the framework used by the front-end team (Ionic Framework) and researching ways that could help us without requiring us to start coding from scratch again, such as:

And many others, but these two, in particular, caught our attention due to the presence of most of our component needs in them (with different styling) and their construction primarily aligns with our application's interaction model.

We finally settled on the first option among them because it would greatly help us in aligning with the design system, which differed in the names of the components and the way variants were organized beneath it. This was an acceptable effort for us at the moment, considering the division of work between the two teams, which ensures the smooth flow of tasks between them.

Starting to work on unifying the methods

After settling on using Ionic Framework Design System, it is now time for us as a design team to start unifying our previous steps in creating a design system for "Deal App" with the development aspect of the Ionic Framework.

Our steps were simple, given our focus on our ability to modify and expand the design system during its creation. This specifically helped us. Our first steps were to unify the names of the components.

Then, we unified the properties and variants beneath each component to ensure that the language used between us and the front-end team was the same.

The third step, and the most important, was our initial attention to some of the component shapes that are not currently required or in the expansion plan, but their presence is important, such as the date and time picker, which was not used in our application at present.

Afterward, we began the documentation stage and Hand-off methods to the front-end team that suited them and the tasks assigned to them.

????????? ???????? ???????, ??? ?? ??????? ?? ???? ???? ??????? ????? ?? "??? ??" ???? ?????? ????????? ??????? ??? ????? ????? ??????? ? ????? ????? ? ??????? ??????? ???? ???? ?????? ???? ???????? ????? ???? ???????? ????? ??? ????? ?? ????? ?????? ????? ????????? ???? ????? ????????? ?? ???? ?????.

????? ?????? ?? ????? ???????? ?????? ? ???? ?????? ????? ????? ????? ???????? ????? ??? ????? ?????? ? ?????? ???? ???? ??? ?? ????? ? ?????? ??? ?? ???? ?? ????? ???? ???????.

? ???? ???? ??? ????? ???? ??? ????? ?? ???????? ???? ????? ?? ????? ??????? ??????? ? ?????? ???????? ?????, ??????? ??? ???? ???? ????? ??? ?? ???????? ??????? "???? ???? ???? ???? ????? ???? ??? ???????? ? ?????? ???? ????? ?????? ????????? ????? ?? ???? ????????"

???? ?????? ?? ??? ?????? ??? ???? ?????? ???? ???? ??????? ??? (?????? ???? ???) ? ????? ?? ????? ???? ???? ?????? ? ???? ?? ?????? ???? ???? ??? ?? ????? ???? ??:

https://ionicframework.com/ds

https://stenciljs.com/

? ????? ???? ? ??? ??? ???? ????? ??? ???????? ???? ?????? ???? ?????????? ?? ????????? ???? (??????? ??????? ????) ? ?????? ???? ????? ???? ?????? ????? ? ?????????? ????? ?? ??????? ?????.

? ???????? ?? ??????? ??? ??????? ????? ???? ???? ???????? ???? ???? ??????? ?? ???? ??????? ???? ?? ??????? ?????? ????????? ? ????? ????? ?????????? ?? ???? ? ?? ??? ????? ????? ?????????? ?? ????? ?????? ???? ?????? ??????? ??? ???????? ??? ???? ???? ????? ?????? ???? ??? ??? ???????? ? ????????? ?????

????? ????? ??? ????? ?????

??? ????????? ??? ??????? ?????? ???? ??? ?????? ????? ?? ????? ???? ?? ???? ?????? ???? ?? ????? ??????? ??????? ?? ????? ?????? ????? ?? ??? ?? ?????? ??????? ?? ?????? ???? ???.

? ???? ??????? ????? ???????? ???????? ??????? ??? ??????? ? ??????? ?? ???????? ????? ??? ?????? ????? ?????? ?? ????? ?? ???????, ???? ??? ??????? ????? ? ?? ????? ???????? ?????? ??????????.

? ?? ?? ????? ????? ??????? ? ?????????? ??? ?? ??????? ???? ???? ????? ????????? ???? ? ??? ???? ??????? ????? ? ?? ???? ?????? ? ????? ????? ???????? ???? ????? ????????? ???? ?? ?????? ?????????? ????? ?? ?? ??? ?????? ???? ??????? ??? ?? ???? ??????? ? ????? ???? ??? ???? ?? ????????? ?? ????????? ?? ????? ??????.

????? ????? ?? ????? ??????? ? ??? ??????? ????? ??????? ??? ?????? ???? ? ?????? ??????? ??? ? ?? ????? ????? ?????? ???? ??? ? ??? ???? ?? ??????? ????? ?????? ???? ???? ?? ??????? ? ??? ???? ????? ???? ??????? ???? ?????? ?? ?? ???? ????? ???? ???????? ?????.