What I describe here isn’t a rigid process, nor is it a set of rules that I believe should be followed. It is, rather, a way of working that might help you collaborate better with your product design colleagues (or anyone, really).
What does it look like for content and product designers to work together? I’m going to share with you how I—a content designer—work in Figma with my product designers.
Set Boundaries
Who you work with will determine the shared space you get in the design file.
Before I jump into a file for the first time, I’ll ask my design colleagues if I can directly edit their files. If they say no, we decide how best to move forward with our work. By creating these boundaries I’m establishing trust and respect for both of us. This mutual deference to our practice areas allows us to collaborate more effectively and efficiently.
Content by Comments
Figma’s comment feature is the obvious choice if you don’t get edit permissions or if you decide you don’t need anything more elaborate. Dropping comments throughout the file is a quick way to leave notes, questions, decisions, and sometimes even a few text iterations.
All the comments
Everyone works differently and this mode of working suits some but not others.
For myself, the comments have their drawbacks. The space you’re allotted in the comment box is inadequate for extensive content explorations. Comments also tend to float unattached to designs—a problem when frames move around or are deleted.
The linear structure of comments is also prone to misunderstandings because you can’t reply directly to the relevant comment. This means you could have two or even three threads happening in the same comment box, or you create a comment for each thread.
I’ve also run into the problem of disappearing comments.
Well, comments don’t really “disappear” unless they’re deleted; but once they’re marked as resolved or if there are lots of comments in the file, sifting through them becomes a time sink. Comments are also easily missed and ignored. In spite of my own attempts to keep track of them, I occasionally find that there are unanswered comments from 12 or 30 days ago. By that point you don’t really remember what it was all about.
Comments left by a teammate “6 days ago”
To avoid working solely in the comments section, I try to have working sessions with my product designers. Working together—remotely or in person—yields better discussions and decision making. The product designer will document questions and decisions in the file on my behalf. After a point, I noticed that the need to document certain decisions is enough to convince them to let me edit their files.
Directly editing the file is the best outcome you can hope for because you can freely explore and iterate on ideas together. It’s one of the fastest ways to see what works and what doesn’t.
Granted: Editing Permissions
There are two ways I like to work when I have editing privileges. I either create a dedicated “content design” page or work right next to the designer’s frames.
But first things first: I always ask my product designer where I can work. This establishes trust which is crucial in creative work.
Dedicated Content Page
A dedicated content page is exactly what it sounds like: A page in the file just for you, the content designer. You can name it whatever you want. I typically call mine Content Explorations.
A dedicated “content exploration” page in a design file
A dedicated page gives you the space to iterate without interrupting a product designer’s space. It also assuages any concerns product designers may have about someone messing up their designs. You can easily copy and paste frames onto your page and work asynchronously or together while retaining the original design.
This setup is great for mid to long-term projects. It allows you to focus on just the areas you are working on, and to document your thoughts without space limitations. It’s about getting your thoughts and ideas down, and having documentation to help drive content decisions that’ll go into the final designs.
One thing you’ll want to be aware of, though, is changing designs.
When working in a separate page, you won’t immediately see changes your product design partner is making. But it’s also not feasible to copy and paste every visual update onto your page. What I typically do is make a note on my page where the visual structure may have changed. If the changes aren’t drastic, as in, if the architecture of the layout hasn’t changed, I’ll just keep working as is. Once I’m done, I meet with my product designer to discuss, decide, and copy the final content into their designs.
The important thing to remember here is communication. There will be days you and the product designer are working asynchronously but always sync up to align on any changes before handing off your files.
Right Next to Your Product Designer
Another way of working is on the same page as your product designer, right next to their frames.
An example of doing content exploration next to designer’s frame. Sorry about the blur.
I find that this is the easiest—and best—way to collaborate for a number of reasons.
First, I don’t have to worry about copy-pasting frames onto my own page. Since the visual references are right there, I only have to duplicate the text and do my iterations right next to the design itself. This is also great for your design partners because they can see how the content may impact the visuals, and real-time adjustments can be made via quick text swaps.
Second, version control. If I want to iterate on the visuals, too, I can easily do that along with my text iterations. This means I’ll duplicate the whole or part of the frame I’m working on, and create 2 to 3 versions to see how information flows. This mix of doing the content and product design allows my design partners and I to learn both aspects of design as a whole. Not to mention, these sessions have yielded better discussions and design decisions.
Example of conten iterations next to a frame
Third, productive design sessions. Working together usually results in better outcomes than when we work asynchronously. Sometimes we argue and other times it’s nothing but agreements. Either way, it’s fun to learn from each other and grow as designers.
Final Designs and Hand-off
After all the design work comes the hand-off to developers. The designer looks over the visuals and signs off on it. But who actually updates the copy in the design file?
It’s important to always ask and confirm who will update the hand-off file. Early in my role, I often found that not confirming this final step resulted in the final product copy getting missed. As a result, we had unnecessary content revisits during the review stage which left some product managers and developers confused.
By talking to your product designer and deciding who updates the final content, you’re adding a layer of accountability to your design process.
In my projects, the product designers usually take this responsibility because it becomes part of their final check list before handing off the design to developers. There have been times where I added the final copy before hand-off but that’s uncommon. For some product designers, doing this final step keeps them in control of their designs. While I’m comfortable working in Figma, I found that having the designer do the final step maintains a degree of trust and signals a respect for their domain of responsibility.
Figma Template
The cover to my shared template. It is available in the Figma community
To help content designers organize their work in Figma, I created a template that you can use in your own content design work. The components and layouts are similar to the ones I use in my own content design work. I made them after a year of working with different designers and learning how they organize and work in their files. Everyone organizes their files differently but if there’s one thing I’ve learned, it’s that everyone appreciates the organization.
The template is available in the Figma Community. You can adapt it and modify it to how you design. Some of my content designers have adapted this framework and modified it to fit their working styles to great effect.
If you do use the template, let me know how it’s helped you and what kind of modifications you’ve made to fit your specific working style.
-30-
