“A design system should bear the burden of the boring, so the designers and developers don’t have to.”
Josh Clark, Episode 2 of Design Systems at Scale
With Mercado as our pilot project, my team developed and utilized a design system. When first creating a design system, there can be struggles. However, after overcoming those obstacles, the process becomes smoother.
For my group, Team A, creating our design system fell into two parts: Figma prototyping and HTML/CSS prototyping. In Figma, we began by creating the prototypes that would later translate into our final HTML/CSS versions of our app, Mercado.
Figma Prototyping
The process of creating our Figma prototypes went pretty well, but I feel that there were a few bumps along the road. During the time we began creating our Figma prototypes, we were still experimenting and working with what we wanted to do for our app. Since we didn’t have a set idea yet, there was some changing and modifying of certain elements before we came to a final version of what those components looked like.
In addition to this, we began our element creation by using a wireframe kit we found in the Figma community. Though this wireframe kit was very extensive and well put together, it was missing a few elements that we needed. Though wireframe kits can be very helpful, they sometimes don’t have everything that you need.
Eventually, we came to our final Figma prototypes, which turned out pretty well. Some minor changes were made when we got to the HTML/CSS portion, but nothing too crazy.
HTML/CSS Prototyping
I usually find myself struggling when it comes to HTML/CSS code, but this project was probably my best experience working with them.
We began by pulling out all the elements (atoms) from our Figma prototype so we knew what we needed to code to create our HTML/CSS design system. Then, we created all those elements in code, storing them in a component library. I would like to thank my team member Max for putting together the component library, as it made the rest of the design process so much easier.
To create the individual pages that made up the interface, all we needed to do was put the already-built components where they needed to go! Some minor changes were made along the way, but the pre-built components were the main star in creating our interface.
And so?
After our pilot project, Mercado, I can truly see how useful design systems can be in creating an interface. Our design system saved so much time when it came to making our actual product. For example, we didn’t have to spend time creating new components for every page. With our components library, this was the quickest I’ve ever done anything using HTML/CSS. This design system also provided consistency among our pages, which improved the overall quality compared to past projects I have worked on.
After learning more about design systems and utilizing them myself, I look forward to working with them in the future!