After weeks of back and forth, you finally OK’ed the final mock-ups for your product or website and can get started on that tedious tracking plan. You open the mock-ups on one side of your screen, your excel sheet on the other, and start describing every button, its location and position, what events it triggers and when - word by word, letter by letter. Dozens of cells of text later, slack messages start flowing from your developer: “What do you mean by page X”, “Can you send me a screenshot of button Y”, “Not really sure what you mean by Z”. And there you go, from PowerPoint presentations to Adobe files, to excel versions and slack channels, trying to clear up miscommunications and get your tracking going.
So why does this happen? More often than not, it’s because not all of your team has access to the same information in the same places. The good news is that platforms like Figma have become the one-stop-shop for product managers: from collaborating on prototyping, writing your tracking plans or monitoring Jira tickets, all of these tasks can now be done in Figma!
So here’s a bit about Figma, and how it can help you with your prototyping and data tracking process!
First Things First: What is Figma? 🤔
If you’ve been living under a rock, let us get you up to speed. Figma is an all-in-one, browser-based and cloud-hosted design tool that makes it easy for more than 4 million UX designers, product managers and developers to collaborate on designs and prototypes.
Think of it as the Google Docs of design.
With granular but intuitive options, you can design virtually any sort of web platform, while thousands of community plugins can help you customize the platform to your exact needs. It’s high fidelity, interactive and incredibly user-friendly. It also has a variety of pricing plans available starting from free, that can accommodate any team size. If you’re new to it, we recommend that you take a quick tutorial, browse the community for design templates, plugins, widgets and much more, and take a look at the dozens of tutorials and resources Figma themselves provide!
Now that we got the basics out of the way, how can Figma help improve your prototyping and tracking process?
1. Collaboration and Alignment 🤝
The number one thing Figma has going over its competitors is making collaboration instantaneous. Project pages are easy to share and access, and you can co-design in real-time with ease. Mistakes can be easily rolled back with version history, and contributors can have assigned view, comment and edit rights, to make sure team members don’t get in each other’s ways. Speaking of comments, your canvas is accessible as a desktop, mobile and web app, meaning you can add comments on the go, from any device. You can even make your designs interactive, so you can use them for UI/UX feedback sessions with your customers!
What this means for you and your team is alignment from day one. Designers can get instant feedback, with no need to share bulky files or keep track of version history. Product managers can communicate clearly on any design element, and can even design iterations and wireframes themselves. Meanwhile, developers can have early input on what is feasible and can be intimately familiar with the design logic and user flow when it comes down to pushing features or implementing data tracking. For any misunderstandings, anyone can easily refer back to the original canvas.
All of the above can easily cut a handful of communication channels and in-between platforms out of your design, making cooperation easier and more fun!
2. Much More Than a Design Platform 🧰
The second reason Figma is so attractive is that it is so much more than a design platform. Take Figma Jam, for example, Figma’s own brainstorming tool (not dissimilar to Miro), where you and your team can sketch ideas, map user flows, processes and systems, and organize walkthroughs with embedded cursor movement and audio tools. All of this allows you to get everyone engaged with the decision process and familiar with Figma, from day one.
Not fully satisfied with the out-of-the-box Figma experience? Use some of the thousands of community plugins to structure your process exactly as you want it. Obviously, there are tons of options for your designer, but there are just as many useful tools for the rest of your team. Early in your process, you may use Wireframe for basic sketches. Following this, you can use Autoflow to easily add user flows to your high fidelity designs, making sure your full user journey is accounted for.
As you go through iterations, you can use Ditto to gain a single source of truth for all your product copy, simplifying the handoff between marketers, designers, product managers and engineers. Similarly, Roller can be used to enforce design consistency across your apps, meaning you can spend less time worrying about nit-picking fonts and more thinking about the user experience.
Once you’re ready to begin user testing, you can use Pendo to collect feedback on your Figma prototypes and schedule research interviews. And once you’re confident you can start building, you can use Gitlab to track and review tasks, and integrations like Builder.io, Anima or Bubble to turn your designs into HTML, CSS, React and more!
And that’s just a taste of what Figma plugins have to offer!
3. Tracking Plans, Fully Integrated With Figma 🔗
Ok, full disclosure, we’re going to shamelessly self-promote for a second and talk about our own plugin, the Qualas Tracking Plan, which allows you to define your tracking, send it to Jira and monitor implementation, all without ever leaving Figma! We built it because we noticed a lot of frustration in product managers having to basically recode the information already present in their Figma canvases in order to communicate their tracking plans to developers, usually via text-heavy excels and back and forth on Slack, email and so on.
You can use this plugin to map all your events directly on your canvas with event labels, so you can always have a clear overview of your tracking and make sure you don’t miss any important interactions on your user journey. Based on these labels, the plugin automatically generates editable tracking plans, with crucial information such as interaction screenshots, comments, tags and implementation status. Following this, you can export your tracking plans to CSV or directly to Jira, and since updates sync with your Figma tracking plan, the plan doubles as a dashboard!
And there you have it, from wireframing, to design, testing and data tracking setup, you’re now ready to coordinate your entire pre-release process in Figma!
PS: If the plugin we mentioned at #3 sounds interesting, download it below, and try it out for free!