Back to Notes
NxtWave Way of Working in Figma to Improve Collaboration.
NxtWave Way of Working in Figma to Improve Collaboration.
NxtWave Way of Working in Figma to Improve Collaboration.
In this note, I've explained how we've shaped Figma to suit our needs and culture at NxtWave, along with the process we follow while working in Figma. I hope this article guides designers who want to organize their working files to improve clarity and collaboration within and across other teams.
In this note, I've explained how we've shaped Figma to suit our needs and culture at NxtWave, along with the process we follow while working in Figma. I hope this article guides designers who want to organize their working files to improve clarity and collaboration within and across other teams.
In this note, I've explained how we've shaped Figma to suit our needs and culture at NxtWave, along with the process we follow while working in Figma. I hope this article guides designers who want to organize their working files to improve clarity and collaboration within and across other teams.
Before Implementing Our Process:
Before Implementing Our Process:
Before Implementing Our Process:
• There are too many files and the files are too big
• There are too many files and the files are too big
• There are too many files and the files are too big
• No one knows what the latest design is
• No one knows what the latest design is
• No one knows what the latest design is
• Product Managers and Developers are getting lost in a sea of screens.
• Product Managers and Developers are getting lost in a sea of screens.
• Product Managers and Developers are getting lost in a sea of screens.
• There isn’t a proper naming system in place
• There isn’t a proper naming system in place
• There isn’t a proper naming system in place
• Documentation is not Standardized
• Documentation is not Standardized
• Documentation is not Standardized
• The thumbnails we use and have information that aren’t clear enough
• The thumbnails we use and have information that aren’t clear enough
• The thumbnails we use and have information that aren’t clear enough
Situation 1:
Situation 1:
Situation 1:
Let’s say you are trying to find something that you are looking for from the dozens of designs you have made. Unless you have a photographic memory, it is easy to lose track of things after a while when you start working on multiple projects.
Let’s say you are trying to find something that you are looking for from the dozens of designs you have made. Unless you have a photographic memory, it is easy to lose track of things after a while when you start working on multiple projects.
Let’s say you are trying to find something that you are looking for from the dozens of designs you have made. Unless you have a photographic memory, it is easy to lose track of things after a while when you start working on multiple projects.
Situation 2:
Situation 2:
Situation 2:
Let’s say the screens you have designed are in review. Product Manager wants to offer you feedback on the designs you’ve made, but they find it difficult to navigate the file you’ve shared with them.
Let’s say the screens you have designed are in review. Product Manager wants to offer you feedback on the designs you’ve made, but they find it difficult to navigate the file you’ve shared with them.
Let’s say the screens you have designed are in review. Product Manager wants to offer you feedback on the designs you’ve made, but they find it difficult to navigate the file you’ve shared with them.
So they are plenty more of such situations that occur with every design project before implementing our new guidelines and process.
So they are plenty more of such situations that occur with every design project before implementing our new guidelines and process.
So they are plenty more of such situations that occur with every design project before implementing our new guidelines and process.
As we started expanding the design team and continued to improve our design processes, we decided to create a systemic guide and framework to work with Figma to make use of their features better suited for team work and design operations.
As we started expanding the design team and continued to improve our design processes, we decided to create a systemic guide and framework to work with Figma to make use of their features better suited for team work and design operations.
As we started expanding the design team and continued to improve our design processes, we decided to create a systemic guide and framework to work with Figma to make use of their features better suited for team work and design operations.
Our primary goal of the framework is to minimizing task redundancy and miscommunication by implementing a clear, intuitive structure for file organization that all team members can easily follow and maintain.
Our primary goal of the framework is to minimizing task redundancy and miscommunication by implementing a clear, intuitive structure for file organization that all team members can easily follow and maintain.
Our primary goal of the framework is to minimizing task redundancy and miscommunication by implementing a clear, intuitive structure for file organization that all team members can easily follow and maintain.
So now we had a goal, and we knew the challenges that lay ahead, but how did we tackle the problem? To start, We have defined a set of process that reflected our objectives and would guide our ideas.
So now we had a goal, and we knew the challenges that lay ahead, but how did we tackle the problem? To start, We have defined a set of process that reflected our objectives and would guide our ideas.
So now we had a goal, and we knew the challenges that lay ahead, but how did we tackle the problem? To start, We have defined a set of process that reflected our objectives and would guide our ideas.
1. Providing Accessing to Figma
1. Providing Accessing to Figma
1. Providing Accessing to Figma
NxtWave is a Big company of 450+ employees, with 8 designers(UI/UX Team). Designers at NxtWave are divided into multiple POD’s and Each POD will be broken down into several projects that exist within the context of the same POD and again Each project will be broken down into multiple Figma files based on the features and user flows in the project.
NxtWave is a Big company of 450+ employees, with 8 designers(UI/UX Team). Designers at NxtWave are divided into multiple POD’s and Each POD will be broken down into several projects that exist within the context of the same POD and again Each project will be broken down into multiple Figma files based on the features and user flows in the project.
NxtWave is a Big company of 450+ employees, with 8 designers(UI/UX Team). Designers at NxtWave are divided into multiple POD’s and Each POD will be broken down into several projects that exist within the context of the same POD and again Each project will be broken down into multiple Figma files based on the features and user flows in the project.
By default all NxtWave design team have edit access to all the projects and files but giving the view access to a product manager or developer to the figma file will be strickly done by Product Designer of that POD. and also whenever we are adding other team member. we will make sure that the invite is marked as “can view,” so they’re not added as Editors (paid seats).
By default all NxtWave design team have edit access to all the projects and files but giving the view access to a product manager or developer to the figma file will be strickly done by Product Designer of that POD. and also whenever we are adding other team member. we will make sure that the invite is marked as “can view,” so they’re not added as Editors (paid seats).
By default all NxtWave design team have edit access to all the projects and files but giving the view access to a product manager or developer to the figma file will be strickly done by Product Designer of that POD. and also whenever we are adding other team member. we will make sure that the invite is marked as “can view,” so they’re not added as Editors (paid seats).
Here is the detailed information of roles in Figma.
Here is the detailed information of roles in Figma.
Here is the detailed information of roles in Figma.
2. Creating a Project
2. Creating a Project
2. Creating a Project
Projects allow us to group related design files together in a single space, like a folder in a file system. When creating a new project, we will ensure that our team has Edit access. We keep simple and understandable naming convention to improve discoverability.
Projects allow us to group related design files together in a single space, like a folder in a file system. When creating a new project, we will ensure that our team has Edit access. We keep simple and understandable naming convention to improve discoverability.
Projects allow us to group related design files together in a single space, like a folder in a file system. When creating a new project, we will ensure that our team has Edit access. We keep simple and understandable naming convention to improve discoverability.
3. File Organization
3. File Organization
3. File Organization
Any file we create on Figma, We follow organized approach and defined structure that helps every one working in the team and the stakeholders involved are able to find the things they are looking for.
Any file we create on Figma, We follow organized approach and defined structure that helps every one working in the team and the stakeholders involved are able to find the things they are looking for.
Any file we create on Figma, We follow organized approach and defined structure that helps every one working in the team and the stakeholders involved are able to find the things they are looking for.
Thumbnail:
Thumbnail:
Thumbnail:
To help with the browsability of files within Figma, Every file must have a clear understandable thumbnail which helps with evaluation and discovery when trying to find a file.
To help with the browsability of files within Figma, Every file must have a clear understandable thumbnail which helps with evaluation and discovery when trying to find a file.
To help with the browsability of files within Figma, Every file must have a clear understandable thumbnail which helps with evaluation and discovery when trying to find a file.
To make it more ease of doing we have developed a plugin which will allow us to generate the thumbnail and pages required for the entire design process with just a few clicks.
To make it more ease of doing we have developed a plugin which will allow us to generate the thumbnail and pages required for the entire design process with just a few clicks.
To make it more ease of doing we have developed a plugin which will allow us to generate the thumbnail and pages required for the entire design process with just a few clicks.
4. Life Cycle of Figma File
4. Life Cycle of Figma File
4. Life Cycle of Figma File
Design work will transition between the different pages of the file based on the stage of the design process. So in every file our design work evolves from Explore to Finalized.
Design work will transition between the different pages of the file based on the stage of the design process. So in every file our design work evolves from Explore to Finalized.
Design work will transition between the different pages of the file based on the stage of the design process. So in every file our design work evolves from Explore to Finalized.
You can see this sample preview of how each file will look like with the pages
You can see this sample preview of how each file will look like with the pages
You can see this sample preview of how each file will look like with the pages
Let me explain you each page with little more detail with the purpose of the page.
Let me explain you each page with little more detail with the purpose of the page.
Let me explain you each page with little more detail with the purpose of the page.
🖼️ Thumbnail:
🖼️ Thumbnail:
🖼️ Thumbnail:
File thumbnail sits here! - An image to help the team identify the file.
File thumbnail sits here! - An image to help the team identify the file.
File thumbnail sits here! - An image to help the team identify the file.
🔬 Explore:
🔬 Explore:
🔬 Explore:
We will do all the exploration and research part in this page that includes insights, notes, competitor references, Inspiration designs, Mood boards, Heatmaps or screenshots from clarity etc.
We will do all the exploration and research part in this page that includes insights, notes, competitor references, Inspiration designs, Mood boards, Heatmaps or screenshots from clarity etc.
We will do all the exploration and research part in this page that includes insights, notes, competitor references, Inspiration designs, Mood boards, Heatmaps or screenshots from clarity etc.
🚧 WIP - LFD:
🚧 WIP - LFD:
🚧 WIP - LFD:
Once exploration part is completed, we will work on Low-Fidelity Designs in this page.
Once exploration part is completed, we will work on Low-Fidelity Designs in this page.
Once exploration part is completed, we will work on Low-Fidelity Designs in this page.
⚖️ To be Reviewed - LFD:
⚖️ To be Reviewed - LFD:
⚖️ To be Reviewed - LFD:
After creating Low-Fidelity Designs, we will keep those in this page and share it to stakeholders to get it reviewed.
After creating Low-Fidelity Designs, we will keep those in this page and share it to stakeholders to get it reviewed.
After creating Low-Fidelity Designs, we will keep those in this page and share it to stakeholders to get it reviewed.
🚧 WIP - HFD:
🚧 WIP - HFD:
🚧 WIP - HFD:
Once LFD’s are approved then we will start working on HFD’s in this page.
Once LFD’s are approved then we will start working on HFD’s in this page.
Once LFD’s are approved then we will start working on HFD’s in this page.
⚖️ To be Reviewed - HFD:
⚖️ To be Reviewed - HFD:
⚖️ To be Reviewed - HFD:
After creating High-Fidelity Designs and designs are approved from design director, we will keep those designs in this page and share those to stakeholders to get it reviewed.
After creating High-Fidelity Designs and designs are approved from design director, we will keep those designs in this page and share those to stakeholders to get it reviewed.
After creating High-Fidelity Designs and designs are approved from design director, we will keep those designs in this page and share those to stakeholders to get it reviewed.
✅ Finalised Designs:
✅ Finalised Designs:
✅ Finalised Designs:
This is the most organized page in the file. Once designs are moved to finalized, they are essentially at a point where editing is no longer required for this iteration. So this page includes designs that are finalized by the stakeholders and are ready to take forward for development.
This is the most organized page in the file. Once designs are moved to finalized, they are essentially at a point where editing is no longer required for this iteration. So this page includes designs that are finalized by the stakeholders and are ready to take forward for development.
This is the most organized page in the file. Once designs are moved to finalized, they are essentially at a point where editing is no longer required for this iteration. So this page includes designs that are finalized by the stakeholders and are ready to take forward for development.
Finalized page is the single source of truth - Designs in finalized page was constantly evolve as old screens replace new ones. With this there is no "looking at the wrong thing," because there is only one place to look.
Finalized page is the single source of truth - Designs in finalized page was constantly evolve as old screens replace new ones. With this there is no "looking at the wrong thing," because there is only one place to look.
Finalized page is the single source of truth - Designs in finalized page was constantly evolve as old screens replace new ones. With this there is no "looking at the wrong thing," because there is only one place to look.
This way, the entire company can keep track of what the product currently looks like.
This way, the entire company can keep track of what the product currently looks like.
This way, the entire company can keep track of what the product currently looks like.
All the designs must be organized in sections only such that its easy to navigate and also all the finalized designs must be marked as ‘Ready for dev’.
All the designs must be organized in sections only such that its easy to navigate and also all the finalized designs must be marked as ‘Ready for dev’.
All the designs must be organized in sections only such that its easy to navigate and also all the finalized designs must be marked as ‘Ready for dev’.
🗑️ Archive:
🗑️ Archive:
🗑️ Archive:
It’s basically a back-up so we don’t hard destroy any work.
It’s basically a back-up so we don’t hard destroy any work.
It’s basically a back-up so we don’t hard destroy any work.
Once the designs are handoff successfully to developers, then we will move the remaining designs to archive for future reference. We will save all the designs created and all that hard work put into designing to create something simple. Many times later, we’d be wondering “Why did we make decision Y?”. so it’s great to have all of this history saved somewhere.
Once the designs are handoff successfully to developers, then we will move the remaining designs to archive for future reference. We will save all the designs created and all that hard work put into designing to create something simple. Many times later, we’d be wondering “Why did we make decision Y?”. so it’s great to have all of this history saved somewhere.
Once the designs are handoff successfully to developers, then we will move the remaining designs to archive for future reference. We will save all the designs created and all that hard work put into designing to create something simple. Many times later, we’d be wondering “Why did we make decision Y?”. so it’s great to have all of this history saved somewhere.
5. Organising Screens inside each page.
5. Organising Screens inside each page.
5. Organising Screens inside each page.
When organizing screens inside each page, we meticulously arrange frames to ensure a perfect layout. The structured layout makes it easier for team members to locate specific screens, reduces the risk of overlooking important designs, and ensures a consistent approach to organizing design assets.
When organizing screens inside each page, we meticulously arrange frames to ensure a perfect layout. The structured layout makes it easier for team members to locate specific screens, reduces the risk of overlooking important designs, and ensures a consistent approach to organizing design assets.
When organizing screens inside each page, we meticulously arrange frames to ensure a perfect layout. The structured layout makes it easier for team members to locate specific screens, reduces the risk of overlooking important designs, and ensures a consistent approach to organizing design assets.
Here are the rules:
Here are the rules:
Here are the rules:
• Keeping padding of 240px around section.
• Keeping padding of 240px around section.
• Keeping padding of 240px around section.
• Each Frame is spaced 160px horizontally from one another.
• Each Frame is spaced 160px horizontally from one another.
• Each Frame is spaced 160px horizontally from one another.
• Each Frame is spaced 240px vertically from one another.
• Each Frame is spaced 240px vertically from one another.
• Each Frame is spaced 240px vertically from one another.
6. Naming Conventions
6. Naming Conventions
6. Naming Conventions
We will keep our frames and sections names more clearly. Some might say you don’t need to go that far, but Our goal is always to allow a smooth transition between designers, product managers and developers
We will keep our frames and sections names more clearly. Some might say you don’t need to go that far, but Our goal is always to allow a smooth transition between designers, product managers and developers
We will keep our frames and sections names more clearly. Some might say you don’t need to go that far, but Our goal is always to allow a smooth transition between designers, product managers and developers
Screens are grouped by flow and we use a four digit naming convention for screen frames. You’ll notice in the below image that we have a mixture of full numbers in the 00’s and some with a 50. We use 50 variations for when a state change occurs.
Screens are grouped by flow and we use a four digit naming convention for screen frames. You’ll notice in the below image that we have a mixture of full numbers in the 00’s and some with a 50. We use 50 variations for when a state change occurs.
Screens are grouped by flow and we use a four digit naming convention for screen frames. You’ll notice in the below image that we have a mixture of full numbers in the 00’s and some with a 50. We use 50 variations for when a state change occurs.
Whenever we have created different versions of the same design we will keep the frame names as V1 & V2.. for easy understanding for stakeholders.
Whenever we have created different versions of the same design we will keep the frame names as V1 & V2.. for easy understanding for stakeholders.
Whenever we have created different versions of the same design we will keep the frame names as V1 & V2.. for easy understanding for stakeholders.
What about the numbers in between 00 and 50?
What about the numbers in between 00 and 50?
What about the numbers in between 00 and 50?
So what about the numbers in between 00 and 50? Well, we use 10s for when there are micro differences in screens. For example, when we may show content variations across a single screen. An example of this may be for selecting of size and quantity when purchasing a product as shown below table.
So what about the numbers in between 00 and 50? Well, we use 10s for when there are micro differences in screens. For example, when we may show content variations across a single screen. An example of this may be for selecting of size and quantity when purchasing a product as shown below table.
So what about the numbers in between 00 and 50? Well, we use 10s for when there are micro differences in screens. For example, when we may show content variations across a single screen. An example of this may be for selecting of size and quantity when purchasing a product as shown below table.
7. Dev-Ready Checklist
7. Dev-Ready Checklist
7. Dev-Ready Checklist
When moving the designs from To Be Reviewed HFD to the Finalized page. We will go through a checklist to make sure all required points are met.
When moving the designs from To Be Reviewed HFD to the Finalized page. We will go through a checklist to make sure all required points are met.
When moving the designs from To Be Reviewed HFD to the Finalized page. We will go through a checklist to make sure all required points are met.
For example, we won’t handoff designs to developer without verifying the edge cases or without the approval of design director.
For example, we won’t handoff designs to developer without verifying the edge cases or without the approval of design director.
For example, we won’t handoff designs to developer without verifying the edge cases or without the approval of design director.
8. Collaborative Etiquette in Figma
8. Collaborative Etiquette in Figma
8. Collaborative Etiquette in Figma
Figma is a social design tool, which means we need to be respectful of the fact that others are working in the same files.
Figma is a social design tool, which means we need to be respectful of the fact that others are working in the same files.
Figma is a social design tool, which means we need to be respectful of the fact that others are working in the same files.
Add a photo
Add a photo
Add a photo
Having a photo helps build empathy and makes it easier for your coworkers to recognize who made changes.
Having a photo helps build empathy and makes it easier for your coworkers to recognize who made changes.
Having a photo helps build empathy and makes it easier for your coworkers to recognize who made changes.
Introduce yourself
Introduce yourself
Introduce yourself
A simple cursor shake when you enter a document that someone else is editing is an easy way to acknowledge each other
A simple cursor shake when you enter a document that someone else is editing is an easy way to acknowledge each other
A simple cursor shake when you enter a document that someone else is editing is an easy way to acknowledge each other
Leave a comment
Leave a comment
Leave a comment
Have a question or comment about something? Leave a comment, and tag the relevant person. This can be great for working with other designers asynchronously, or getting feedback from your cross-functional team.
Have a question or comment about something? Leave a comment, and tag the relevant person. This can be great for working with other designers asynchronously, or getting feedback from your cross-functional team.
Have a question or comment about something? Leave a comment, and tag the relevant person. This can be great for working with other designers asynchronously, or getting feedback from your cross-functional team.
Conclusion
Conclusion
Conclusion
A big thanks to the entire design team at NxtWave who have been helping us shape this process into something extremely functional, and thoughtful.
A big thanks to the entire design team at NxtWave who have been helping us shape this process into something extremely functional, and thoughtful.
A big thanks to the entire design team at NxtWave who have been helping us shape this process into something extremely functional, and thoughtful.
Our structured approach to working in Figma has significantly improved clarity and collaboration within and across teams at NxtWave. We continue to welcome questions and feedback to further enhance our guidelines.
Thank you for reading and we hope this article serves as a valuable guide for organizing your designs effectively in Figma.
Our structured approach to working in Figma has significantly improved clarity and collaboration within and across teams at NxtWave. We continue to welcome questions and feedback to further enhance our guidelines.
Thank you for reading and we hope this article serves as a valuable guide for organizing your designs effectively in Figma.
Our structured approach to working in Figma has significantly improved clarity and collaboration within and across teams at NxtWave. We continue to welcome questions and feedback to further enhance our guidelines.
Thank you for reading and we hope this article serves as a valuable guide for organizing your designs effectively in Figma.
Want to work together?
Feel free to reach out for collaborations, inquiries, or just to say hello.
Want to work together?
Feel free to reach out for collaborations, inquiries, or just to say hello.
Want to work together?
Feel free to reach out for collaborations, inquiries, or just to say hello.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer, All Rights Reserved © 2024 Guruprakash.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer, All Rights Reserved © 2024 Guruprakash.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer
All Rights Reserved © 2024 Guruprakash.