Hello! I’m Kristen, one of the writers at Figma,
and today I’m going to talk through the basics of using Figma as a UX writer.
Figma is a tool for designing digital experiences, such as apps or websites.
Since Figma works in the browser, you can just open a new tab to get started.
Figma is multiplayer,
meaning your whole team can design, collaborate, and give feedback simultaneously!
This enables UX writers to contribute to early design explorations
and make sure UI copy is taken into consideration from the start of a project.
With just a few basics, you’ll be up and adding content to design files in no time.
Let’s jump in and explore Figma!
When you first open a file, you’ll notice that Figma is made up of four main areas:
the canvas, toolbar, left sidebar, and right sidebar.
These areas house a lot of different tools
but I’m only going to touch on the ones you need to know to get started.
The Move tool is always selected by default when you open a file.
It lets you select and move objects on the canvas.
I’m going to switch to the Hand tool
so I can pan around the canvas without accidentally selecting anything.
You can switch to the Hand tool in the toolbar
or press and hold the spacebar to temporarily activate it.
My team is working on a pet adoption app and needs my input for the copy on these screens.
I don’t want start jotting ideas down just anywhere,
so I’m going to add a new page and use it as my scratchpad.
Every page has its own canvas where you can take notes
or sketch out ideas in a way that won’t impact other people’s work.
To add a page, click the Plus icon in the left sidebar.
If you don’t see the Pages section, it may be hidden.
Click the chevron to reveal it.
I’ll rename the page so others know that it’s my workspace
and add an emoji to make it stand out.
Perfect!
I’ll come back to this page in a bit, but for now,
let’s flip back to the Wireframes page and take a look at the layers panel.
Figma is all about depth.
Objects can sit on top, behind, next to, or inside other objects.
It can be hard to determine an object’s spacial relationship just by looking at the screen.
That’s where the layers panel comes in.
Anything you add to the canvas is visible in the Layers panel.
The order of the layers determines the order of objects that overlap on the canvas.
Every object type has an icon next to it to identify what type of layer it is.
To learn more about each object type, check out the Help Center article linked in the description.
This design file is made up of hundreds of objects.
If we left these objects ungrouped, it would be almost impossible to
find what we need in the layers panel.
Luckily, we can organize things using Sections and Frames.
A frame acts like a container that holds all the layers you add to it.
Any type of layer can fit inside of a frame with the exception of sections.
Sections help you organize your file even more by allowing you to group related items together.
Looks like my designer has broken the wireframes for this app into different sections.
This is helpful for me as I orientate myself to
this project so I can see what the intended flow of the app will be.
The designer has given each frame a descriptive name.
To find the correct frame in the sidebar, you can click on the frame name on the canvas.
If the frame is inside a section,
the section will always be the parent level layer in the left sidebar.
[Music]
Now that our quick tour of Figma is done, let’s take a closer look at the designs.
Before drafting content, it’s good practice to read through any comments left by your collaborators.
The Comments tool lets you leave notes anywhere on the canvas.
This is super handy for working asynchronously
because you don’t have to wait until your collaborators are in the file to give feedback.
Press C to activate the Comments tool.
You can also tag people in comments by pressing @ and typing their name to notify them directly.
Looks like I have one comment waiting for me.
According to this, the screen design has not been finalized for this part of the app
so if we have any design feedback while we’re working on the copy,
we can share it with the designer.
I’ll leave a reaction so they know we saw their comment.
I don’t want to make any changes to the main page,
so I’m going to copy the contents over to my scratchpad.
Since the screens are in sections, I’ll select all of the sections and use the keyboard shortcut to copy them.
Switching over to my scratchpad, I’ll paste the content.
This doesn’t copy over any comments from the original page
since comments are tied to the page they are added to.
Awesome! Now we have space where we can work on copy ideas.
It’s always good to iterate a couple of times before sending content back for review.
You may not use any of the iterations or your final copy may include bits and pieces from all of them.
We could copy and paste the frames but duplicating is faster.
I’ll select the frame and use the keyboard shortcut to duplicate it twice.
[Music]
Our app includes a quiz future pet parents can take
to get matched with furry friends that fit their lifestyle.
Since the outcome of this quiz influences the rest of the user’s experience in the app,
the call to action must be compelling enough for users to want to take the quiz.
Let’s toss down some ideas and see what sticks!
The designer has already added the text layers and styles
so all we need to do is fill in the copy.
Edit a text layer by double-clicking on it.
If you’re having trouble selecting a text layer, it may be nested within a frame.
By default, Figma assumes you want to select the top layer.
Deep select allows you to select a nested layer.
Hold Command Mac or Control on Windows while hovering over the text.
While holding the key, Figma highlights and lets you select the deepest visible layer under your cursor.
Double click to edit.
As I type, you may notice the button resizes to fit the content inside.
That is because the designer has used auto layout on the frame.
Frames with auto layout applied dynamically grow or shrink as their contents change.
As a writer, this is great for me because I can play around with different copy ideas,
and even see how localized text will look, without having to spend time reformatting content.
If you want to learn more about auto layout,
check out our auto layout playlist linked in the description.
Any typos are flagged by spell check.
In Figma, Spell check only flags errors in the text layer that is active.
You may want to prevent some words, such as company or product names,
from being flagged as errors.
To do that, highlight the word, right-click and select "Add to dictionary".
It looks like the designer added some placeholder button labels.
We need to change these to match our style guide.
Instead of manually locating every text layer
and changing the name,
let’s use find and replace.
I’ll open the Find panel and search for “Continue”,
making sure to only search the current page.
The search results populate as I type.
I’ll switch to the Replace settings and enter “Next” in the Replace with field
and click Replace all.
All “Continue” text strings on this page are replaced with “Next.”
What a time saver!
As we enter the copy,
we can use Comments to add annotations or give feedback.
For this quiz, I think the user experience might be better if we break it up into
separate screens.
Because my team is collaborating in Figma from the start of this project,
I’m comfortable with giving this feedback.
It’s great working tandem with my designer,
rather than forcing the copy to fit an already completed design.
Let’s invite our collaborators in so that we can get some feedback in real time.
I can send them directly to my page by right-clicking on the page
and clicking "Copy link to page".
Looks like they are in the file!
Let’s say hi using cursor chat.
Cursor chat lets you type live, temporary messages that others in the file can see.
This is handy for quick communication.
To enter cursor chat, hit the forward slash key and start typing.
For longer conversations, use audio chat instead.
The first draft looks great!
Now the designer can take the content and feedback
and create the next iteration of screens for our app!
There you have it!
With just a few basic tools,
you can collaborate with your team, add text, and provide feedback.
And this is just the beginning.
If you’re hungry to learn more about using Figma as a UX writer,
check out our UX writer’s best practice guide as well as the rest of our YouTube tutorials.
Happy writing!