I started a project after a period of working on others where I didn’t have to build anything from scratch. I was used to adapting to existing systems. But with this new project, I had the opportunity to start from zero. For a while, I worked on it alone, shaping everything myself.

Then, a younger colleague joined the team, and that’s when things took a turn. He looked at my Figma files and seemed surprised. He found the way I had organized everything to be messy.

In that moment, I realized that this was actually a great opportunity to check in on my process and make sure it was up to date with current best practices. It wasn’t just about fixing things for him; it was about improving the way I worked. Fortunately, my company (UX studio) already had some solid foundational guidelines for organizing Figma files, which gave me a good starting point.

But I didn’t want to just stick to the basics. I needed something that worked for both my team and my client, so I took their feedback and began tailoring a system that would work for everyone.

When I started building this system, I realized the need to separate concepts from finalized designs. This wasn’t only about making my files easier to navigate for others—it was about making sure the design’s evolution was clear.

No matter how much I color-coded sections or labeled frames, I still received questions from developers about where to find certain screens.

To solve this, I created two separate files: “Flows” for a work-in-progress flows and “All the Latest Screens” which was a collection of the latest screens and concepts. This allowed the team to clearly distinguish between what was final and what was still in progress. Every time I made updates, I copied them into the right file. It made the whole process smoother and easier to follow for everyone involved.

Another realization I had was that I’d been waiting too long to think in terms of a design system. In the past, I would wait until I had a clearer vision of the final product before diving into creating a UI kit or establishing components. But through this project, I learned that it’s much more effective to start early.

Color coding might seem like a small thing, but it’s a big help when it comes to organizing Figma files. For me, it’s about more than just making the file look good—it helps everyone quickly understand where a specific design stands. I use sections to visually represent the history of a particular flow. For example, I have a section for “Inspirations and Other Inputs,” a “Playground” for early drafts, a “Review” section for things in progress, and an “Approved” section for finalized designs.

This makes it easier for everyone to follow the design process and understand where things are in terms of completion.

It’s easy to forget the reasoning behind design decisions, especially when you’re working on a project over several months. I found that I’d often look at my designs later on and struggle to remember why I made certain choices. That’s why I made it a habit to add detailed annotations to my designs. These notes clarified my thought process, both for myself and my team.

Once I figured out how to better organize my Figma files, I had to make sure the rest of the team understood the new system. I took the time to walk everyone through the structure, explaining why I set things up the way I did. This ensured that everyone was on the same page. Over time, we’ve been able to refine the process based on feedback, but the important thing was that everyone knew how to navigate the files efficiently.