The UX writer’s guide to Figma basics

Slater Katz -

Show of hands — who's super intimidated by design tools?

A few years ago, my hand would have been sky-high. Google Docs were my comfort zone.

But I quickly learned if you want to be an excellent UX writer, ya gotta ditch the Google Doc.

UX writing happens in Figma.

You might be thinking, well I could write in the Google Doc and the product designer could put my copy in the design tool.

I highly discourage that because:

  1. That adds work for others, and you're supposed to be an equal part of the team
  2. That separates you from the design process, and you want to be right in the thick of things to make the biggest impact

Design tools can be uber scary for writers. And I'm here to excitedly tell you Figma is one of the easiest design tools I've learned.

The best part? You don't even need to know how to use the whole thing.

Hold up — what's Figma?

Figma is the tool product teams use to collaboratively design experiences and build products.

It's incredibly collaborative, and multiple people can be working in a Figma file at the same time (just like Google Docs.) Also like Google Docs, people can design at the same time in Figma.

This makes life a lot easier for:

  • Working sessions
  • Feedback sessions
  • Presenting work
  • Including everyone in the design process

Because Figma is collaborative in nature and easy to use, this makes sure everyone is on the same page, which sets UX writers up for success.

Before Figma, product designers would own Sketch files. The Sketch files weren’t online like Figma files are, and product designers would have to email UX writers the Sketch file for them to look and do UX writing. Kinda like Microsoft Office before Google Docs came around.

That not only made version tracking hard, but the lack of collaboration made it difficult for UX writers to get their cursors dirty if the product designer was protective over the file.

But we live in a Figma world now, so no need to worry there.

How do UX writers use Figma?

Despite what it looks like, Figma is actually pretty easy to use. And when you're starting out, UX writers only need to know a few basics to be dangerous.

At the most basic level, UX writers use Figma to:

  • Edit text boxes
  • Make frames
  • Move components
  • Make shapes
  • Resize shapes

As a UX writer, you DO NOT have to worry about visual or UX design. Product designers will take the lead on visual and UX design, and UX writers will take the lead on the UX content.

The key is both product designers and UX writers collaborate to design the user experience.

Think of using Figma like workers on an Amtrak train. To move the train to the destination, multiple workers have different roles within one train. You have the conductor, train attendant, baggage handler, and more. Everyone has a different responsibility, but together, they make an enjoyable experience for riders to get from point A to point B.

What you *actually* need to know

Since you're collaborating with product designers in Figma, at a basic level, you only need to know how to do a few things in Figma.

Let me break it down…

The 3 panels

There are three main panels in Figma:

  1. The top panel
  2. The left-side panel
  3. The right-side panel

The top panel allows you to make elements, like frames and text boxes.

The left-side panel organizes all pages and elements in your Figma file. Think of it like an index.

The right-side panel is your editing suite. It’ll let you change fonts, sizing, colors, and more.

What you need to worry about

You only need to learn how to navigate the tools with a thumbs-up.

Pages

Pages are like different tabs or notebooks. Each page houses a different focus within a project. It could be:

  • A specific flow
  • A review stage
  • A “playground”

Layers

This is just a list of everything in your Figma file. Things like text and images are nested under a frame, which is why you see an indent after each frame.

Frames

A frame is just a fancy canvas. It’s a digital piece of paper that contains your designs. What happens on a frame, stays on a frame.

Shapes

Shapes are what they sound like. I don’t use them often.

Text boxes

A text box is a movable box of text. It works the same as what you’d find in Microsoft or Google tools. Just make a box and type in it.

Images

This is just an image. You can move and resize it just as you would in any other tool.

Grouping

Grouping connects multiple elements together, making the one element. This connection makes them move around as one.

Comments

Comments are one way to collaborate in Figma. Just like in Google Docs, you can comment on specific areas of the file and tag people.

That’s it!

Maybe that made Figma not as mystical. Maybe you’re still confused.

The best (and IMO only) way to really learn Figma is to start playing around with it — it won’t bite!

Grab a free account, and just start making stuff. You’ll feel comfortable in no time.

And if you’re hungry for more Figma know-how, check out UX Writing Hub’s collection of Figma resources for UX writers.

Happy UX writing 🖖