How We’ve Used Figma to Evolve Our Content Design Practice

Including tips and tools for UX writers

Photo by Scott Webb on Unsplash

Firefox UX adopted Figma about two years ago. In this post, I’ll share how our content design team has used the tool to shape collaboration and influence how design gets done.

Our Figma Journey: From Coach House to Co-Creation

Before Figma, the Firefox content design team worked in a separate space from visual and interaction designers. Our own tools — primarily the Google suite of products — were like a copy coach house.

When it came time to collaborate with UX design colleagues, we had to walk to the main design house (like Sketch, for example). We had to ask for help with the fancy coffee machine (Can you update this label for me? Is it too late to make a change to the layout to fit our content needs?). We felt a bit like guests: out of our element.

Image source

This way of working made collaboration more complex. Content and UX design were using different tools, working in silo and simultaneously, to create one experience. If a content designer needed to explore layout changes, we would find ourselves painstakingly recreating mocks in other tools.

To propose copy and design changes to the Firefox homepage, I had to re-create the mock in Google Slides.

Today, thanks to Figma, visual, interaction, and content design can co-create within the same space. This approach better reflects how our disciplines can and should collaborate:

• In early stages, when exploring ideas and shaping the architecture of an experience, content and design work together in a shared tool.
• When it’s time to refine visuals, annotate interactions, or polish copy, our disciplines can branch off in different tools as needed, while staying in sync and on the same page. Then, we come back together to reflect the final visual and copy design in Figma.

“As the design systems team, it is very important to foster and support a culture of collaboration within the Firefox org for designing and making decisions together. Figma is a flexible design tool that has allowed the design systems team to partner more closely with teammates like content design, which ultimately means we build better products.” — Jules Simplicio, Design Systems, Firefox

Figma, Two Years Later: What We’ve Learned

1. Content design still needs other tools to do our jobs well

While Figma gave us the keys to the main design house, we continue to use other tools for copy development. There are a few steps critical to our process that Figma just can’t do.

Tools like Google Docs and Google Slides continue to serve us well for:

• Content reviews with stakeholders like product management, legal, and localization
• Aligning cross-functionally on content direction
• Documenting rationale and context to tee up content recommendations
• Managing comments and feedback

There’s no silver bullet tool for us, and that reflects the diversity of our stakeholders and collaborators, within and outside of UX. For now, we’ve accepted that our discipline will continue to need multiple tools, and we’ve identified which ones are best for which purpose.

Guidelines for tool usage. How and when to use what will flex according to context. Link to file.

Our pull towards tools that focus on the words also isn’t a bad or surprising thing. Focusing on language forces us to focus on understanding, first and foremost.

“Design teams use software like Sketch or XD to show what they’re designing — and those tools are great — but it’s easy to get caught up in the details… there’s no selector for figuring out what you’re working on or why it matters. It’s an open world — a blank slate. It’s a job for words… so before you start writing button labels, working on voice and tone guidelines, use the world’s most understated and effective design tool: a text editor.” Writing is Designing, Metts & Welfle

2. Content designers don’t need to become Figma experts

As a content designer, our focus is still on content: how it’s organized, what it includes, what it says. We’ve learned we don’t need to get into the Figma weeds of interaction or visual design, like creating our own components or variants.

However, we’ve found these basic functions helpful for collaboration:

1. Using a low-fidelity wireframe library (see below)
2. Inserting a component from a library
3. Copying a component
4. Turning things on or off within a complex component (example: hide a button)
5. Editing text within components
6. Creating sticky notes, pulling from a project template file (see below)
7. Exporting frames for sharing
8. Following someone in a file (for presentation and collaboration)
9. Using plugins (example: for finding text within a file)

You can learn all these things in Figma’s public forums. But when we get stuck, we’ve saved ourselves time and frustration by asking a UX design colleague to troubleshoot. We’ve found that designers, especially those who work in design systems, are happy to help. We recommend creating or joining a Figma Slack channel at work to share ideas and ask questions.

3. Content designers DO need a low-fidelity library

Figma made it much easier for UX teams, including content design, to work in high fidelity. But this can be a blessing and a curse. It’s nice to be able to make quick adjustments to a component. However, when we’re in the early stages of a project we need to focus on ideas, strategy, and structure, rather than polish. We found ourselves getting distracted by details, and turning to other tools (like pen and paper) for visual explorations.

To solve for this, we partnered with the design systems team to create a low-fidelity wireframing library. We built this together, tested it, and then rolled it out to the broader UX team. As a result, we now have a tool within Figma that allows us to create mocks quickly and collaboratively. We created our custom library specific to browser design but Figma has many wireframing kits that you can use (like this one).

Our low-fidelity library democratizes the design process in a way that’s especially helpful for us writers: we can co-create with UX design colleagues using the same easy tools. It also helps people understand the part we play in determining things like information architecture. More broadly, working in low-fidelity work prevents stakeholders like engineering from thinking something is ready for hand-off when it’s not.

Example components from our low-fidelity library.

4. File structure is important

As new roommates, when we first started collaborating with UX designers in Figma, there was some awkwardness. We were used to working in separate tools. The Figma design canvas yawned before us. How would we do this? What the fig?

We collaborated with design systems to build a project template file. Of course, having a standard file structure and naming system is good documentation hygiene for any design team, but the template file also supports cross-discipline UX collaboration:

• It puts some structure and process in place for that wide open Figma space, including identifying the end-to-end steps of the design process.
• It gives us a shared set of tools to align on goals, capture thoughts, and track progress.
• It helps concretize and solidify content design’s place and role within that process.

Screenshot of our Firefox Figma Project Template.

The file template is like a kit of parts. You don’t need all the parts for every design project. Certain pieces are particularly helpful for collaboration:

• Status strip punch list to track the design and content review process. You can adjust the pill for each step as you move through the review process.

Our Firefox design status strip. Note, steps may happen in a different order (for example, localization is often earlier in the process).

• Summary card: This asks UX and content designers to summarize the problem and share relevant documentation. As content designers, this helps us context switch more quickly (as we frequently need to do).

Summary card component in the Firefox Project Template.

• Standardized layout: Design files can quickly get out of control, in particular for projects with a lot of exploration and iteration. The file suggests a vertical structure in which you move your explorations to a space below, with final design and copy at the top. This kind of documentation is helpful for cross-functional collaborators like product management and engineering so they can orient themselves to the designs and understand status, like what’s final and what’s still work-in-progress.
• Content frame: This is a space to explore and document copy-specific issues like information architecture, localization, and terminology.

Content card in the Firefox Project Template.

• Sticky notes and call-outs. The comment function in Figma can be tricky to manage. Comments get lost in the sea of design, you can’t search them, and you lose a thread once they are closed. For all those reasons, we tend to prefer sticky notes and call-outs, especially for meatier topics.

Sticky note and call-out cards in the Firefox Project Template.

Closing Thoughts

A tool is only as effective as the collaboration and process surrounding it. Our team is still figuring out the best way to use Figma and scale best practices.

At the end of the day, collaboration is about people. It’s messy and a continual work-in-progress, especially for content design. But, at least we’re in the same design house now, and it’s got good bones for us to continue defining and refining how our discipline does its work.

Thank you to Betsy Mikel, Brent G. Trotter, and Emily Wachowiak for reviewing this post. And thank you to our design systems collaborators, Jules Simplicio and Katie Caldwell, for all the work you do to make getting work done better.