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

Including tips and tools for UX writers

A couple of keys are suspended  from a row of colorful legos that form a key hook.
Photo by Scott Webb on Unsplash

Our Figma Journey: From Coach House to Co-Creation

A sketch of a coach house behind a main house.
Image source
Google Slide screenshot with a recreation of the Firefox homepage design, with comments calling our requested changes.
To propose copy and design changes to the Firefox homepage, I had to re-create the mock in Google Slides.
  • 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.

Figma, Two Years Later: What We’ve Learned

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

  • 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
Table describing how and when to use Google Docs, Miro, Google Slides, and Figma.
Guidelines for tool usage. How and when to use what will flex according to context. Link to file.

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

  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)

3. Content designers DO need a low-fidelity library

Screenshot of low fidelity components: browser chrome, text treatments, image.
Example components from our low-fidelity library.

4. File structure is important

  • 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 a portion of the Figma Project Template, which includes project name, team members, a summary of the problem and requirements and due date, and a space to capture current state designs.
Screenshot of our Firefox Figma Project Template.
  • 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 which includes problem to be solved, requirements, due date, solution, and links to more information.
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 which includes a space for copy iterations, as well as guidance to include notes on things like 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.
A sticky-note component and call-out notes for Project Decisions, Critical Issues, and Open Questions.
Sticky note and call-out cards in the Firefox Project Template.

Closing Thoughts

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store