Välj en sida

Content libraries for Qliro and Mathem

Most people in product design are familiar with design systems, but few have heard of content libraries. They work in a similar way and serve the same purpose: to help keep track of copy, improve collaboration between writers and developers, speed up workflows, and—most importantly—ensure consistency in the copy.

Problem to solve

Both Qliro and Mathem faced challenges with outdated copy in large Figma files. What was live often became the “source of truth,” making it hard to reflect the actual design in Figma, which led to confusion for designers and developers about which copy to use. Qliro also needed a way to store translations efficiently, while Mathem needed to eliminate hardcoded copy and improve their content workflow.

What I did

In both cases, I used Ditto to create the content library. Through Ditto’s plugin, I connected the relevant files, established a clear naming structure, and started componentizing the copy while syncing it with Figma. For example, inconsistencies like different versions of a close button were fixed by attaching the copy to components like cta/close button or cta/soft close button. When multiple languages were needed, I added language variants to each component. This way, the content library became the single source of truth, where any changes were made in Ditto and automatically reflected in the design files. The library also allowed us to document stand-alone copy, such as error messages, without needing a design file.

At Mathem, I worked closely with the developers to integrate Ditto into the code. Since they didn’t use a content management system, most copy was hardcoded. With Ditto, we enabled writers to push copy updates without involving developers, making the process much smoother and more efficient.