Every industry or field has its tools, and UX writing is no different. For pretty much as long as the position has existed, we UX writers (or content designers, depending on the company) have practically shouted from the rooftops, “We need access to the design and the context!” And up until a few years ago, that chant fell on deaf ears, mostly because there wasn’t a good, easy way to give writers access to the design.
Then came Figma.
Figma was launched in September 2016 as a collaborative design platform, but it wasn’t until the COVID pandemic a few years later and remote work that it really took off and became the main tool in almost every product designer’s toolkit. And in September 2022, after snatching away significant market share from Adobe, Adobe announced that it was entering an agreement to buy Figma for $20 billion.
Figma has become a no-brainer for designers, but we UX writers are right there behind them, since Figma really puts the design in content design.
I’ll be honest: I have lots of qualms about Figma. As I see it, it still isn’t a perfect tool for UX writers and there are a lot of features I’d like to see to better support UX writing, but between the many different Figma plugins that are available and Figma’s own efforts to support writers, there’s a lot to love about the platform. Read on to learn about why Figma’s a game-changer and get to know some essential Figma basics.
.png)
Why UX writers should use Figma
- Context – Product copy isn’t static content that users read while sipping their morning coffee. When writers have access to the design, they get the full context of the screen and the flow, and they understand what happens before and after each action, rather than just getting a detached instruction, such as, “We need a login error message.”
- Collaboration – The more collaboration there is between designers and writers, the better the outcomes for product teams and users alike—and Figma, which was designed for collaboration, facilitates that. Figma lets designers and writers work side by side and stay in sync about the design and the flow so they can work together better and more efficiently.
- Control – When writers work directly in Figma, there’s a better chance of their copy appearing in the product just as they wrote it. Typos and errors are more likely to happen when writers have to write their copy in another document or platform and then hand it off to developers or designers to copy or hand-type it into the design. Typing directly into the design reduces the chance of broken telephone.
How Figma has made things easier for writers
In the past few months, Figma has added a few new features that writers were asking—no, begging—for:
- Spell check – For a long time, if you accidentally missed a letter when typing text into a text box on Figma, all you could do was hope that it would be caught by an additional review by yourself or another person on your team. Then plugins were created to offer spell-checking, but recently Figma unrolled its own spell checker directly within the product, and as long as it’s enabled (go to Figma icon > Text > Spell check), it will give you that familiar little red squiggle under a word it doesn’t recognize while you’re editing the string. Heads up that the squiggle won’t appear when you click out of the text box, so you still have to keep an eye on it.
- Find and replace – So much of UX writing is about consistency, such as consistent terminology and phrasing. But up until recently, if you and your team decided to change a term in your product (for example, “gifter” instead of “sender”), you would have to go through every screen and change it manually. Recently, Figma added both a “Find” and a “Replace” so you can both search for certain words or strings of text and swap them out all at once.
{{manage-copy-cta="/styleguide/blog-ctas"}}
5 tips for using Figma better as a UX writer
I’m far from being a Figma pro, but here are some Figma basics I’ve picked up along the way from other writers in the field and from Figma resources.
- Learn a few keyboard shortcuts – There are lots of keyboard shortcuts available in Figma. You won’t remember (or need) all of them, but there are a few that are especially helpful for writers:
- Select text: Type “T” and hover over the text on the canvas to find and select the right text box without having to click multiple times to get through the different layers and reach the text
- Bulk select: Click on a frame and press return/enter to select everything within it
- Duplicate a frame: Hold down option/alt while you click and drag the frame you want to duplicate
- Show/hide comments: Press shift + c to show or hide comments
- Leave a comment: Hold down c while you click wherever you want to leave your comment
- Duplicate a page to use it as your sandbox – If you don’t want to work directly on the page that the designer is working on or want to play around before you input your final text, you can right-click on the page’s name in the left panel and select Duplicate page to create your own version of the page that’s still in the main file and that the designers can go into to review and pull from. To avoid confusion, give it a name that clearly indicates that it’s not the actual design file.
- Duplicate a file to your drafts to work on it privately – If you’d rather mess around without anyone else seeing what you’re doing, you can create a new file (Figma icon > File > New design file) or duplicate the existing file to your drafts (open the menu next to the file’s name in the center of the top toolbar > Duplicate to your drafts). Then you can share it when it’s ready to go.
- Use status labels – If you want to indicate to your team where in the process your copy stands, you can place status labels next to the different screens or flows. To create status labels, you or the designer will need to create a main component (the status label) and the different instances (e.g., To do, In progress, In review, Approved). For details, follow Figma’s instructions for creating components and creating instances.
- Don’t forget about FigJam! – Figma can feel overwhelming if you’re not a designer (ahem, me), so that’s where FigJam, its “freestyle, younger sibling,” comes into play. FigJam is like a blank whiteboard for brainstorming—you can draw, add shapes or sticky notes, insert tables, and more. Best of all, you can paste in components from your Figma files and work on them there without any of the other layers and elements (and then copy and paste them back into Figma).
This is just the tip of the iceberg when it comes to Figma basics for UX writers. Once you dive in, you’re bound to discover more features that will make your work easier and collaboration smoother—and have you wondering how you ever managed to work with copy docs, screenshots, and all those other creative UX writing workarounds.
