Posted on JUN 11, 2020
When it comes to collaboration we all have our favorite tools, tips, and routines. Here at AMSD, we're no exception. Having said that, our methods are constantly evolving based on the needs of our clients, team, and design processes. As is in our nature as researchers and UX Designers, we're consistently looking to improve user experiences and our processes in collaboration are no exception.
What adds some dynamism to this reflection is the fact that we work with clients spanning industries as well as technical aptitudes. After all, it can sometimes feel overwhelming to keep up with all of the design tools ourselves, so we can empathize that for our clients who are not full-time designers, the learning curve is especially steep.
In the name of advocating for better user experiences for all, we're excited to share what we've learned when it comes to collaborating with our clients in our go-to design tool, Figma. We hope that these learnings are something you can apply in your client collaborations, in full or in part, and we hope you feel compelled to share your own learnings with us so that we can all become more effective communicators and efficient practitioners.
🗂 Key Learning #1: Organize, Organize, Organize
As Designers, we've all been there. We've become so entrenched in a project that only when we come up for air do we realize what a grand virtual pile of notes and papers we've created. For some of us, organization comes more naturally (and even sparks as much joy as a final amazing design - I see you type A's!) while for others, this reminder is helpful before we kick off each project.
In full transparency, this is always going to be something that we will work to master and is different for each client and project we take on. Having said that, we have found that these organization tips have served us well in our work in Figma so far.
Pages + Flow Labels
It's important to first understand the hierarchy of organization available to you in Figma. Here's a handy illustration to help you visualize it:
Image from Figma help documentation.
Pages, for us, most often act as the home for designs of varying fidelity as well as sub-sections for different user flows. We've actually adopted a new habit of creating three page categories to further organize our files. For each new project, we carve out a section of pages for Final Hi-Fi Designs, Working Designs, and Resources with more as needed based on the complexity of the project at hand.
This distinction between pages helps us share with collaborators which designs are "Dev Ready", which are still in progress as well as create a component library and style guide where everyone can reference themes, styles, and patterns at a glance. If nothing more, this avoids the many emails asking, "Is this the final design?", "Is this ready to go now?". Worse than these emails, we have also run into issues in the past with development teams starting to work on designs that were not yet 'final', leading to stretched timelines and increased budget to be spent unnecessarily. Since we work remotely and collaborate most often asynchronously with our clients, this system answers these questions and avoids these setbacks on our behalf.
Here's a snapshot of one of our design files to help you get a sense of what we mean:
For an additional layer of organization, we also like to add user flow labels throughout the page canvas. This really helps us in creating a mapped experience we can direct our clients through when we're not around to guide them. (While also keeping us sane while trying to find designs across flows).
Pro tip: if the scope of your project includes the creation of user journey maps, be sure to use the same naming conventions you established in that process again with your labels when you move into the design stage. This will offer an additional point of reinforcement for keeping everyone on the same page.
This naming system is especially beneficial for our distributed team who might have multiple designers working on projects simultaneously. To accomplish this, we use simple text frames and make sure that the styling is consistent throughout.
Here's a peek at what that has looked like for us:
💬 Key Learning #2: Encourage Local Collaboration
This one can be tricky. We all have our favorite tools and are deep-rooted habits when it comes to communication. Some collaborators will insist on email, others Slack, others Zoom calls, and others will choose what's closest when that lighting of an idea strikes.
Our recommendation: if you're going to be insistent on influencing one procedural detail - make it uniform feedback. Best of all, the Figma commenting tool is wonderfully simple to learn. Sell it to your clients and teammates that collaborating using this tool will maximize efficiency, transparency, and even give them a chance to peek behind the curtain.
What we like to do to encourage our clients and collaborators to use the commenting function in Figma is create for them a 45-sec tutorial using Loom where we walk them through exactly where to find the required interactions on the platform. This takes the guesswork right out of the equation and even provides them with a reference that they can revisit at any time if need be.
In addition to specifically localized comments, we also love Figma for its functionality which allows us to direct collaborators directly to specific artboards. This is particularly useful when you need specific feedback and when your canvas feels like you're guiding them through Narnia, even with organization and labels.
Here's a snapshot of where to find that functionality:
📦 Key Learning #3: Translate Designs with Confidence
Think you can explain to someone how to make a peanut butter and jelly sandwich on the first try? It's tougher than you think. In our context, this is the perfect example of what can go terribly wrong with an ineffective design handoff. Thankfully, Figma and some key learnings have proved helpful.
We've learned that our 3-step approach to a design hand-off is effective and efficient - here it is:
- Prototyping within Figma
- Styleguide template creation
- Development notes to accompany designs
This trio is our current proven model for effective handoffs with our clients.
First, the Figma prototype. For an in-depth review of the capabilities available to you when prototyping in Figma, see their guide. Depending on the project you are working on this may be more/less useful or necessary in explaining your designs. However, whenever possible, we strongly recommend prototyping your interactions and user flows for clients. This is an excellent way for clients to get a feel for the "real deal". The other benefit is that as you string together a prototype, you are likely to find usability hiccups that would otherwise go unnoticed in a "flat" presentation.
Thankfully, prototyping in Figma is extremely user friendly and can be accomplished efficiently. Don't hesitate to remind your clients that your prototype is "on rails" and will be an imperfect representation of the final product if you're just getting started with prototyping. Even if there are kinks, they will appreciate the effort to show them as close to a final product as possible.
Here's a glimpse at the prototyping functionality within Figma:
The next of our tips for translating designs with confidence is creating a template for a style guide that resonates with both clients and a development team. This guide need not be overly complex, it should simply be a summary of the content, styles, and brand elements that you use throughout your design.
Isolating this summary guide into its own page supports a development handoff by allowing for a quick reference to be made for all stakeholders when reviewing user flows or building new ones. This guide will also prove helpful to designers present and future as it will help define product identity and allow them to jump in with ease to support the project.
In our experience, what we have found to be effective is a guide that includes:
- Typographic Styles
- Buttons and CTAs
- Input Fields
- (and any components used in a design ex. card styles, etc.)
The additional benefit of creating such a summary in Figma is your ability to make each element exportable in varying formats. Since Figma allows you to set export file types on a per-item basis, you can set, for example, all icon assets to be exportable as .svg files. That way, you can invite your development team to download the assets directly from the shared Figma file, rather than creating an external library for them to access. Additionally, as new assets are created throughout the product's life, this library can be easily updated to continue to act as a single source of truth for all styling elements.
Here is a snapshot of a style guide that was created for a recent client project:
The final point we would like to offer for accomplishing a successful translation from design to development is the addition of dev notes throughout your file. These notes can be in various formats, but their purpose is consistent. Their goal is to support the dev team in interpreting your design decisions. It can be tempting to believe that anyone visiting your file will interpret it with clarity and ease of understanding. However, we can become blind to inconsistencies and confusion as designers who have spent many hours in the same file we have become accustomed to navigating. So, our suggestion is to perform a final sweep of your file with fresh eyes before you look to hand it off to a development team.
This pause will help you highlight areas where confusion might surface. When there is possible confusion, drop a dev note on your file. This may be as simple as explaining an interaction, confirming a process flow, or describing various states of design. This sweep of your file to add notes will save you time in the long run as everyone will be informed with the same context.
Pro tip: if there are dev notes you think would be useful for universal implementation, you may consider adding these as an additional section of your style guide.
So, there you have it. Our 3 tips on mastering collaboration in Figma.
Here they are again:
- Stay organized -- use page-level hierarchy as well as labels and consistent language to keep things neat and tidy
- Communicate locally -- advocate for central feedback using Figma's commenting functionality, help your team where there may be a learning curve
- Set yourself up to translate designs to development with confidence -- build prototypes whenever possible, create a style guide and add dev notes when necessary
We hope that you have found these tips helpful and feel encouraged to try them out for yourself. If you have comments or feedback on how these tips may be improved, please share them below to let us know how you work towards effective collaboration with your clients and design teammates. We wish you great success with your project!
Thank you for taking a moment to read this article
We are committed to sharing our learnings so we can have real conversations, learn together as a community, and continue to advocate for a world designed with users in mind.
What to work with us?
We want to help you improve your products and businesses while creating an experience that users actually love. You can have the best of both worlds.
Get in touch so we can talk more!