Using FigJam to collaborate around copy and language

Same screen, multiple versions

Working on UX copywriting is hard. There are many things that the team has to do to get the copy to communicate the right action to the user. Many resources, articles, and books talk about writing great copy for your product, but for this short recipe, we want to focus on the tools we use to collaborate around it.

Our current toolkit made it hard to collaborate around copy.

Katie and I have been collaborating around copy for a while. Whenever we need to brainstorm about it, we usually start on Figma since we have the latest designs there. For the first work session, this worked well, but things started to get more complicated as designs evolved and more people got involved. We inevitably moved those discussions into documents or Slack threads. This made collaboration difficult for all the relevant stakeholders since we didn’t know the source of truth. When it was time for implementation, no one knew where to find the latest version.

FigJam saved the day in an unexpected way.

When FigJam came around, we started using it immediately since we were always looking to improve our brainstorming sessions. One day, we needed to develop the right copy for an action modal. I copied the screen from Figma into FigJam, and we started adding post-its around it with all the copy suggestions. As the discussion began to pick up, someone on the team double-clicked on a paragraph in the mock itself to explain a new concept. That’s when we realized that the text was editable, but the rest of the frame stayed intact. In other words, anyone could edit the copy, but no one could accidentally move components around. This was huge since the fear of destroying the mockup was removed, and anyone could come in, duplicate the screen, and try a new version.

FigJam quickly became our source of truth for copy brainstorming sessions and final versions. Once the copy was done, the designer could easily copy the screen back to the Figma file, and all the layers and relationships would stay intact.

Recipe

1. The designer builds the screens on Figma. In this step, it is crucial to ensure that all the layers and auto-layout are correctly set up to allow text to wrap nicely, even when more lines or paragraphs are added.
2. Create a FigJam file and copy over the relevant screens that require brainstorming around copy.
3. Share the FigJam file with relevant stakeholders, for example, product managers, content creators, copywriters, etc.
4. Teach everyone how easy it is to duplicate screens in FigJam and encourage them to try updating the text.
5. Once the team decides on the final version, the designer can copy the screen back to Figma and continue working on the flow.

Pro tip: You don’t need to wait for the final version to be ready. It’s so easy to copy screens from Figma to FigJam and back that you can do this process as many times as needed for your project.

Ingredients

1. Figma to design and build your screens.
2. FigJam, a new tool by the Figma team, to brainstorm and collaborate around copy.
3. A way to share the FigJam link with your team. We use Slack, but any communication or documentation tool will work.

Please note that Katie and I are not affiliated with Figma or FigJam. This article aims to share how we have to use the tool to improve our design processes.

Thanks for reading our recipe. Our goal is to share our experiences working together using a short-read format with instructions that you can try on your own — just like a cookbook. We hope you found it helpful!

Katie Le & Nicolas Backal