Designing Drupal Experiences with Figma

Phase2’s Director of Design, Matt Curtin, describes how the digital design process has evolved and the role that Figma can play in Drupal development. 

Can you provide some context on where we’ve been in terms of the web design process?

Historically, it was common for the design work handoff to follow this scenario: 

The creative team worked for months establishing the digital experience for a new Drupal 9 website. The strategy and UX team produced a strong information architecture, countless wireframes, and page flows. Page compositions were identified and the UI designer jumped in to bring the design experience to life with branded visuals. The client stakeholders provided feedback and once the new design was approved, the build started.

The development team was then assembled and the designs were shared. However, the designer couldn’t move on to future design enhancements or the next client project until the developers had what they needed to actually build this website. Invariably there would be a lot of issues to resolve.

The designs had been created with a mixture of Adobe Creative Suite tools. These design files consisted of multiple responsive artboards, requiring an export to PDF and flat images for development. Since the design went through so many rounds of iterations, the team was left with a wasteland of file versions. No one really knew which file was the source of truth and no one wanted to be the one to delete the wrong file.

The developers began compiling assets and while the individual compositions might have been beautiful, there were many inconsistencies. 

Basic components like buttons, links, menus, and accordions featured subtle variations that required multiple versions and styling settings to match what was reflected in the approved designs. The design compositions included a vast library of graphic elements, imagery, iconography, fonts and colors. Exporting all of these assets for implementation added considerable designer time.

While the designer did include compositions outlining treatments for major interactive components like the main menu and search, many other component states were never defined. This led to more back-and-forth discussions between design and development with many of the decisions left to the frontend developer to determine.

Mobile and tablet devices were accounted for during the design process, but several responsive device edge cases were not accounted for. Developers were left with questions involving how components scaled to the larger screen grid and reduced in size for smaller devices. Many of the responsive adjustments were, yet again, left to development to interpret.

How has the design handoff process been improved? Where are we headed?

The market has been flooded by design and prototyping tools. Many of them provide a vastly better design handoff experience and remedy the historical issues I laid out. The list includes Adobe XD, Framer, Sketch, InVision Studio, Axure, and Figma. Zeplin and Avocode are also design export and development handoff tools that are available. Over the past decade, I have had the opportunity to use several of these tools. 

The team at Phase2 landed on Figma as the tool we use during the creative process. By keeping all artifacts—personas, journeys, wireframes, design systems, and prototypes—all in one place, it makes collaboration and consistency much easier to maintain. 

Figma is a web-based platform that gives you the ability to work within the local app or directly in the browser. The entire team can work in the same file all at once without slowing things down. We have removed the need for file versioning and sharing by keeping design iterations all in one place with the ability to version control right from the same file. Designs can also be shared directly with developers early and often—improving communication.

The Figma interface mimics other online collaboration tools like Google Docs. This familiar interface makes it easy for all of our team members—familiar with design tools or not—to navigate, inspect, and comment. Clicking on a user’s avatar jumps to the frame or component the user is working on. We typically use this during our internal design syncs or team meetings to discuss design decisions on the fly.

Similar to Drupal, Figma has backing and support from the design community. There is a long list of community plug-ins available for faster design implementation, interface visual elements, layout, accessibility, annotations, and more. Accessibility is a huge consideration when building a new Drupal site—or any website or application for that matter. While it’s important to note that everyone plays a role in accessibility, designers can help tremendously through continuous testing during the design process and documentation. A lot of this can be done directly in Figma. 

Learn more! Watch Matt’s presentation on this topic at DrupalCon ‘22, in Portland, OR.