My Dear Friends of Figma in Hi everybody i’m chris beatty and i am on figma’s ux writing team and this is us this is our team in a minute you will hear from silly and schmidt and ryan put a ton of thought and work into this presentation but then unfortunately couldn’t be here today but you will feel ryan’s presence.
Emanating out from every nook and cranny of this presentation so when we started to think as a team about what we wanted to say at config we came up with a lot of terrible ideas so the first was a kind of like interactive maybe competitive content design session bad idea um next was this kind of short-lived idea.
Of maybe commandeering figma’s entire product roadmap and we would build dozens of features for content designers and ux writers and we would ship them during this talk and that one ran into some logistical issues right away but then we all loved this idea of maybe doing something for our.
Closest creative partners product designers and so one of the reasons we love that idea so much is that uh ux writing is on the product design team here at figma we spend a ton of time with these amazing folks and we have so much awe and love and empathy for them and.
One of the reasons we feel that way is because there are a lot of cooks in the product design kitchen so there are product managers there are engineers and there are data scientists and researchers and so many more and then about a year and a half ago a new group of cooks showed up in the kitchen so that was us um sometimes we call.
Ourselves content designers sometimes we call ourselves ux writers um but our discipline focuses on the words that you see and hear when you’re signed into a product and we showed up in the product here with a lot of thoughts about things like uh conversational language and cohesive.
Consistent terminology and voice and tone and we also showed up unafraid to ask the really tough questions like does this weird toast that shows up a lot in product need punctuation and actually we are a team divided on this one so if you have any thoughts please help us settle it by finding us.
On twitter letting us know what you think um anyway back to this question of the missing manual that we teased at the start of the talk so you as a product designer are already wrangling so much cross-functional input and feedback and you already have or you likely will soon have a group of word nerds who are.
Showing up in your figma file and wanting to build stuff with you and it’s kind of awesome but also maybe kind of awkward and part of the awkwardness i think is just because there’s not a real manual on how to work with ux writers so we.
Made one not a real manual which would have taken a lot of work um no it’s the 20-minute talk that you’re listening to right now um but we hope that it’s like a fun inspiring start and gives you some new ideas on how to have like a more productive and blissful relationship with the writer in your life so before we get into that though i need to offer.
Uh a disclaimer so the ideas that we’re about to share have worked really well for schmidt and sylvie and ryan and i both at figma and at other companies where we’ve worked but um not every team works the same way and there are no like absolute rules for the way this stuff can work.
Except for the ones we’re about to share today these are absolutely unassailably true in a thousand percent of circumstances and we guarantee that this will work for you and make your life better or we will refund the price of your config admission all right you ready to get started i will hand it over to sylvie and i’ll see.
You again in about 15 minutes hi i’m sylvie a ux writer at figma i’m going to talk a little bit about life before figma and why we’re talking about the opportunities for designers and ux writers to collaborate in figma today first you might be asking why this manual that chris mentioned is even necessary product designer’s own designs.
Ux writer’s own copy and we just got to piece them together right that’s actually how a lot of products and features were built before multiplayer design tools like figma and before people started recognizing ux writing as a design discipline we used to have to work separately because that’s how our tools and often.
Our teams and organizations operated working asynchronously and in silos meant we wasted a lot of time just getting on the same page and copy pasting from one file to another for example at one of my previous roles i couldn’t edit copy directly in a designer’s file so i take screenshots of every frame place them into a.
Spreadsheet and then add all the ui strings into a separate column and then the designs would change based on decisions made in meetings that i wasn’t even in so i’d update my spreadsheet again and again and again until i eventually just left my body.
Entirely not only was it inefficient and consistent and prone to errors it also didn’t allow for true ux collaboration between me and my product designers as you’ll hear later in this talk there’s a lot of strategy design and product sense that ux writers bring to the table through the lens of language.
And information figma has been a game changer for ux writers to ideate and iterate on real copy in real designs shaping the ux and information design of products and experiences and looking beyond the final strings which of course should be clear human and aligned with brand voice ux writers.
Also have a rich toolkit which includes new user experience flows naming and terminology user journey mapping information architecture and much more we have the opportunity to translate those skills and build relationships within a robust design tool like figma but a little help from our expert design partners goes a long way in making that.
Happen so next i’ll kick it over to schmidt so he can share his tips for fostering relationships and collaboration between product designers and ux writers in figma hi yeah um thanks sylvie i’m schmidt i’m a ux writer here i work on fig jam and uh today i want to talk.
About your relationship um but not that one i actually want to talk about your relationship with the ux writers you work with take it from me it is hard for ux writers to figure out how they fit in because oftentimes you’re the only ux writer on the team and maybe the team’s never had a ux writer before and so.
Nobody knows how to work with you they don’t know when to loop you in you’re not invited to meetings it is tough but the good news is there are a few things that designers can do to make the ux writers lives they work with way better to help them be their best selves and fit in and do great work.
And so i want to talk about those things i want to talk about five ways you can make the relationship with ux writer is great cool number one this is really simple uh but i have to say it because it’s so important please.
Give your ux writers edit access to your figma files i’ve included a screenshot of the ui but you know how to do this ux writing is design work and just like it’d be hard for you to do your design work from like the comments of a file it’s hard for writers to do that too sometimes i think people don’t totally believe this or maybe don’t know what ux.
Writing work looks like and so i wanted to give you an example um picture this you’re a ux writer and you’ve been asked to rewrite this dialog box pretty simple it’s a dialog box about moving a meeting and it tells you a bunch of people will be notified about moving the meeting and you’ve been asked.
To rewrite it because user are kind of upset or they didn’t expect so many notifications to get sent out maybe somebody’s like boss’s boss’s boss got a thousand notifications from a calendar and was upset so rewrite it so it’s more clear easy right um yeah no it’s not this one’s not very.
Easy actually because the problem with this dialog box is not the writing the problem is that this one dialog box is doing a little too much work and so if you’re a ux writer and you’re asked to rewrite this your job is actually to suggest something totally different your job is to say hey what if we split this thing up like.
Maybe we should split into three parts so there’s one part where you get to move the meeting another part where you get to send the notifications and then a confirmation of the whole thing each piece of info gets its chance to sort of shine this is what you should do instead of rewriting that you should suggest these.
Changes there’s this misconception that ux writing is about writing clear simple copy and that’s just wrong that’s not what ux writing is if you do your job well as a ux writer then that’s what comes out the other end i guess but ux writing the work of it is actually about making it possible to describe things simply and clearly.
And the way that you make it possible is often by redesigning things by rethinking them that’s ux writing that’s what a ux writer does and it’s very hard to do that all of that stuff uh from the comments so please give your ux writers edit access that’s number one number two um yeah show them the ropes show them.
The basics for a lot of the writers you work with they might not have used figma before working with you and then even if they have they might not be as familiar with it as you are and that can be intimidating it can be intimidating to not know like what questions should i even ask or to feel.
Like i don’t even know how to use this tool that i need to use so walk them through the basics i mean simple stuff like here’s how you move through frames and layers or hold down command and click to jump into a text field start editing it the basics will go a long way so yeah please i help out your ux riders.
With that number three bring them in early um so i can’t tell you how many times the pm or designer has asked me when should i loop you into this project and my answer is usually i wish you’d looped me in like two weeks ago there’s this thing that happens all the.
Time let me show you a timeline here’s a project timeline uh this just pretend this is a project timeline you can see design’s been working on the project forever you can see products been working out forever engineering got called in weeks ago.
And they’re actually kind of close to shipping and suddenly somebody realizes um oh my goodness this thing is confusing and they’re like what if we got a writer in here to help us make it not confusing this happens all the time the writers get looped in the last second with this ask to make the thing not confusing and.
The bad news is that at this point there’s actually not much that a ux writer can do you can’t fix a confusing ux at this point you can’t like you can use language as a band-aid you can say to the users this part’s tricky here are the steps and walk them through it but it’s never going to be a good experience.
If you loop writers in earlier like way earlier like when you start in the project bring in the ux writer the ux writer can help kind of keep you honest and also keep the work honest about what language can and can’t do writers are really good at spotting these little like these little red flags these little places where things are.
Confusing um that you might not have noticed like things like a button that has three verbs on it that’s going to be confusing no matter how you write it that’s going to be confusing and that’s a ux problem really right so you can fix that if you spot it earlier or writers can notice hey the layout we’re using on this page forces us to use some.
Sentence structures that won’t translate to german like we are attuned to these things and we can help you find them and make them better as long as you loop us in early so yeah please do next thing number four find your way of jamming together um so different people work differently right.
Like the way i like to work with a designer is synchronously both of us in figma at the same time working on a thing like literally designing and writing together and chatting back and forth with our little cursor chat i love that other people do not love that other people would rather have some time to.
Alone where they can think about the problem and work through some possible solutions before they share something that’s great too different people work differently so please talk with your writer about how they want to work with you and find something that’s comfy for both of you your goal here is to actually like find.
A way of jamming that’s comfortable and gives you a chance to have these little eureka moments these little light bulb moments where the designer is writing and the writer is designing and you’re kind of pushing and pulling each other’s work and new ideas shake out of that things you wouldn’t have thought of on your own.
Those are often the best ideas and it’s so cool when that happens it’s kind of for me that’s kind of what makes this work rewarding to do it all um so yeah find a way of jamming together that makes you both comfy so you can have those little moments all right and number five make room for the mess um i.
Love a messy figma canvas i think it’s cool i think it means creative work happened in here and stuff really went down and i like that but you might want to contain the mess a little a designer i used to work with would just simply zoom out i mean the canvas is basically infinite so we just zoom out draw a rectangle and be like.
That’s the copy corner and then i would take stuff up to the copy corner i’d do dozens of drafts find a good thing and then bring it back down that’s one way you could do this other people use different pages right a page for writing a page for design and some final page where you bring the whole thing together there are pros and cons to each of these.
But something really cool about this is that sometimes writers will feel like they don’t really have permission to edit the figma file um they’ll feel nervous about it and like they’re not allowed in there and that’s things and something you can do as a designer is just make some space.
For them and then invite them into it make that page for copy and say hey i made a page for copy i duplicated everything in there will you please come in and help me let’s jam on this let’s take a look at it yeah invite them in cool your relationship with ux writers five.
Ways to make it great um first give them edit access second show them the ropes um third i can’t even read this text is a little too small uh fourth find your way of jamming together and fifth make some room for the mess um cool.
Enough about the mushy feelings you know um let’s get down to like brass tacks and the nitty-gritty i want to talk a little bit now about really how should you work together in figma um it can be awkward at first to have this other person in your ficmo files changing stuff breaking things and there are a few things you can do.
That both empower the writer to do their best work and help make sure that they’re comfortable and also not necessarily messing up your stuff so i want to talk about those i got five of these two first try to use a consistent file structure something kind of intuitive um this just.
Makes it easy to find stuff like use a cover image that’s easy to spot and then clearly organize and name your pages um this is great for the writer it’s also great for everyone else they can find their way around please do it number two this is a really neat thing you can do so.
Leaving little statuses throughout the canvas that just tell anybody who’s checking it what stuff is work in progress what stuff is in review what stuff is ready to build and particularly what i’d like you to do here is not just do those for design work but have one for design and one for copy that way engineers can know you.
Know these streams aren’t final yet we shouldn’t send them off for translation um you can do this on the canvas you can also do it in page names so that people can see like oh this page is entirely work in progress this page is entirely done um that’s pretty nice whatever works for you.
Leave little statuses keep them up to date cool next so as you get deeper into a project it can be hard to keep up with what’s changed um especially if it’s like one little string inside a huge flow um that can be hard so something you can do.
Is pick some vibrant color i like pink that’s really gonna stand out and kind of highlight stuff on the canvas that either needs the writer to look at it or recently changed um it’s a good way to just track changes both for you and the writer but also for engineering and marketing anyone who cares about what strings are updated.
Um yeah little content callouts okay this one has a few parts so editing someone else’s designs can be like a bit daunting and for writers and it can be scary because you think you’re gonna break something there are a few things you can do as a designer to kind.
Of put guard rails in place so that your writer can do their work and your work stays nice the first one is just alignment text alignment please use it lots of times people will just line up the text manually with where they’d like it to be and when you do that if a writer makes a change suddenly things.
Are misaligned so text alignment please use it i have two more of these um so the next one is resizing settings on text fields resizing helps you enforce space constraints that you have in mind like having the text expand instead of wrapping and then using this also gives the writer a sense of how much space.
They have to work with which is nice and then this one’s kind of obvious i hope you’re doing it already but please use auto layout please use it it’s wonderful by defining your layout’s behavior ahead of time your writer really has to worry about like writing and then the component will just adjust for the stuff.
They write it’s fantastic it feels like magic please do this and keep in mind that the previous two things i mentioned uh alignment resizing settings those affect auto layouts you kinda need to do all this stuff in tandem okay and this one’s like a secret i don’t know no one people don’t do this.
Enough this is like a secret little superpower use local components this is so neat um uh yeah so if you’re using the same mock over and over in a flow you can actually make that a local component and that way you can make changes to it in just one place and it updates everywhere but also the writer can make little copy changes.
In just one place it’ll update everywhere this is super powerful and very cool your writers will love you and then okay if you want to go wild you can even turn individual strings into components so say there’s like a cta that the writer is testing a few different options but the cta appears everywhere you can make that a component.
And that way the writer can just change that one and see how it kind of cascades down shout out to jason fox on on twitter you can find him uh this is his idea it’s really smart um yeah this is really cool we’ve used this here chris used this for a project where he was thinking about.
Role names editor and viewer and those things show up everywhere so by making them components you can kind of see here’s how it’s going to look in the admin dashboard here’s how it’s going to look in the sharing model yeah this is super powerful underused you should do it cool.
Five ways of working together in sigma uh i think the key here really is just you want to do this stuff both so that your designs i guess are preserved but also that the writer feels like they can just do their work and not really worry about messing anything up put some little guard rails in place and.
Your writer will love you cool that’s what i got um i’m going to hand this off to chris to bring us home chris thanks schmidt um okay so that was almost it we’re almost through to the end of the manual there is just one page remaining and it is however the most important page of.
All and it is blank and it’s blank because this is the page that you’ll fill in with your writer through those chats and coffees and conversations through those like eureka moments and debates and laughter and just a whole lot of nerding out together and when your page is ready we would.
Love to read it please like send us your tips and your advice and your experiences your discoveries your questions um we’ll be rolling out posts about ux writing on figma’s blog starting next month um and we’d love to have your ideas in the mix um so please like keep us posted on how it’s going thank you so much for.
Listening to our manual um and enjoy the rest of config
In this talk, Figma’s UX writing team shares their favorite tips for designers on using Figma to deepen the creative bond with writers …
Figma Official Channel,working,with,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, whiteboard, Figma tutorial, Config, Config 2022, design system, product:none, audience:ux_writers, language:english, format:standard, produced_by:marketing, theme:work_with_type, event:config, series:none, type:other, level:intermediate, primary_feature:none, secondary_feature:,