Dear Figma, I love you!!! Thank you for making my design process so seamless, flexible and collaborative! Thank you for providing me with endless hours of fun! And thank you for making it so much easier to collaborate with my team mates and stakeholders early, and often!
Its no exaggeration to say that Figma is the design tool I have been waiting for my entire career. I love that it opens the door for every person in our organization to design. Through Figma we have remotely run Google design sprints, built amazing collaborative projects, updated our design system, and given design visibility to every person in our organization.
But, there is a small drawback with all this freewheeling designing. Everyone - I mean anyone with in my entire organization, from my engineering team to my CEO - now knows how chaotic the design process can be.
For context ...
I work at startups, and I love working at startups. We build quickly, ship often, learn fast, and redesign. Since we work with speed, it's important to us to get as much internal feedback as possible, so early on in every project I get eyes from sales, CS, leadership, and most importantly - engineering. Some engineers love contributing early to designs, some are completely agnostic, and others loath the process - but no matter what spectrum the engineer is on for design tolerance, engineering feedback is invaluable.
The problem is ....
But what happens when you seek input from engineering on a design in any stage, and then something changes? It's a challenge to communicate design changes across an organization that has open access to your files. But it's most frustrating to your engineers, who ultimately need to execute on what ever the final designs are.
A simple solution...
This was an ongoing issue in our organization. Every designer and engineering team more or less had their own process, and no one was really knocking it out of the park. It wasn't until I realized that I needed to think about my engineers (and other stakeholders) as the end users to my design files.
This. was. crucial.
Engineers don't work the way designers do, but more importantly they don't interact with Figma the way designers do. Most engineers don't have the Figma desktop app. They aren't opening Figma to peruse design files with nice covers, which is why for the most part the classic Figma file organization tips aren't helping them. Engineers get your Figma link for the related project, they open that link in their browser, and then they are dropped into whatever state your file is in at the time.
If you are struggling with developer handoff, open one of your files from that lens. Open a file, via the link you've provided your engineers, and answer these questions...
1. Where did your link drop you?
2. Why is this position important? What should you be looking at here?
3. If you zoom out, can you find that position again? What if you navigate to a different page?
4. What do the page names mean to you if you aren't familiar with the project? Which of the 7 Versions (v1... v2.. v3... ) should you be looking at?
These questions might give you a hint of how to provide better documentation for your developers, but the key is documentation. Clearly label your files and frames in a way that your engineers will understand. If you aren't sure what kind of labeling your developers will understand, you should either ask them, or decide for yourself, and clearly tell them.
The most important component of the system is that you have one, and you use it consistently. Below are a few of the things we do to communicate with our engineering teams and other stakeholders.
1. Each feature has its own file
Depending on the type of product you work on, this might look differently, but for us it works best for each feature to live in its own file. Each update gets an iteration within the file. We only create new files for a unique feature if the feature is particularly robust or if we have undergone a significant rebrand.
2. Each page is labeled by contents and status in your files...
Label each page of your file in an intelligent way that gives context to any body looking at the file structure. There are XX pages you can almost always expect to see in my Figma files:
- Thumbnail cover
- Scratch pad
- Research
- Competitors
- Wireframes
- V1 - x
- Vx Final Designs (Ready for Dev)
Each time I iterate on something already in development, I copy the 'final designs' in to a Vx+1 file, and begin to design the next iteration. Once those designs are ready for development, I change the name of the file to the current 'Final Designs', with the version, and date, and mark it ready for dev.
3. Each flow in the file is clearly labeled and described
Page names are great, but once in the page it's important to clearly label each segment of the flow. The frame names are important but not highly visible, so clearly marking sections of the product and calling out specifics to the design or user flow is important.
4. Each prototype starting point is marked
This might seem obvious, but I actually just figured out that my stakeholders are 10million times more likely to view a prototype if I clearly flag where it starts in the design file.
Most importantly... Make it all very, very obvious
The truth is that while these are suggestions that we have implemented that work well for us, almost any system will do - so long as you have a system. What is most important is that you are alleviating confusion between design, product, and engineering.
So you can name your files and covers to kingdom come, but most engineers aren't looking at your beautifully organized Figma dashboard. Engineers open a link to a project in search of designs they can execute on.
So tell your team what your workflow is. Offer a quick Figma tutorial for anyone interested in learning more about your file structure. But most importantly, treat your engineers like an end user of your design process, and consider their workflow and needs when you hand off your work.
Leave clear indications in your files for engineers to follow. They are working so so hard at making your vision come to life. The least you could do is let them know how to find your latest and greatest designs!