When I first joined Vericast, I was responsible for maintaining the existing design system, ensuring its consistency and functionality across various projects. As we transitioned to a third-party design system, I played a key role in adapting it to align with our brand’s needs and standards. Throughout this process, I continuously maintained, iterated on, and implemented the design system to ensure it supported our evolving goals and provided a cohesive user experience.

How we organized our system

Our initial design system was based on atomic design principles, which allowed us to break down elements into their smallest components for easier management and provided a clear structure for auditing purposes. This approach was extremely helpful in identifying inconsistencies and ensuring that each part of our UI was well-defined. However, as we delved deeper into the system, we found ourselves overly focused on the granular aspects of atomic design, which caused us to lose sight of the broader vision for a more universal and cohesive design system.

In response, we adopted a third-party library and reorganized our system around foundations, components, and layout. We drew inspiration from the successful elements of atomic design but aimed to create a more scalable and unified framework for our brand. After researching various options, we landed on Mantine as our library of choice, as it aligned well with our goal of building a more universal design system that could support a wide range of use cases and be easily extended as our needs evolved.

That said, adopting a third-party design system wasn’t an easy fix. While Mantine provided us with a solid skeleton, it was up to us as designers to tailor that framework to fit our unique vision and adhere to our accessibility standards. The real work began when we started customizing the components, refining the styles, and ensuring that the system was inclusive and adaptable across different platforms. In the end, it was about striking the right balance between leveraging external resources and creating a design system that felt truly aligned with our brand’s goals.

How we used art boards to organize and communicate

For each component in the design system, we provide detailed variations for both light and dark modes, as well as UI usage guidelines. This ensures that not only designers can effectively use the file, but also that developers have the necessary visual context to accurately implement components during handoff.

variables in figma

I could easily fill this entire page discussing the value of variables in our design system. We utilize variables for a variety of purposes, including design tokens, interactive prototyping, responsive components, and other critical functions that significantly streamline the management and scalability of the design system.

This is an example of our light and dark mode variables for Status

The beauty of variables and prototyping for designer - developer communication

Using variables for prototyping fosters a strong partnership between designers and developers, helping to eliminate potential miscommunication. We’ve all encountered situations where the final product strays from the designer’s original vision. By incorporating prototyping into the process, we can communicate the designer’s intent more effectively, giving developers a clear, visual reference that ensures alignment throughout implementation. This collaborative approach helps maintain consistency and ensures that everyone is working towards the same goal.

A deeper dive into designer - developer communication

The addition of Figma's Dev Mode has been a game changer for designer-developer collaboration. When it was introduced, we organized a brief "learning lunch" to get our developers up to speed with the new feature. Now, when a component is ready, we mark it as "ready for dev," which streamlines the process and strengthens our partnership. While clear communication with developers is still key, Dev Mode acts as a valuable tool that enhances clarity and alignment throughout the design and development journey.

How is our design system translating to the actual code?

The next step in our designer-developer collaboration process involves integrating components into Storybook. Once a component is ready, it is added to Storybook, where it undergoes testing and review by designers to ensure everything has been communicated accurately. We’ve strayed away from a traditional waterfall approach, instead focusing on a more agile process that strengthens communication and partnership between product, design, and development teams. This iterative method allows us to stay aligned and continuously refine our work together.

Using Storybook plays a key role in this agile workflow. It not only helps us review and test components, but it also gives designers the ability to manipulate components and see how they function in code, all without tampering with the production environment. This adds an extra layer of flexibility and confidence, ensuring that every detail is vetted before implementation, while maintaining a seamless flow between design and development.