Checklist Template Example

You have come to the right place if you need inspiration for your first template. Let's get you started.

Why templates?

With a checklist template, you can create easy-to-follow steps to outline a process, govern contributions, and ensure quality. The template will be distributed to all Figma Widget instances, meaning every designer will see the same checks. A centralized checklist comes in handy if you want to see the progress of a component.

The use of a template is two-fold

On the one hand, it helps you understand each contribution because you can see its status. On the other hand, the checklist allows designers and developers to follow a process and more easily continue where they left off.

Setting goals

Here are a few goals you can keep in mind when creating a checklist:

Two types of processes

Part of the process

Consolidation phase

Removing discrepancies happens in the consolidation phase. You can gather all the buttons (or any other component) here, giving you a clear idea of the component's usage on the platform. Next, you need to consolidate that component into one solution. What will you support, how will you support it, and what needs to change?

Governance

You can govern new contributions by asking the designer first to try the components of the Status Quo. When the designer needs to make adjustments to support their use case, it is time to consolidate new ideas with the old. Will the new solution also support all other usages? Does the solution still fit the purpose of the component? Read more about governance in our article on designsystems.com (opens in a new tab).

The importance of alignment

It is crucial to align the contribution with the development to avoid discrepancies from creeping in. We often say the design system is the source of truth. That truth, however, is stored in Figma, in code, on the documentation platform. You can expect changes to come from anywhere, so it is vital to keep them aligned. Aligning code to Figma is called Stack Mirroring and can be achieved via API alignment.

API Alignment

In this session, developers and designers come together to look at all the instances of the component. They will collaboratively name the anatomy and structure and define all properties and values of a component. Figma supports most properties you can define in code. Think of enums (lists), booleans (true/false), and strings (text input). With these attributes, you can make a list of types with an enum (primary, secondary, tertiary), create inverted states with a boolean (inverted is true or false), or add UX copy with a string (button label).

Definition of Ready

Now that everything is aligned, the designer can incorporate all the changes and deliver a final design for development. It would be great to create a new repository for new components and drop the Figma link to each component's DoR. That way, you ensure the component will be named accordingly, and your developer gets directed to the correct Figma file.

Bottlenecks

Be careful not to introduce any bottlenecks to the process and avoid waterfall processes as much as possible. You can ask yourself: What tasks can be done concurrently? What can an individual do, and when do we need a meeting to align?

The flow example here shows that only two meetings are needed. After the DoR is delivered, the steps belonging to Documentation and Development can be delivered concurrently.

Example