How to do content design / UX writing in Figma
5 practical lessons on working content-first, collaborating with designers and using Figma to its wordiest potential
I recently co-wrote an article about how much we’re loving Figma at Deliveroo. That was a broad overview of how it improved our collaboration and gave content design a better seat at the table. But I wanted to go a bit deeper with this post and describe how to actually do content design using the tool.
Because Figma is web-based, you’re never writing in a silo. Your team can click the design URL to observe you working in real-time, see the notes you leave yourself around key content decisions and adapt their work to yours (and vice versa). This empowers everyone to do better work and brings content firmly into the game.
Designing content in non-collaborative tools is like a football team training independently, then coming together on match day & hoping everything slots together
This post features 5 lessons to help you make the most of this new way of designing. Ready? Let’s go.
1. Use real content to inform UI
Part of your job as a content designer is to champion the content and its purpose. Your role is to ensure that users can complete their tasks as simply and effectively as possible.
With that in mind, as soon as any UI is created in Figma (whether it’s a screen, modal or the tiniest interaction) put some real content in there. Or as close to real content as you can get. You can iterate later…This is especially important if you weren’t involved from the outset because it will help you spot ineffective UI as early as possible. If the UI confuses the message you need to communicate or simply doesn’t have space for the content, then it needs a re-think.
You can design how the product looks and what it communicates hand-in-hand
With many tools this is so difficult. Most of the time, you have to wait until the designer is done with their design file before taking a look. And if that one UI element isn’t working, it could have huge knock-on effects for the entire flow. So when you start designing the content and realize something isn’t working, there’s a ton of work to redo.
When you’re using Figma, a web-based tool, you can design how the product looks and what it communicates hand-in-hand. Content designers don’t have to do their job AFTER the UI has been defined. This way, there are fewer chances for designed content to break the interaction.
This brings me nicely onto lesson number 2. Use Figma to kickstart the content and get the UI spot on every time (nearly).
2. Design content-first by writing out conversations
One way to design content-first is to start everything with a conversation. Put any interaction back into the real-world and imagine you’re completing an action in person, then script it out.
You can do this directly in Figma by dedicating a frame to the conversation or using comments to script out the interaction with your team. This helps content and design stay aligned throughout the process.
Role play user conversations in Figma frames to keep content and design aligned
When I had to redesign the order tickets used by kitchen staff and delivery drivers, my product designer colleague and I scripted out several conversations straight into our Figma file before co-designing. One of us played the role of Deliveroo (the system) and the other, the user. We role-played the conversation to uncover the relevant information needed in order to do the jobs of our chosen role, in the order that seemed most natural.
This helped us do a number of additional things, all before anything was done visually:
1. Identify goals and edge cases
2. Understand flow and hierarchy
3. Use human language, not system language
When you do this, it might not become a perfect blueprint for what you’re about to design, but it’s an incredibly useful point of reference throughout the iteration process.
3. Map the user journey in Figma
Content design requires you understand the entire journey end to end. You need to know what came before and what will come after to ensure you’re helping guide the user and set their expectations.
But sometimes content design isn’t considered until late on in the process, meaning you don’t always get visibility of user journeys or the bigger picture. These are often hidden (not deliberately) in slide decks or sketch files. Figma gives you the visibility and chance to contribute and collaborate from the off so grasp that opportunity with both hands.
Encourage your team to collaborate with Figma to map out those journeys and then map the content needs underneath so everyone can see them. This will nudge any visual exploration to start with the content.
This is a great way of showing content’s impact throughout the entire user journey
It’s a far more iterative process because you’re not restricted geographically like you are with a whiteboard or technically by non-collaborative tools. This is especially handy in a busy, remote working-friendly office like Deliveroo when surfaces have to be cleared after using them.
One particularly handy knock-on effect of this is the increase in exposure of your work as a content designer. When everyone (engineers, product owners, product designers) can see you working in real time in the shared Figma file you’re showing just how much thought goes into putting the right content in the right place at the right time.
As an often misunderstood role, this is a great way of showing off how much you make an impact throughout the entire journey.
4. Use comments to collaborate on and document content decisions
One of our most important tasks is making our product content useful. But often being useful requires us changing how something works or even inventing a new way for something to work. This means close collaboration with an engineer.
As an example, earlier this year I wrote an error message that explained to the user that their printer wasn’t working because their Bluetooth wasn’t turned on.
I wanted to turn an “OK” CTA into a “Turn on Bluetooth” CTA — but could we actually turn on the Bluetooth from this error message?
Loop in the engineer immediately just by tagging them in a comment in the design file
It’s risky to assume anything and I didn’t want to go any further without the answer to the question above. Figma allowed me to loop in the engineer immediately just by tagging them in a comment in the design file. I could ask the question without disrupting their flow and get feedback about what was and wasn’t technically possible to help inform my design decisions.
Yes, this was always doable in Slack or in-person, but Figma keeps that record of your decision in the design file itself. Just by hitting ‘C’ on your keyboard you can see all the comments in the file. So you have a record of all the back and forth your team have had.
If my “Turn on Bluetooth” CTA wasn’t possible and someone was to revisit my work later on and question my decision, they’d have the reason right there without having to consult any other documentation.
Just by hitting ‘C’ on your keyboard you can see all the comments in the file
So when designing content use the comments to loop in those responsible for how the thing actually works and keep a track of your decision making.
5. Empower your team to write better content
Speaking to content designers/UX writers around the world, they’re often outnumbered by product designers within their teams. This means that we can’t always be around to work on everything and prioritisation is a must-have skill.
Encourage anyone working on the file to channel their inner content designer rather than leave placeholders
It’s the responsibility of every content designer to help their team write better content. A lot of us do this through periodic workshops or creating guides. But Figma opens up some new possibilities:
If you have the time…
Build guidance on the type of content you need to accompany UI components into the components themselves. This way designers can create their own instances with some handy advice. As an example, you may want copy within a field placeholder component that says “Use this space to give an example value, not a usability instruction. Prefix it with e.g.”
And if you don’t…
Simply encourage anyone working on the file to channel their inner content designer rather than leave placeholders. This way you don’t have to be the bottleneck. You have access to the project so you can swoop in and finesse it later if you have the time. If there’s anything urgent or requires you specifically, you can be contacted via the comments.
One of the key differences between writers and content designers is that writing is possible solo, whereas designing content is a team sport. Designing content in non-collaborative tools is like a football team all training independently and then coming together on match day, hoping everything just slots together.
Figma gives you the playing field to test, experiment, iterate and design together all the time. Game on.
I hope you found these ideas useful. Figma, in my experience, has given me and my discipline an unprecedented role in the design process and made existing workflows more efficient. That means we’ve been designing better content, faster. I hope that fact alone is enough to inspire you to give these suggestions a go. And on that subject…
Like Figma or the sound of it? Join the Content Design team at Deliveroo!
