UX & Design
- UX & Design

The power of pair design

Head shot of TomBy Tom O’Malley

Collaboration in one design file is made possible by using Figma. It’s something which has become more integrated in the way that we now work. Here are 9 things we’ve learnt that might be useful for you when working on your projects together

We’ve been using Figma for a couple of years now and a while ago, we wrote about why we decided to make the jump from Sketch, which spoke about the unification of tools, its powerful collaboration features and price. We previously touched on how we collaborated within Figma files and to be honest, at the time it was more of a novelty factor to have multiple designers, developers or project managers in one file. However, this did begin to shift the way that we worked and it allowed another designer to momentarily dip in and propose a solution. One thing we hadn’t done fully was design side by side on a big project. 

If it’s a small project, two can be a crowd for side by side designing. Bring in a large project with a ton of pages and a tight deadline, two becomes the only way to deliver. So here’s what we learnt when working together, they’re all numbered so you can dip in and out when needed:

  1. Play to each others strengths 
  2. Set your roles
  3. Start with the design system to set the groundwork
  4. Be smart with components
  5. Use Auto layout where possible 
  6. Tackle client/user feedback together
  7. Use version history 
  8. Use the Figma link feature
  9. Nominate a prototyper

1 – Play to each others strengths

Efficiency is key when trying to deliver a big project with a tight deadline, so it’s important to play to each other’s strengths. When we worked on our big project, we had ‘Designer 1’ and ‘Designer 2’. Designer 1  brought more design experience to the table, but Designer 2 had a deep working knowledge of Figma. When it came to more complex prototyping or the more in-depth component creation, Designer 2 took ownership and was able to execute these more efficiently, whilst  Designer 1 would focus on defining further pages or writing scripts for user testing. 

2 – Set your roles

This goes for any task you collaborate on with another person. You need defined roles otherwise you’ll be locking horns from the get-go. Without wanting to set too much hierarchy, Designer 1 was responsible for setting the tone, making the final decisions and leading the design communication to the client. Designer 2 still had a whole lot of project autonomy and ownership, but had to report to Designer 1. This avoided any blurred lines and any rabbit hole conversations around differing opinions.

3 – Start with the design system to set the groundwork

The first thing we do with any new project, whether collaborating or not, is to set up a new file called ‘Design system’. For some brands, we reference existing assets and for others, we re-define them to create new consistent UI components. This usually starts with defining colours, typography, grids and spacing before moving onto the components. 

Creating components together is a great way to get experimental early in the project. What are the form elements going to look like? How about button states? Are we using accordions and how do these interact? These are just some of the conversations we have and flesh out together. Once we’ve agreed and defined all of the components, we make the file available to select from our working visual design file.

4 – Be smart with components

Components really are the building blocks to efficiency when working together on large projects with the need for reusable elements. As we touched on above, these are experimented with and built inside of the design system. There’s a number of ways you can be smart with components to save even more time and here’s just a few, as this could probably be its own blog post:

  • Set different statesFor something like a button, it’s important to reference its hover state, active state and so forth. This can be achieved quite simply in Figma by adding a ‘/’ when naming the component.
  • Create master states. This builds upon the above and allows you to reference an original master component and create spin-offs in a variety of possible combinations.
  • Consider mobile. When creating a component for desktop, think about how this will adapt for mobile as this might impact the way you build the component.
  • Name your layers. This isn’t just for organisational purposes. If you name things like label, description, title, image etc., when you switch components the content will stay the same.
  • Consider interactions. Talk about these together and use smart animate to demo small interactions to developers.
  • Auto layout is your friend. More about this below, but use this when making component variations. It will help keep your designs’ spacing consistent and remove the need to ‘detach instances’.
  • Always think – could this be a component? If you structure this well, you will save each other time, which speeds up the whole design process.
  • Keep talking to your other designer. When creating components make sure you make the other person aware so they can get the most out of that component if it comes with subtle intricacies.

5 – Use Auto layout where possible

Auto layout has been a game-changer for us when building out components. This feature has suddenly given our designs the power to flex with any given content. This is especially useful when creating long-form paragraphs with images and varying copy. Auto layout allows it to adjust without having to go into each text box and shift everything. Auto layout is also super handy for consistent spacing within buttons and added flexibility in things like tables, where rows can be added with ease. 

By being smart with components, you’ll make each other’s lives so much easier when co-designing on a large project. This takes a lot of discipline as it’s easy not to keep things up to date, but persevere and the time saved alone will make it worth it in the long run.   

6 – Tackle client/user feedback together

Feedback! Sometimes it’s not always a blissful experience (client dependent) and in this instance, it’s reassuring to know that you’re not tackling it alone. We tend to handle feedback with clients in a couple of ways, sometimes in tandem. They post comments directly on the Figma file so they can pinpoint the location. This is also recorded in a collaborative spreadsheet for tracking purposes which avoids anything getting lost. 

When pair designing, we split feedback across pages or device types. It’s nice to share the load and ultimately it means we get through the feedback quicker.  If there are challenges with particular feedback points, we work on these together to solve the problem and present the solution back to the client.

7 – Use version history

It can be really easy to forget to do this. Figma automatically timestamps so it’s not the end of the world, but it’s hard to look back to something specific if it has nothing recorded against it. Using version history allows you to save progress at the end of each session and look back to different versions of the design. There might be instances where one of the pair isn’t working on the design that day, so they can go in and make their desired progress and comment about the work done. The other designer then has a clear record of what has changed. 

We only did this intermittently on our big project and the take away learning from this is that going forward it will be set into our workflow. This will allow us to track against versions and rounds of amends, which when working in a pair, makes the progress really clear.

When two of you are working on a large project, there can be a lot of pages. Add prototyping into the mix and these pages end up getting duplicated to represent different points in the interaction. We’ve found that after a while it can be a bit of a nightmare trying to navigate the pages and to our relief, Figma brought in a new feature to combat this. Linking to pages from any other page is a great feature. This allowed us to drop in the full sitemap as a separate page and then link each frame (e.g Home) to the corresponding page in the main working file. This saves designers and developers time when looking to amend a specific page. 

Why is this useful in pair design? Well, it keeps everything organised. One person might be naturally more organised than the other and by linking to pages, it helps you to find things quicker.

9 – Nominate a prototyper

At the beginning of this post, we spoke about setting roles. Prototyping is no different and ideally, either Designer 1 or 2 should own this. Prototyping can get really involved, especially when demoing large interaction flows. We’ve found it’s best if one person owns this process and leads the other to save any confusion.  If you’re familiar with Figma, you’ll have clicked into prototype mode and seen the mass of blue lines connecting pages. This can be a living nightmare for someone who’s looking in from the outside but the person who’s prototyping, it’s usually a satisfying sight of the work undertaken

Final thoughts – Two heads are better than one

Pair design, when organised properly can be an extremely rewarding and collaborative process. At its very core, it encourages conversation between designers and thinking aloud to solve problems together. After a small adjustment period and getting over any feelings of exposure, it can really help to increase efficiency. When working on our large project, we had a lot of pages to design. Once the design system had been established together, we were able to both create pages side by side and review as we go. 

If you’ve got any more tips you’d like to add to ‘The power of pair design’, we’d love to hear from you. Drop us a tweet with your thoughts.

Next Post

Get started

Plan your project