CREATING A DESIGN SYSTEM LIBRARY
This particular section distinguishes itself from the other case studies, as it primarily emphasizes my proficiency within Figma rather than showcasing problem-solving through design thinking. Throughout my tenure at Quilted Health, I had the opportunity to work on two design system libraries, each with its own unique origin.
For the first library, I undertook the task of converting the existing Quilted Health screens from XD to Figma. This process was fairly straightforward and involved converting the files and tweaking the components as needed.
The second library, the one for our EHR called Maternity Neighborhood, presented a different challenge - a massive live product but no design files. This meant I had to deconstruct the existing product's design elements one-by-one in order to build the library.
Let’s take a look at these two design systems and see how I made it work.
OVERVIEW
I created two design systems for Quilted Health. One for the company and another for their EHR software program called Maternity Neighborhood.
WHAT I DID
User interface design within Figma
My role
UI designer
Duration
Ongoing
Why Figma?
Cloud based, powerful prototyping, a great interface, and so many more reasons.
STEP 1: pick a platform
During my first year at Quilted Health, I initially chose Adobe XD as my primary prototyping software due to my familiarity with Adobe products. With over a decade of experience using Illustrator, it seemed like a logical choice given my Creative Suite subscription. However, I encountered several issues with XD. Like many Adobe products, it significantly impacted the performance of my machines. Additionally, as we rebranded the company, it became apparent that we needed to establish a design library and if I was to put in the work, I wanted something good to work on.
After considering reviews, we made the decision to switch to Figma. Looking back, I couldn't be more delighted with this choice! Figma has proven to be an exceptional product, and the best part is that it does not slow down my Mac like XD did. Furthermore, it has allowed me to efficiently establish and maintain our design libraries.
Step 2: styles
One aspect of Figma that I absolutely adore is its nested frames feature. It was an eye-opener when a fellow UX designer demonstrated how to leverage nested frames to organize a design system effectively. By employing clear labels and utilizing broad headers, these nested frames facilitate the organization of components. Moreover, the beauty of these frames lies in their ability to export designs flawlessly while keeping the components tidy.
When implementing our design system at Quilted Health, I began with the essentials: colors, typography, and other elements akin to what you would typically find in a website's CSS. Figma provided an ideal platform for developing and managing these fundamental components, enabling us to establish a solid foundation for our design system.
Example of frames. These are public facing styles.
As I mentioned earlier, Maternity Neighborhood posed a more challenging situation. While the product itself was fully developed, there was no existing design library. I had to take a hands-on approach by diving into the product, accessing the inspector, and extracting CSS styles to build the design library from scratch.
Although this process presented its own set of difficulties, it provided me with an opportunity to gain an in-depth understanding of the product's design intricacies. By extracting and documenting each style, I was able to establish a comprehensive design library that would serve as a valuable resource moving forward. While it required extra effort, this endeavor proved instrumental in enhancing the overall design ecosystem at Maternity Neighborhood.
Putting in the styles into the new design library.
Step 3: Components
After incorporating the styles into the two libraries, my focus shifted to developing the essential components. These included fields, buttons, panels, and other key elements that form the foundation of websites and products. These components relied on the previously defined styles.
Blurred for confidentiality.
And for Maternity Neighborhood, I again, had to go into the inspector and design each component, one by one into Figma.
Blurred for confidentiality.
I included error states for each component. Components included these fields, buttons, modals, boxes, and so forth.
Component sections as they appear in the design library.
Step 4: Vector graphics and photography
Next, let's focus graphic elements. My approach is to use high-quality images and svgs whenever possible for the system library. If we need to reduce the file size of these graphics, we can do so at handoff. This gives us the most flexibility. So these sections might be larger but are organized like the other components.
Some simple MN logos.
Based on the nature of the product, Maternity Neighborhood simply did not have as many graphic elements but did need to have their logo uploaded to the library. All of their iconography, like some of Quilted’s is pulled from FontAwesome which is used as a Figma plugin.
Step 5: Pages
With all the essential building blocks successfully established, my next step involved integrating the webpages for the Quilted website into the design library. Since the original website was designed using XD by an external agency, I discovered a workaround to avoid the conversion fee by first converting the files to Sketch and then migrating them to Figma. This process proved effective, allowing for a seamless transition without incurring any additional costs.
However, to ensure compatibility with Figma's nested framing system, I invested some time in refining certain elements. While not particularly challenging, this task did require attention to detail and a degree of patience.
Initial conversion from XD to Figma. These were created by another designer, I simply converted them in Figma to nested frames.
Public facing.
Designing the MN pages posed some challenge. I embarked on the task of reconstructing each live page within Figma, relying on the inspector as my guiding tool. Fortunately, I didn’t need to make these screens pixel perfect (they are already live) but I did need them for workflows.
(I cannot show these due to confidentiality).
It was during page design that I needed to ensure that my breakpoints and column systems were set up for both platforms. MN required a little bit of research as they used an older system for their breakpoints and columns.
Example of standard breakpoints screens for future prototyping.
Column styles.
ONGOING: MAINTAINING THE DESIGN SYSTEM LIBRARY
Testing an error state on a collapsable panel.
Design system libraries, much like gardens, demand ongoing care and attention. As part of my routine, I dedicate time each week to label, arrange, and update components as needed. By consistently maintaining the design system library, I enable efficient design workflows in the future.