When Figma fell short, we filled the gap with a homegrown solution

Sometimes not even Figma can do it all

The design team at Q4 are big fans of Figma, but sometimes a use-case is so niche that even a great out-of-the-box system needs a little homegrown assistance.

As you may have learned from my colleague Samantha Howes, we’ve dedicated a lot of time and effort to developing an efficient way to update and maintain our design system and its components. We use Figma, but for our components review purposes, its branch review feature fell short.

In this post, I share details of a simple workaround: a component review template that worked so well for our team that you might want to adopt it for yours.

When reviewing changes to a design system, it is important to see how changes to one component may affect the rest of the system.

While Figma’s branch review feature is a fantastic tool for collaborating and reviewing changes in a design project, it may not be the best option for reviewing changes to a design system that relies on components. This is because Figma’s branch review feature currently doesn’t allow us to easily compare a specific component with a previous version and can be a pain to navigate to and fro for the reviewers.

The last thing a busy design team needs is a tool or process that slows things down. To keep our design system maintenance project on track, we developed a framework to help streamline this element of our component development process — and it’s something any team can integrate into their own process.

Are you ready to take a look?

The six short videos below will walk you through what we created, how it works and why we made it this way.

1. Context Setting

In the first video, I cover the purpose of this template in the context of how we break down our design system component improvements, here at Q4.

2. Template Header

In this video, we look at how you can organize the template header, so reviewers know the component that is being worked on, along with all the issues pertaining to it.

3. Setting context, problems and tasks

In video 3, we look at how you can provide context and problems about the current component in a structured manner and then organize your thought process using a very simple task list to not miss any steps. Additionally, this task list provides an excellent asynchronous approach to allow the reviewers to understand the process that the designer took while improving the given component.

4. Problem Themes

In this video, we go over how the different issues could be organized as well as how adding a base template can help designers document and add necessary components artifacts and details quickly and accurately. Additionally, organizing it in this manner helps reviewers understand all the changes from top to bottom without any confusion.

5. Status and Testing

Watch video 5 to learn how you can communicate the current status of your component work, and how you could go about systematically stress testing the component on a use-case basis using a Pass/Fail methodology.

6. Live Use

And finally, we take a look at how all of this comes into play by making use of a demo toast component, in which the designer has added component properties and made some changes to the layer names.

The benefits of using our component review template

Download this template to help your team in the following ways:

1. Streamline the review process: A component review template provides a consistent and organized structure for reviewing and testing components, making the process more efficient and effective.
2. Improve consistency: By having a central location for components and a consistent review process, teams can more easily maintain design consistency across projects and platforms.
3. Enable clear communication: The template facilitates clear communication between team members and allows reviewers to provide feedback and revisions in a structured manner.
4. Increase collaboration: By using a shared template, team members can easily collaborate and review components together, regardless of their location or time zone.
5. Better testing and validation: The template allows for thorough testing and validation of components before they are implemented, reducing the risk of errors and rework.

Have you developed any tools to pick up where Figma leaves off? If so, please share details in the comments.

If you’re interested in learning more about the work we do at Q4, please check out the entire Inside Q4 site. If you’re interested in working with us, please visit our careers page.