How to Stay Organized in Figma and Maximize Collaboration

Patterns against a black background

Designers are constantly looking for new ways to organize their work and collaborate with others. Providing a template for your work helps put everyone on the same page. A little organization and clear labeling go a long way.

Benefits of creating a project template

Creates a space for experimentation

An excellent first step when working with a new team is to align on how best to structure the work. The goal is to create a project template where designers, developers, strategists, writers, and others can collaborate in a central space, explore ideas, get feedback and work iteratively.

Provides clear organization so people are free to be creative

Having a structured place to play, where you can easily reference past explorations, allows ideas to flow more freely. Creativity is messy and iterative. In this spirit, it helps to have a clear order of where to find specific work. It is helpful to include annotations for things like key features or for items that need specific feedback. Label your screens clearly, describing how each screen relates to one another.

Improves asynchronous collaboration

More often than not, today’s teams work across time zones. Asynchronous collaboration is more important than ever to keep projects moving forward. Work in iterations where things are clearly labeled. This helps everyone know where things are. Include a link to an overview video walk-thru for a particular round of work. This allows team members to watch on their own time and for everyone to be in sync.

Always look for ways to allow team members to contribute on their own. For example, using auto layout in Figma enables writers to add copy to a design without needing the help of a designer. Especially important for teams that span across time zones. A win-win for both!

When you need to innovate, you need collaboration.

Marissa Mayer

Project organization

Pinning your project template

I usually start by creating a project template file with a prompt to make a duplicate, then pin it to the workspace for easy access. Designers can begin their work by duplicating this template file, renaming it, and inviting others to the project for collaboration and contribution.

Pinning a project template in Figma

Pages within the project template

Always include a cover or title page. This will make scanning projects easier. I like to create a branded cover page including the client logo, project title, and date.

Example project cover page for a template
Cover page example

Within the project, I organize my pages based on the design process, starting with discovery and ending with the developer hand-off. The page structure consists of 5 sections: Empathize, Define, Ideate, Documentation, and Design hand-off. I like to include emojis for easy scannability.

Empathize

  • Creative/tech brief: An overview of the project outlining the goals and needs from both a creative and technical perspective
  • IA: IA & top priority user flows. Where we are, where we want to go
  • Research: Competitive analysis, market and user research

Define

  • Presentation model: An outline of the business goals and user needs. Then listing out specific page patterns and components and their parts. Learn more about presentation modeling
  • Wireframes: Illustration of all the things defined in the presentation model laid out by priority. Working iteratively through rounds of wireframing. This allows others on the team to incorporate any feedback or ask questions.

Ideate

  • Inspiration / Mood boards: Collections of all things inspirational
  • Design: High-fidelity design mocks. Working iteratively through rounds of design. This allows others on the team to incorporate any feedback or ask questions.

Documentation

  • Style guide: A collection of colors, fonts, icons, textures, and patterns to use to create a new design system or to bring into an existing one.

Design Hand-off

  • Final designs: A list of all final designs across all breakpoints. I include annotations around functionality and a video summary so developers can watch it on their own time.
Project template overview

Conclusion

I hope you find this project template overview helpful in creating a space where your teams can experiment and get messy together. With a little organization and clear labeling, collaboration and creativity can thrive. 

Further Reading

Check out articles on how others have approached organizing their work in Figma:

 

Published in

Ana Barcelona

Ana Barcelona
Ana is an Associate Design Director at Lullabot whose creative vision stems from user needs, and a sensitivity toward concept, typography, color, and kinetics. 

Featured Work

Latest Resources

Latest Podcasts

Let's Connect

Want to learn more about working with us or just say hello?

Contact Us