3 experiments: creating a copy single source of truth

As part of a recent Hackathon, I looked into better ways to manage our copy.

For context, I’m a Content Designer who works for Dext – a Fintech company with 3 products. We use several tools in our design process. Yet, we don’t have an official Single Source of Truth (SSOT) for our English and French copy.

This makes it hard to find the final copy. It also requires effort to stay up-to-date with decisions on the words we use and their formatting. Keeping things consistent is borderline impossible. With a growing team and several personas to write for, we must organize our copy – we need one place as ‘the’ place of truth.

What is a copy SSOT?

A copy Single Source of Truth is one place to manage the words across an organization. And that’s, ideally, from design to production.

Why you need an SSOT

Right now, we use Figma for almost everything. The sheer volume of work we create in Figma means it’s hard to use the tool as a copy SSOT. This means relying on memory and trawling through files to track copy down, which wastes time.

Having copy everywhere is a big challenge. Solving this involves creating a systemised, reusable copy repository. Done well, this reduces manual copy-and-paste efforts. It also reduces the risk of inconsistencies sneaking in.

As a business grows, 3 key risks of not investing in an SSOT are:

1. Significant slowing down of turn-around time for copy.

2. Significant copy inconsistencies should the copy team scale.

3. Should someone leave a Content team, you lose valuable copy endeavors with them.

Option 1: Ditto Words

Our design team use Figma. Before exploring a copy SSOT in the Hackathon, we were already trialing Ditto for our copy.

Ditto is a Figma plug-in and app. It captures the words from Figma and stores them in its app. It’s a content management system, a library – a repository. You can make changes via the plug-in or in the Ditto app and changes sync either way. There’s also the option of a developer integration (an extra cost).

Ditto works like a layer over your Figma file. You open a Figma file and the Ditto plug-in. You then copy the Figma file URL to the plug-in and select the frames you want Ditto to access.

I make copy changes in the Ditto plug-in while working in Figma. You can also work in the reverse – working from the Ditto app and pushing your changes to the Figma file. If someone makes a copy change in the Figma file, Ditto will flag if this differs from what’s in the app. You then choose which version – Figma or Ditto – as your source of truth.

One of the key features of Ditto is you can componentize copy. We do this for words like “Back”, “Next”, and “Cancel”, rather than sentences you know may never get reused. The components make it simple to reuse words across Figma files simply by clicking a button.

So what does managing your copy this way mean? It gives you a bank of your words – a single source of truth. When you open the Ditto Words app, all your copy is there. You can add notes to each piece of copy, and comments, and it tracks every change you make. You can see your iterative progress e.g. if a term changed, when it changed, who changed it, and what it changed for.

There’s a notes field too. I use this to capture the rationale for terminology changes – a game-changer as I don’t have to bank on my unreliable memory.

Here’s an example of how our Content team uses Ditto Words:

Option 2: Figma

I paired with a developer in the hackathon and we got ad hoc help from our UI team. One of the ideas we looked into was how a copy SSOT might work in Figma.

We tried two ways of doing this. The first was a simple idea and we figured it’d work best for buttons – particularly ones we use all the time.

The first idea: componentizing button copy

In Figma, we set up a button component with a CTA, which then pulls from a list of copy e.g. “Cancel”, “Delete”, and “Add documents”. A designer can then switch between this predetermined copy in a dropdown.

For this to work a UX writer would need to write the versions of the copy and first set that up in Figma. Designers and writers must be strict on only using what’s in those lists – or the magic ceases to work. People could also detach a component from the design system or decide not to use it. Then, all the work setting things up is lost. Another downside of doing this is that it only works for highly reusable copy like ‘”Back”. Anything more complex and the manual work to sustain this kind of copy library would be “insane”*.

The second idea: variables as a copy repository

So, we tried another option in Figma using variables. At Dext, we create copy in English and French so right away, we need two sets of copy for almost everything.

To illustrate how this could work we chose one screen from our software. The screen is about integrating Dext with other software – let’s call the other software “Brand 1” and “Brand 2”. The integration process differs for brand 1 and brand 2. This means 2 more versions of copy so we need 4 variants. You can see this illustrated in GIF 2.

Next, we worked out the content hierarchy of the page. We broke down the screen into content components, that could link to our variables. That’s the set-up done. So how does it work when designing?

The idea is that a designer can then use the variables in Figma to swap the copy. The copy “lives” in the variables table, and you can change it in the dropdowns on Figma’s control panels. One important thing to flag is that in this hack, the variables are local to the Figma file you’re working on. Yep, that means you can’t reuse the variables across other Figma files.

So again, there’s quite a lot of set-up work needed to build something that’s not hugely scalable.

Like our first Figma idea, you could use this approach for highly reusable copy e.g. “Back”, “Cancel”. However, you’d need to do this for each Figma file you work on. Is this a better way to work than simply typing into the Figma design? I don’t think so. Ultimately, our explorations were part of a Hackathon, so trying stuff out was the name of the game. If things didn’t work, it wasn’t the end of the world.

Option 3: Frontitude

Frontitude is another tool you build a copy SSOT in. It’s quite like Ditto. You can make changes via the plug-in for Figma or in the Frontitude app and any changes will sync. There is also the option of a developer integration, again at extra cost.

We were already paying for Ditto Words when I learned about Frontitude. That meant I hadn’t had the full opportunity to explore everything Frontitude can do.

I have had the opportunity to try some of the other things Frontitude offers. For example, their UX Writing Assistant and brand guidelines Figma plug-in. I’m still figuring out how this works with other tools we’re using. I can see huge value in how the writing assistant could help me coach others in a governed, hands-off way.

I recommend taking out a trial of Frontitude and seeing what it can do. It’s more visual than Ditto Words, which helps if you’re a visual person like me. If you try it, I’d love to hear what you think.

In summary

Based on what we hacked together in Figma, Ditto or Frontitude are by far the best solutions. You can build a SSOT in Figma, but you can’t scale it so I wouldn’t advise it. I love Figma. I wish I could make this work (reach out if you know how).

For now, my thoughts are that different disciples need different tools. What’s important is that the tools can “talk” to one another – that syncing part is crucial.

If a content team manages the words in Ditto or Frontitude, you have your SSOT. The SSOT syncs with Figma, reducing manual work and keeping copy consistent. It also means the end of trawling through thousands of Figma files in search of the most up-to-date copy. And one very happy content team!

*My colleague (and UI oracle) Alex’s words when I asked how this could scale.

Clare Scott is an experienced content designer, strategist, and writer. Her work spans many industries, from tech to travel. She lives with her dog by the sea in the UK and tweets, sporadically, under her ex-blogging alias @soldiersailor. Connect with Clare on LinkedIn.