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.
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.
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.
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.
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:
- How to keep your Figma files organized for your design team
- A Designer’s Balancing Act: Staying Creative and Organized in Figma
- How to organize your Figma files for your design system
- Team, project, and file organization
