Back to step one
Continuing from our previous articles, after we finished building the "Deal App" design system
Therefore, we began an urgent phase of studying and researching how to facilitate coding the design system
So, our first step was to form a squad from both teams that would be responsible for identifying specific problems and proposing solutions
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
领英推荐
????????? ???????? ???????, ??? ?? ??????? ?? ???? ???? ??????? ????? ?? "??? ??" ???? ?????? ????????? ??????? ??? ????? ????? ??????? ? ????? ????? ? ??????? ??????? ???? ???? ?????? ???? ???????? ????? ???? ???????? ????? ??? ????? ?? ????? ?????? ????? ????????? ???? ????? ????????? ?? ???? ?????.
????? ?????? ?? ????? ???????? ?????? ? ???? ?????? ????? ????? ????? ???????? ????? ??? ????? ?????? ? ?????? ???? ???? ??? ?? ????? ? ?????? ??? ?? ???? ?? ????? ???? ???????.
? ???? ???? ??? ????? ???? ??? ????? ?? ???????? ???? ????? ?? ????? ??????? ??????? ? ?????? ???????? ?????, ??????? ??? ???? ???? ????? ??? ?? ???????? ??????? "???? ???? ???? ???? ????? ???? ??? ???????? ? ?????? ???? ????? ?????? ????????? ????? ?? ???? ????????"
???? ?????? ?? ??? ?????? ??? ???? ?????? ???? ???? ??????? ??? (?????? ???? ???) ? ????? ?? ????? ???? ???? ?????? ? ???? ?? ?????? ???? ???? ??? ?? ????? ???? ??:
https://ionicframework.com/ds
https://stenciljs.com/
? ????? ???? ? ??? ??? ???? ????? ??? ???????? ???? ?????? ???? ?????????? ?? ????????? ???? (??????? ??????? ????) ? ?????? ???? ????? ???? ?????? ????? ? ?????????? ????? ?? ??????? ?????.
? ???????? ?? ??????? ??? ??????? ????? ???? ???? ???????? ???? ???? ??????? ?? ???? ??????? ???? ?? ??????? ?????? ????????? ? ????? ????? ?????????? ?? ???? ? ?? ??? ????? ????? ?????????? ?? ????? ?????? ???? ?????? ??????? ??? ???????? ??? ???? ???? ????? ?????? ???? ??? ??? ???????? ? ????????? ?????
????? ????? ??? ????? ?????
??? ????????? ??? ??????? ?????? ???? ??? ?????? ????? ?? ????? ???? ?? ???? ?????? ???? ?? ????? ??????? ??????? ?? ????? ?????? ????? ?? ??? ?? ?????? ??????? ?? ?????? ???? ???.
? ???? ??????? ????? ???????? ???????? ??????? ??? ??????? ? ??????? ?? ???????? ????? ??? ?????? ????? ?????? ?? ????? ?? ???????, ???? ??? ??????? ????? ? ?? ????? ???????? ?????? ??????????.
? ?? ?? ????? ????? ??????? ? ?????????? ??? ?? ??????? ???? ???? ????? ????????? ???? ? ??? ???? ??????? ????? ? ?? ???? ?????? ? ????? ????? ???????? ???? ????? ????????? ???? ?? ?????? ?????????? ????? ?? ?? ??? ?????? ???? ??????? ??? ?? ???? ??????? ? ????? ???? ??? ???? ?? ????????? ?? ????????? ?? ????? ??????.
????? ????? ?? ????? ??????? ? ??? ??????? ????? ??????? ??? ?????? ???? ? ?????? ??????? ??? ? ?? ????? ????? ?????? ???? ??? ? ??? ???? ?? ??????? ????? ?????? ???? ???? ?? ??????? ? ??? ???? ????? ???? ??????? ???? ?????? ?? ?? ???? ????? ???? ???????? ?????.
Good luck Ashraf ?? ??