Collaborative Design at Scale with Figma
Known as a chronic and progressive condition, type 2 diabetes has become an epidemic, affecting nearly 450 million people globally. At Virta, our mission is to reverse this disease in 100 million people by the year 2025. To achieve this reality, our team has to ensure that we are running not only quickly, but in the right direction. We must create systems that allow us to design and implement with speed. One of the tools we use to achieve this rapid iteration is Figma.
Figma is a browser-based interface design tool with a strong emphasis on collaboration and sharing. The team was originally attracted by the tool’s shared file library, which could be accessed online and stays in sync. When we first switched to Figma, our worries about version control, history and design archival became a thing of the past and it allowed us to move and create swiftly. More recently, however, we have been most excited about Figma’s Component Library.
I work with our Clinical Tools team on a product we call Spark. Spark is an internal tool which provides our Health Coaches and physicians with intelligent insights, powerful features and real-time data, allowing our Clinical Team to deliver the best possible care to our patients. For remote care to be successful, we must have the power to rapidly iterate on our product to ensure that the needs and demands of our patients are being met, especially as we continue to grow at scale. This is where Figma helps us most.
To begin using the Component Library, the first step was to translate our most commonly used design assets into Figma components. Early on, I built and included simple items such as buttons, icons, and iOS UI elements, but as design work continued within Figma, the team began to grasp the true scope of the capability and complexity we could include in our components. With Component Constraints, a feature that allows one to set a desired behavior for how objects respond when resized, a single component could now be created that is able to be used on either desktop or mobile layouts. For example, a mobile alert popup containing an icon, text and a button is ready for reuse on the desktop layout with a simple click and drag. We were able to create header components, navigation components, containers, drop-downs and more, all while remaining confident that if built correctly, these would work on multiple screen sizes.
Ideas and directions are, for the most part, generated in pixels and then quickly translated into code, typically in the form of React Components. Each designer on the team has some level of React experience and by not letting designs sit within design tools for too long the team is able to ship and collect feedback quickly. In the early days of Spark, we were lacking enough of an existing design vision to be able to easily jump into code for new ideas and features because it was not certain how the pieces were all going to fit together. The product was in a position where near-complete designs were necessary to give internal users a clear sense of what the user experience would look and feel like and allowed for the team to collect valuable feedback before putting in engineering time.
To reach our goal of high-fidelity Spark designs we began with several basic UI components, including those described above. With these components in place, it was time to focus on typography. Figma does not yet support text-styles, and to avoid changing potentially hundreds of text instances, we wanted to ensure easy modification. I started with a basic text component and labeled it “p-base”. This component defined the paragraph’s default size and typography rules. Next, another nested component from the top-level “p-base” component was created and it was called “p-base-link”. This component set the link styles, while inheriting the styles set in “p-base”. Creating basic reusable items like the paragraph from the start allowed us to easily change and adjust UI elements as we continued to design.
With a library full of simple and more complex components that could be duplicated and placed anywhere, we were now able to move at a speed faster than ever before. The use of components has allowed for each new design to remain visually up-to-date. All Designers, PMs and engineers now have the ability to jump into Figma to spawn new ideas, using the latest versions of all UI elements. With the component library readily available, anyone working on a Figma file has the ability to quickly drag and drop standardized UI components into their mockups.
Thank you to Figma for providing collaborative and powerful tools which help us create more and worry less, and to William Newton from Gusto, whose postinspired us to share how we at Virta are using components inside of Figma.
If you’re a talented scientist, clinician, software engineer or designer, consider joining us on our mission to solve the global diabetes epidemic! 👋
Figma didn’t sponsor the writing of this post. They thought it was helpful for other designers, so they’re advertising it on Twitter and Facebook with my permission.
