My Dear Friends of Figma in 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 yourwhole team can design, collaborate, and give feedback simultaneously! Thisenables 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, andright 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 goingto switch to the Hand tool so I can pan around the canvas without accidentallyselecting anything.
You can switch to the Hand tool in the toolbar or press and holdthe 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 startjotting 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 away 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 tothis 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 ontop, 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 youadd 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 madeup 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 canorganize 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. 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 peoplein 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 workingon 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 commentsare 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 copymay 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. 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.
Deepselect allows you to select a nested layer. Hold Command Mac or Control on Windows while hoveringover the text. While holding the key, Figma highlights and lets you select the deepest visiblelayer 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 reformattingcontent.
If you want to learn more about auto layout, check out our auto layoutplaylist 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 theword, 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 locatingevery text layer and changing the name, let’s use find and replace. I’ll openthe 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 Commentsto 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 comfortablewith giving this feedback. It’s great working tandem with my designer, rather than forcingthe 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-clickingon the page and clicking “Copy link to page”. Looks like they are in the file! Let’s say hiusing 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, hitthe forward slash key and start typing. For longer conversations, use audio chat instead.
The first draft looks great! Nowthe designer can take the content and feedback and create the nextiteration of screens for our app! There you have it! With just a few basictools, you can collaborate with your team, add text, and provide feedback. And thisis just the beginning. If you’re hungry to learn more about using Figma as aUX writer, check out our UX writer’s best practice guide as well as the restof our YouTube tutorials.
Happy writing!
Figma is free to use. Sign up here: https://bit.ly/3msp0OV Figma is a great tool for UX writers to learn but sometimes it’s hard to …
Figma Official Channel,figma,for,writers,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, product:figma_design, audience:ux_writers, language:english, format:standard, produced_by:product_education, theme:basics, event:none, series:figma_tutorial, type:feature_tutorial, level:beginner, primary_feature:text, secondary_feature:none,