The UX writer’s guide to Figma

Hello, hello! Whether you found your way here by accident or brilliant SEO, I’m glad you’re here.

Over the past few months, my team and I have spent time gathering feedback from UX writers and content designers from around the industry. Between feature requests and copy recommendations, one theme kept bubbling up: Figma is pretty intimidating for writers. If you can relate, don’t worry—you’re in good company. Many of us, including the writers here at Figma, come from fields beyond design, and never learned to use design tools. With so many bells and whistles, where do you even start?

Right here! I’ll help you wrap your head around Figma’s fundamental concepts, show you how to use it for some classic UX writing tasks, and give you tips for getting to the next level. It’ll take some time to get comfy and build muscle memory, but after working your way through this guide, you’ll feel empowered to start using Figma in your day-to-day.

A few quick, please-don’t-yell-at-me caveats:

1. I made all of this up! While I’m hoping it’s helpful, you should take what works, and leave what doesn’t. At the end of the day, how you use Figma is totally up to you.
2. To keep things simple, I use “UX writer” and “content designer” interchangeably throughout this guide. Please don’t @ me.

Here's a look at what to expect in this guide:

• Reintroduction (Start here if you're new or newish to Figma)
• Building blocks
• Writing toolkit
• Power tools (Start here if you're a Figma pro)

Ready? Rad. Let’s roll!

Reintroduction

My first experience with Figma might sound familiar to you. Someone sent me a Figma link. I opened it and stared blankly at my screen. I clicked around and figured out some of the basics but still felt well out of my depth. It was like I’d started a book on page 50—bits and pieces made sense, but the bigger picture was fuzzy.

So before we dive in, let’s flip back to page one. I want to reintroduce you to Figma through the lens of a UX writer, with the hopes of making this thing more exciting than intimidating.

So…let’s do it. This, friends, is Figma!

Page one

Figma is a tool teams use to design digital experiences, like apps and websites. It works in your browser, so you can just open a new tab and start designing. And it’s multiplayer, so your whole team can design and riff together. You can build interactive prototypes to demonstrate how all your flows fit together. You can create reusable components to keep your designs and content consistent. And developers can jump in to grab the info they need to build the real thing.

Prior to Figma, design tools were offline and single-player. They were expensive, and you needed an even pricier computer to use them. You had to upload your work to Dropbox—just to get feedback from your teammates over email. Overall, the process was tedious, painful, and generally inaccessible; if you weren’t a designer, you couldn’t really participate.

Then Figma moved design to the browser. And just like the switch from Word to Google Docs, that real-time collaboration made things easier and more efficient. But it wasn’t only designers that benefited from this shift to the web. The best part—and the real magic of Figma—was how it invited more people and perspectives into the design process.

That’s where you come in.

Docs → Designs

Flashback time: In the bad old days, writers had to make do with a mix of other apps and a mess of manual tasks. A designer sent you some mocks and asked for edits. You took a bunch of screenshots, pasted them into Google Docs, and did your word magic. Then you sent the doc to the designer who updated their mocks. You replaced all your screenshots with new ones to match the new mocks. Then you sent your doc to the legal team, who had more edits. So you took those edits back to the designer… (This is getting traumatic, so I’ll stop here.)

Without access to design tools, writers were forced to operate in wholly separate spaces outside the traditional boundaries of design, relegating us to sit out on the sidelines. Instead of being seen as critical roles in the design process, UX writers were often considered non-essential. (The same goes for UX researchers, product marketers—anyone who contributes to design, but isn’t a “designer.")

But collaborative tools like Figma allow you to work in parallel with your design team. You can contribute to early design explorations, influence key product decisions, and keep content top-of-mind from the beginning. You can bake content into design reviews, make edits to the actual designs, and mock up your own design solutions. You can provide visual feedback to designers and invite designers into your content process. It can be an equal partnership, based more on skills and perspectives than on titles alone.

Beyond copy, Figma lets you showcase your strategic thinking and design chops. By sharing the same digital space, your team can see all the work that goes into writing well before you write anything. And once you get comfortable with the tool, you can craft your own concepts and lead content-focused design projects.

In short, using Figma can help your teammates see you for the designer you are. It’s not just a tool for “designers,” but for anyone who spends their time designing—like you.

Understanding Figma's building blocks

At first glance, Figma looks complicated—but I’m excited to tell you that it’s more simple than it seems. Everything created in Figma uses the same basic building blocks. Even in massive design files with thousands of moving parts, it’s still just a bunch of simple pieces expertly glued together.

You can learn plenty about these concepts in the Get started section of our help center, but I’ll break them down with some writer-specific context.

Upleveling your layer game

There’s one big difference between text editors like Google Docs and design tools like Figma: depth. In Figma, objects can sit on top, underneath, or inside of each other, which means you have to determine the order of those objects.

To manage the order of things, Figma uses layers. Everything on the canvas is represented by a layer. Shapes? Layers. Lines? Layers. Strings? Yep, layers. (There are a few types of layers, most of which I’ll cover later.)

You’ll find layers in the left sidebar, or what we call the layers panel. Because everything’s a layer, everything you see on the canvas is listed in the layers panel. The order of layers in the panel determines the order of objects on the canvas, with higher layers sitting on top of lower ones.

Since you’ll often have hundreds of layers, you’ll want to organize them—group them together, nest them under each other, etc. To do that, Figma has frames. A frame is a type of layer that acts like a container—you can put other layers inside of it. To create multiple levels of hierarchy, you can (and will frequently) put a frame inside another frame.

That frame-ception is how designers create complex mocks. If you’re designing a webpage, the highest level frame might represent the entire page. Inside that huge frame, you might have a separate frame for the top navigation area. Inside that top-nav frame, you’d have more frames for the site logo, nav links, social icons, etc. You get the idea.

TL;DR: Everything is a layer. The order of layers = the order of objects. You put layers into frames to organize them and create hierarchy.

Reusable components

It’d be exhausting to recreate the wheel each time you start a new project. Instead, you can create common design elements to use over and over again. In Figma, we call those components. They’re usually pieces of UI, like buttons, icons, etc.

To use a component, you just make a copy of it. (We call that copy an instance.) The main versions of components typically live in a separate file called a library, to keep them from being messed with. You can copy components from the library file, or insert them into your file directly.

While you can copy anything in Figma, components are special: The copies can’t be edited. As a result, everyone using that component has an identical copy of it.

Why use components? Speed and consistency. Designers save time by having a big box of Legos (a library) at their fingertips—and because they’re all using identical copies (instances) of the same Legos (components), they can easily stay on the same page.

Fortunately for writers, text is the one part of an instance you can edit. So if you need to change the CTA on an instance of a button component, you can just click into the text layer and make your changes.

TL;DR: Components are reusable elements. To use a component, you create an instance (copy) of it.

Quick review

Those are all of Figma’s basic concepts. Before we move on, let’s review:

• The order of everything is determined by layers
• You organize and add hierarchy to layers using frames
• To use a reusable component, you create an instance (or a copy) of it

If this makes sense, you’re 80% of the way there. For that last 20%, you just need to know how to use these things for your own work.

So… let’s get to work!

Writing toolkit

In this section, you’ll find most of what you need to use Figma as a UX writer—both technical tips for using the tool, and Figma-fied versions of our classic UX writing processes. It’s not an exhaustive list, but it should be enough to help you tackle most of your day-to-day tasks. These aren’t necessarily the best ways to do things, but they’re useful jumping off points to get you started.

Now, Figma isn’t a text editor—if you try to use it like one, you’ll be disappointed. Instead, think about how Figma’s visual, collaborative format could help you achieve what other tools couldn’t. The tips below aren’t necessarily 1:1 recreations of what you’re familiar with, but they achieve many of the same goals while making use of Figma's unique strengths.

To get the most out of these tips:

1. Follow along in the companion file. It’s got visual examples and tutorials for every idea in this section, broken out by each subheading
2. If you’re brand new to Figma, take ~15 minutes to skim through our Explore ideas and Create designs tutorials (or at least have them open for reference)

With that, let’s dive on in!

Creating space

Let’s start at the top, before you do any writing. Because you’ll spend most of your time in your design partners’ files, it’s worth taking time to figure out where you’ll work your magic.

Sometimes you’ll work right alongside your designer, editing strings in their latest flows. But when you need to embrace chaos and make a word-mess, I’d recommend one of two options:

1. Create a separate page in the design file

This one’s great for collaboration—it gives you a space to make a mess, while keeping it accessible to designers. Since it’s in the same file, they can easily pop into your page, provide feedback, and snag your final copy. You can even ask them to drop new screens into your page, so you know what to focus on.

I’d recommend naming your page something obviously work-in-progress (like “Copy scratchpad” or “Ryan’s dumpster fire”) and dragging it down towards the bottom of the pages list, so other teammates know it’s not for reference.

2. Create your own working file

Go this route if you prefer to let loose in private. In a separate file, you can get all those ideas—the good, the bad, the both-good-and-bad—out of your brain and onto Fig-paper. When you’re ready to share your best ideas, just drop a copy of them into your designer’s file—either in a dedicated copy page (like above), or adjacent to the relevant designs.

Better yet, this option makes it easy to keep track of everything in one place. I have a “Design sandbox” file with pages for every project I’m working on. I typically create one page for random writing (the garbage pile in the screenshot below), and individual pages for every project I’m working on. Each page has all my old ideas and final strings, so I can easily reference them when I need to. And every quarter or so, I create a fresh file to work from and archive the old one.

Selecting what you need

When it’s time to write and you want to riff in a separate page or file, you’ll need to select, copy, and paste a bunch of designs. Sometimes that’s easy—you might be able to drag and select everything, or copy one big frame with all the designs. But if you’re trying to select one or a handful of layers, it gets pretty tricky. Fortunately, we have a few tools to make it easier.

1. Deep select

If you’ve ever had to double click 20+ times to select a string, this tip’s for you.

It’s more common than not for a string to be nested within a bunch of frames, many layers deep. By default, Figma assumes you want to select the top-most layer—but you can tell Figma to select the deepest layer instead, using what we call deep select.

To use deep select, just hold Command (macOS) or Control (Windows), and hover over the string you want to select. By holding that key, Figma highlights and lets you select the deepest visible layer under your cursor.

Alternatively, you can right click anywhere on the canvas, and use Select layer to select anything in that general area.

2. Select multiple layers

When you only want to select a few things in a big pile of layers, you can use a keyboard shortcut to select multiple layers.

To use it, just hold Shift, and click each layer you want to copy. By holding Shift, Figma maintains all previously selected layers as you select more.

3. Combine them!

To select multiple, deep layers, you can just combine the two tips above.

Let’s say I want to copy a few text layers from our sharing modal. In this modal, the strings each sit a few layers below the top frame, so I can’t just Shift + click each of them.

First, I use deep select to select one of the strings. As I hover over the next text layer, I use both deep select and multi-select at the same time—either Command + Shift or Control + Shift—and voila!

4. Use the Find tool

You can also use the Find tool to search for a layer and select it. Just hit Command + F (macOS) or Control + F (Windows) to open the tool and start searching. Once you’ve found what you’re looking for, double click the search result to select the layer on the canvas.

To find a string, enter and search for the string itself. To find any other layer, you’ll need to know the name of the layer. Components are typically named what you’d expect them to be—like “Button” for a button, or “Lock” for a lock icon. (If not, file a notarized complaint with your design systems person.)

If you want to filter your search results by layer type—text, frame, component, etc.—click the settings button (to the right of your search term, next to the X) and select the type of layer you’re looking for. In that same settings menu, you can also select:

• Match case. Only show results that match the exact casing of your search.
  • E.g. Find results for “FigJam,” but not “figJam,” “figjam,” etc.
• Whole words. Filter out any partial matches.
  • E.g. Find results for “Any,” but not “anyone,” “anybody,” etc.

Noodling on strategy

Figma makes it much easier for UX writers to demonstrate one of our greatest skills: seeing the bigger picture. Before you start writing, try mapping out a single key message for each part of the project or step of the flow. It requires some extra effort, but will benefit you in two big ways.

First, it forces alignment. It doesn’t really matter if your first stab at this is right or wrong—by giving your team something to react to, they’ll naturally start to align on a general strategy. With that alignment, you can start crafting the actual copy.

Second, it keeps feedback grounded. When you ultimately review your copy with the team, you can point back to that strategy to justify your decisions, and reviewers can use it to evaluate the work. As a result, you’re more likely to get feedback that’s grounded in shared understanding, not personal opinion.

In practice, I put those key messages above or below each screen in the flow. I also tend to write in first person (like I’m Figma), and try to make them as opinionated as possible. They don’t need to match what you would actually put in the product—they just need to capture the intent of the screen. Some examples:

• “We have three plans for you, designer. They cost this much. Pick one.”
• “Hey, developers—try this new feature. Here’s why you should."
• “You don’t have access to this file for this specific reason. Ask this person for access.”

There’s no right way to do this, but I recommend doing some sort of alignment activity before getting too deep into the words. It’ll make your life easier, I promise.

Riffing on copy

Once you have strategy nailed down, you can start riffing—or brain-dumping, word-vomiting, string-spewing… whatever wets your whistle. It’s not quite as simple as it would be in a text editor, but riffing in Figma ultimately makes it easier to work within the context and constraints of the designs.

I typically use one of two methods to quickly generate copy ideas.

1. Duplicate it

While you could write all your ideas in a single text layer (like a bulleted list), that leaves you with one big block of text. Ideally, you want to have a bunch of individual layers that can move around, organize by theme, stack rank, etc.

The easiest method for doing that is to duplicate the same layer over and over. You can do this with an individual string, a whole component, or an entire screen. Here’s how:

• Hold down Option (macOS) or Alt (Windows), and hover over the layer until a second cursor pops up next to your main cursor
• Click and hold the layer
• Drag it to wherever you want to put it
• Let go of your click—if you let go of Option/Alt first, it won’t work

Rinse and repeat for every new idea you’ve got. When you’re done, you can quickly organize all your ideas using Figma’s alignment tools.

2. Figma > FigJam

A fun, semi-hidden trick: You can copy/paste most frames from Figma into FigJam—our delightfully simple whiteboard tool—and still edit the copy within them. Because FigJam’s a bit more flexible and forgiving than Figma, some writers find it easier to use.

FigJam’s sticky notes are perfect for those who prefer more traditional writing tools. Just like the duplication method, write one string per sticky note—that way they’re easier to move around and organize when you’re ready to start trimming things down.

If you prefer to riff by hand, check out the FigJam iPad app. You can use it with a stylus (like an Apple Pencil) to doodle around, and then switch back to your laptop to clean things up.

3. FigJam > Figma

That copy/paste magic from Figma to FigJam? It goes both ways! You can snag a sticky note from FigJam and paste it into Figma for easier writing—riffing, note-taking, annotating… whatever you need to do.

The same goes for FigJam’s stamps, stickers, diagrams, etc. Not everything works exactly how it should, but if it’s in FigJam, you can at least paste it into Figma.

Regardless of which method you use, keep your eyes peeled for those red spell check squiggles. In Figma and FigJam, spell check only flags typos while you’re actively writing—so make sure to take advantage of those suggestions as you go. (I get into a bit more detail on spell check later on, in the Cleaning up chunk of this section.)

Editing strings

To edit copy in actual designs—for riffing or dropping in final strings—just do what we’ve already discussed: Deep-select the text layer, hit Return to highlight the text itself, and start typing.

What about components? Same deal. While they’re designed not to be editable, text is the exception. You can edit a component’s text just like you would any other text—select, Return, and type.

Now, there may be times when a component isn’t configured in a way that makes it easy to add text. Maybe you’re writing a CTA, and the button’s too small for your string. In cases like that, you can do two things:

1. Detach it

You can make a component instance editable by detaching it—or disconnecting it from the main component. To detach, just right click the instance, and select Detach instance.

If you’re working with a button that’s not quite wide enough, you can detach it, and add a bit more space. If an entire screen is a component, you can detach it in order to more easily move content around.

2. Talk to your designer

If you feel strongly that you need more or less space for copy than the component allows for, have that conversation with your designer. It’s possible the component was designed with intentional rigidity (e.g. to enforce a hard character count)—but it might be that it wasn’t built with flexibility in mind, and a longer string is totally fine.

Before that chat, I’d recommend detaching the instance and designing your ideal component. With a concrete example, your designer can better understand the issue.

That’s really all you need to know for day-to-day string editing. Once you’re more comfortable, you can learn to create and use components yourself in the “Power tools” section of this guide.

Cleaning up

When it’s time to wrap things up, you’ll want to make sure your final copy has made it into the final designs. You could go line-by-line—checking every word, updating every string—or you could use a few of Figma’s wordy tools.

1. Spell check

Figma’s spell check feature can help you catch any unfortunate typos—but it works a bit differently than it does in text editors. Instead of seeing red squiggles everywhere, you’ll only see them when you’re actively editing a string.

When you spot a squiggle, right click it to see a few suggestions. In that same menu, you can also change your language preferences, and run text review plugins that can check grammar, reading level, and more. (Magician can even help you break through writer’s block. It’s the future, y’all!)

When it comes to spell-checking other languages, I recommend installing the Figma desktop app. Having the desktop app installed gets you all the languages supported by your OS—on both desktop and web. So even if you only use Figma in a browser, installing the app gets you more languages.

2. Find (and replace!)

You can use the Find tool to look up specific strings or terms that might need updating—like a call-to-action that you changed halfway through the project, or a branded term that could be capitalized incorrectly.

To use the tool, hit Command + F (macOS) or Control + F (Windows) and enter a term, a phrase, or an entire string. From there, you can click each search result to navigate to that layer on the canvas. If you want to update that string, you can double click the search result to start editing.

To update multiple strings at once, click the settings button (to the right of your search term, next to the X) and select Replace. Then enter the replacement string, and click Replace to update the selected search result, or Replace all to update every result.

In that same settings menu, you can also select:

• Match case. Only show results that match the exact casing of your search.
  • E.g. Find results for “FigJam,” but not “figJam,” “figjam,” etc.
• Whole words. Filter out any partial matches.
  • E.g. Find results for “Any,” but not “anyone,” “anybody,” etc.

Handing off

You might also need to provide extra context: multiple string variants, context for an A/B test, localization notes, etc. You could use comments, but I’ve found they aren’t the best for permanently housing critical information.

Instead, add that context directly on the canvas, so it’s always visible. Depending on the stage of the project, you can use one of two methods.

(Quick disclaimer: Designers often provide their own context for handoff, like paddings, color details, etc. If you see notes already on the canvas, chat with your designer about how you should add yours.)

1. Create annotations

An annotation is really just a blob of text that provides additional detail, and can take any form you want it to. It could be bright pink text, a sticky note you copied over from FigJam, etc.—anything that draws attention, and is clearly attached to a specific design element.

The annotation I use (in the “Annotations” page of the companion file) is like a thought bubble with a header, body, and name, and sports an arrow that I can move to whatever side I need it to. And it’s got different statuses, so my design partners know what’s final and what needs their review.

There’s also a handy annotation widget, which you’ll find later in this post. Whatever you use, just make sure it’s clear and obvious.

2. Link away to a dedicated copy page

If you need to provide a ton of context, you can always create a dedicated “copy handoff” page.

Just copy over the designs you want to mark up, and add all your notes. Then go back to the final designs page, and add text links (like “Copy details here”) so your designer and developers can easily find them. (Or use a navigation widget like this one from Emin Sinani.) It also can’t hurt to tag anyone who might need those details in a comment on your page.

3. Prepare the dreaded copy doc

If your developers, marketers, lawyers, etc. don’t use or prefer not to use Figma, you might still have to create a copy doc. (Sigh…)

The easiest way to do that is to use the CopyDoc Text Kit plugin. It lets you export strings from specific frames or pages as a .csv file, which you can then import to Sheets, Excel, etc. It’s not perfect, but it should save you a good chunk of time.

Playing to Figma’s strengths

All of the tips and tricks above will help you in your day-to-day life as a UX writer, but Figma is most powerful when you make it your own. As you get comfortable, explore different ways of doing things—use Figma’s strengths to make your processes easier and more powerful. It might be a bit painful at first, but moving more of your work into Figma gives you a better chance to collaborate with your design team.

Once you’ve practiced and nailed down the basics of Figma, continue on to the next section, where I’ll show you how to use Figma’s most powerful features for UX writing.

Power tools

Figma’s packed with powerful features that make designing much, much easier. From handy keyboard shortcuts to copy components, there’s a few tricks you can use to supercharge your writing.

First, a quick pro tip: All the tools below live within Figma, but the one real-world power tool I recommend is a trackpad. It’s not necessary, but makes it much easier to fly around the canvas. That being said, you can still do all of this with a mouse.

Alright, Figma pros—let’s get into it.

Plugins

Figma’s got a ton of tools, but it can’t do everything. To fill the gap, designers in the community have built a plethora of powerful plugins that can make parts of your process easier. The challenge, at least for me, is knowing what I could even use plugins for. So I’ve compiled a shortlist of the ones I’ve found and love so far.

At time of writing, all of them are free and none require an account. There are super helpful paid plugins out there, but for now I’ll focus on ones that anyone can use.

Reminder: You can hit Shift + I to quickly pull up the resources menu, where you can search for plugins, widgets, and your team’s components.

1. Pattern Hero (by Nitin Gupta)

You can use this nifty tool for copy riffing, as it lets you quickly create a tidy grid of objects or strings. Here’s how to use it:

1. Select the layer or frame you want to duplicate (it can be an entire mock or just a single string)
2. Run the plugin
3. Select how many rows and columns you want, and click “Create pattern”

If you want to take it even further, you can throw auto layout into the mix. It’s a bit more involved, so I’ve outlined how to do it in the companion file.

2. Content Reel (by Microsoft and Eugene Gavriloff)

This plugin offers a bunch of content you can plug right into your designs, from copy to images to icons. If you need a random London address, an Airbnb-esque photo, or an icon of a sad toaster, Content Reel’s got it. (I didn’t confirm the sad toaster bit, no promises.)

Just run the plugin and search for what you need. Once you find some content, select whatever layer you want to add it to. Then just click the content in the plugin to add it to your layer.

You can also use Content Reel to house your own content, making it easy to plug in strings you use all the time. Just click the “Add” tab in the plugin to get started. (Note: Some features require a free account, but most of them don’t.)

3. Wireframer (by Jim Raptis)

When you need some placeholder copy, give this plugin a go. Instead of lorem ipsum, it generates a copy skeleton—a group of objects that simulates lines of content.

It’s particularly useful when riffing on page layout. You can create a few skeletons and easily rearrange them to experiment with different layouts. And unlike text, you don’t have to worry about line breaks, as it simulates them for you.

To keep things grounded, I recommend changing the frame names of each skeleton to describe whatever content they represent—like “Product description” or “Legal disclaimer.”

4. Text Counts (by Todor Panev)

Just like it sounds, this tool tells you how many characters, spaces, and words are in a text layer. Just run the plugin, and select a text layer. Boom.

Widgets

While plugins are just for you, widgets live on the canvas, meaning everyone in the file can see and use them. That makes them particularly powerful for writers, in that you can add writing functionality that Figma doesn’t offer yet.

We just launched widgets in Figma design, so you can expect many more to pop up over the next few months. For this post, I’ll highlight a few widgets that I’ve found particularly useful for my own work. (And just like plugins, you can find widgets by hitting Shift + I.)

1. Voice memo (by Figma)

Have you ever spent 30+ minutes writing a comment to explain a bit of copy? Well, now you can skip the scribing and record a message instead. Just hit record, talk your talk, add a title, and leave it wherever you want your teammates to find it.

We’ve been using this internally for a few months now, and I’ve shifted most of my complex notes and context over to voice memos. It saves a ton of time, and I can more easily communicate the thoughts behind my work. (I’ve also started leaving voice memos for myself, which may or may not be a sign that I’m losing my mind. Stay tuned!)

2. Simple Annotate (by Figma’s Jake Albaugh)

Figmate and developer Jake Albaugh created an annotation widget that’s super lightweight and easy to use. It’s handy for leaving context that needs to stay visible, like content strategy, string variants, localization notes, and more. Just drop in the widget, pick your color and size, and start writing. To jump down a line, just hit Shift + Enter.

This widget should do the trick most of the time—but if you need rich text formatting or more customization, check out my custom annotation component in the companion file, or copy a FigJam sticky into Figma.

3. Table (by Gavin McFarland)

This nifty widget lets you create a flexible, text-friendly table. Start from scratch, or import a CSV or Google Sheets file. You can also export everything to CSV, making it easy to throw together a quick copy doc in your tool of choice.

You’ll find even more functionality by clicking on each row/column header, like sorting data, changing cell sizes, and adding new rows and columns.

4. lil todo (by Jordan Singer**)

lil todo is a lightweight task-tracking widget. It’s refreshingly simple, and perfect for providing team-wide visibility into your work.

During design crit, you can create tasks for yourself to address specific feedback. Or you can use it to map out your writing process, with tasks for “1st draft,” “Review with legal,” and so on. In both cases, your team can look to the widget to know exactly what you’re working on, and what comes next.

I’ve recently started using it as a bookmark of sorts. If I need to run to a meeting or switch to a different project, I’ll add a few tasks to later remind myself where I was and what I need to do next.

5. RAG Status (by EdwardB)

Indicate the status of your work with this traffic light widget. Drop a red light next to your riff zone, or a green one next to the final strings. It’s as simple as that.

(**Jordan Singer is the founder of Diagram—a design company backed by Figma Ventures.)

Keyboard shortcuts

The phrase “keyboard shortcuts” is almost misleading, in that it implies they aren’t totally necessary. The reality is that in feature-packed tools like Figma, they’re very necessary.

It’ll take some time to memorize them, and you’ll need to do a bit of hand-gymnastics to use them all, but I promise it’s worth it. These don’t include the absolute basics, like T for the text tool—just hover your mouse over each tool to see its shortcut.

These are the shortcuts I use most often for UX writing (macOS listed first and Windows listed second; if there's only one command, it's the same for both systems):

Quick actions

⌘ /; Ctrl /

Find any action, setting, and preference in Figma in a snap. Even if you don’t know what you’re looking for, try it—there’s a decent chance you’ll find what you need.

Resource menu

Shift + I

Quickly find components from your team’s libraries, add widgets to the canvas, or run a handy plugin, all from one menu.

Find and replace

⌘ + F; Ctrl + F

Find any layer on the current page, or across the entire file. This works for text and any layers with names, like frames, components, etc.

Scale tool

K to select it, V to reselect the Move tool

Resize anything while maintaining its proportions. It’s especially handy when resizing a frame and everything inside of it. Just select the scale tool, then drag the corner of whatever you want to resize.

Select text/reselect layer text

Return (text) and ⌘ + Return (text layer); Enter (text) and Ctrl + Enter (text layer)

When you have a text layer selected, hit Enter/Return to select the actual text and start typing. To reselect the text layer—the box around the text—just prepend Command (macOS) or Control (Windows) to it.

Deep select

Hold ⌘ + Click; Hold Ctrl + Click

Select the deepest layer under your cursor. (I broke this one down earlier in the post, if you need more context.)

Show outlines

Shift + O

Switch to an outline view, where you can better see every layer on the page.This is particularly helpful for selecting layers, as it enables deep select by default.

Duplicate

Hold ⌥ + Click + Drag or ⌘ D; Hold Alt + Click + Drag or Ctrl D

Create a copy of a layer, with one of two shortcuts. (The D shortcut is most useful when using auto layout—otherwise the duplicate will sit right on top of the original.)

Constrain proportions

Hold Shift + Drag

Resize a single layer while maintaining its shape. Just hold Shift while dragging any side of the layer.

Bring to front/send to back

] (front) and [ (back)

Quickly send a layer to the front or back of the layer stack. (Ex: If you add a string to a mock and it disappears behind other layers, you can easily bring it to the front.)

Ignore frames/groups

Hold Spacebar + Drag

If you want to place a layer on top of a frame without it getting sucked into the frame, use this tool. Just click and hold the layer, hold Spacebar, and drag it to wherever you want it to be.

Paste without formatting

⌘ + Shift + V; Ctrl + Shift + V

Paste copy into a text layer, and match that text layer’s existing font size, weight, etc. This is particularly handy when pasting strings into a designer’s mocks, and maintaining whatever formatting they’ve already set. (And it’s not specific to Figma—you can use this across your OS.)

Last but not least… While they aren’t specific to Figma, you absolutely must know the keyboard shortcuts for text navigation and selection. They may not sound like much, but the time savings add up quickly. There are way too many combinations to list here, so check out the “Keyboard shortcuts” page of the companion file.

Figma’s packed with even more shortcuts you might find useful. To learn more about them, I’ve got a few recommendations:

1. Bookmark this handy page on Shortcuts.design, created by Michel van Heest. It lists every shortcut for Figma and FigJam, for both macOS and Windows. (It’s got shortcuts for a bunch of other tools, too.)
2. Find a shortcut cheat sheet from the Figma community. I really like this one by Karina Popovskaya that’s printable, but there’s a bunch to choose from.
3. If you primarily write in a language other than English:
   1. I recommend installing the Figma desktop app. That way, you can check for typos in any language supported by your OS on both desktop and web.
   2. We just launched some new international keyboard layouts. Just apply to join the beta, and we’ll reach out ASAP.

Auto layout

Explaining auto layout could be its own blog post, so I’ll keep this somewhat high-level. In short, you need to know it—as one of Figma’s most powerful features, it’d be like buying an iPhone and never using the camera.

It’s just like it sounds: It automatically configures the layout of contents in a frame. You apply it directly to a frame by selecting the frame, and clicking the + next to “Auto layout” in the right sidebar.

As a writer, you’ll mostly encounter auto layout as you edit text in your designers’ mocks. In those cases, they should’ve set up auto layout already. (If not, feel free to shame them.) But you can use it for writing, too—specifically for riffing, so all your ideas stay organized as you go. It gets even more magical when you use keyboard shortcuts to make it all happen. Here’s how:

• Create a frame (F), apply auto layout (Shift + A), and switch the direction to ↓
• Create a text layer in the frame (T), and type something into it
• Reselect the text layer itself (⌘ Return or Ctrl Enter)
• Duplicate it (⌘D or Ctrl D)
• Select the new text (Return/Enter), and type something
• Reselect the text layer itself (⌘ Return or Ctrl Enter)
• Duplicate it (⌘D or Ctrl D)
• Rinse and repeat…

Make sure to check out the auto layout section of the companion file, where I break down the auto layout panel and how to use it. To learn the rest of this rad tool, I’d recommend our help center articles, plus two additional videos:

1. This updated auto layout tutorial from Gary Simon at DesignCourse. He explains the basics and some of the new features as he walks you through creating a card component.
2. Auto layout office hours from Figmates Miggi Cardona and Tom Lowry—they focus more on the new features than the basics, but you’ll learn a good bit from these two experts. (Search for either of them on Youtube for a ton of great Figma explainers.)

Local components

Typically, components are published to your whole team, but they don’t have to be. You can actually use components locally to power a single file—because whether it’s published or local, updating the main version of a component also updates every instance (or copy) of it.

There are two ways you can use this to your advantage for UX writing:

1. Managing repetitive designs

Let’s say you’re working on a flow that reuses the exact same design element or screen over and over. Instead of updating one-by-one, you can turn that repetitive element into a local component to manage all instances of it at once.

2. Creating copy components

You can turn individual strings into components too, making it easier to manage copy across your file. Here’s how I typically do it:

• Pick a screen/mock that has some copy, and make copies of all the strings off to the side
• Turn each string into its own component (select the string, then click the diamond in the top toolbar)
• Use instances of each string component to rebuild that original screen/mock

If that wasn’t rad enough already, by keeping all of those string components in their own dedicated page, you’ve basically created a CMS for your file.

It takes some noodling and pre-planning with your designer to set this up, but will ultimately benefit the both of you. If you need to, point them here for a quick rundown. (Designer: It’s worth it, I pinky promise—the most serious of promises!)

Variants + component properties

If you’re on a team with a design system, you can use the more advanced features of components to bake content into that system.

Two of those powerful features are variants and component properties. Variants let you define different versions of a component—like a button with small and large variants. Component properties let you add controls to your component—like a button with an icon that you can turn on/off. (We call this on/off property a boolean property.)

Design systems folk use both of these features to make their systems flexible. Without these, a basic button might require 50+ individual components for every size, color, etc. that button could be. But by using variants and properties, you can create one component that flexes to every possible situation.

As writers, we can use these features to extend the usefulness of the copy components. While you can use a copy component to manage strings in a single file, you can use variants and properties to manage strings across your entire design system.

Here’s how you can use each feature, with quick video examples. Again, check out the companion file for a step-by-step tutorial for each feature.

Variants: Create one copy component with variants for common CTAs, so designers can add buttons or links with your pre-approved copy.

Properties: Add an instance swap property to a button, so designers can swap in any of your copy components when using instances of that button.

If you’re on a team with a more mature design system, component properties are your best bet. Because designers on mature teams mostly use existing components, baking your copy into those components makes it much more likely that they’ll use it. You’ll need to work with your design systems team to make this happen.

If you’re on a team with a less mature or no design system, use a component with variants. Because they more or less stand on their own, designers can quickly search for “CTAs” or “Subject lines” and drop your copy into their designs.

Just the beginning

I hope you found some helpful nuggets throughout these meandering missives—but if this is how you feel right now, I don’t blame you. To wrap things up, I have good news and “bad” news.

Good news: We’re still in the early days of UX writing—an exciting time where we’re all just figuring it out, and anything goes. “Bad” news: We’re also building the plane while it’s flying (which almost certainly violates FAA regulations).

And when I say “we”, I really mean “you.” At the end of the day, you—not Figma—will decide what the future of UX writing looks like. After all, there’s only a handful of us, and thousands of you. Not to mention, many of you are so much better at this than we are.

My hope is to make Figma as useful for UX writers as it is for designers, but we’ll need your help. If you’ve got feedback or ideas, you can find me on Twitter. I can’t wait to learn about all the ways you’re hacking Figma to do your writerly bidding—and while I might not be able to respond to everything, I’ll do my best to make sure your feedback makes its way back to the team.

If this (somehow) didn’t sate your UXW appetite, check out our talk from Config 2022: Working with UX writers in Figma. While it’s primarily aimed at designers, it’s got some useful relationship building tips for you. (And you can maybe-somewhat-passive-aggressively share it with your designers.)

Thanks for your time, writer readers. Talk soon!