This article is the second in a series where I talk about improving collaboration between designers and stakeholders by having a shared language and system for organizing design. For this part, we are going to bring order to the Figma file and the project structures. This will not only make it easier for design stakeholders to find files but also make designers' lives easier. Part 1 can be found here.
Handful Tip:
For starters if you are working on anything even if it is a single file avoid creating that in your drafts. Always create a project for any working Figma file.
We suggest naming your files by story IDs or any other project management tool that you use in your organization for larger projects. This will allow you and anyone in your organization to easily find designs for any user story without asking you all the time since everyone from developers to project managers identifies user stories by story IDs. Then, ideally, you want to keep separate design files for each user story, but in a case where it makes more sense to include multiple user stories in the design file, add all related story IDs to the title, separated by a comma.
The second part of this is the Comment key, which will allow you to document your design files. The annotations range from questions that you want to ask PMs or developers to risks and feasibility concerns that you want to raise.
Now let’s talk about how you should set up each file in your project. Again, our intention here is to have a standard way of setting up the file. For any design file, we recommend having the following pages.
The welcome page has the following key elements:
The design pages identified by version numbers and date stamps include the interface designs themselves. A good way to organize your screen designs is by user flows from start to finish. Don’t shy away from duplicating screens; show every flow completely. This makes it so much easier to understand how every flow works than to have to move around the file trying to figure out the previous step or how we came to this stage. You can use screenshots if you are designing flows in the middle of the journey, but always use them for context.
UPDATE: Now you can also use the new Figma feature for creating sections around user flows to make the navigation even easier.
For handing off files to developers, and doing presentations for internal stakeholders, it is suggested to make a copy of the work file or the page in Figma, clear all the previous versions or experimental designs, and share that with the stakeholders. This will keep a record of your shared file as a checkpoint while keeping unwanted hands out of your work files.
