Navigating complex prototypes in Figma
When committed to creating detailed prototypes in Figma, things can easily get messy, especially if you have all your frames within the same file. While I was designing a complex web app for managing annual salary reviews, I avoided this problem thanks to user stories.
User story is a key component of agile software development, because agile puts people first, and a user story puts end users at the center of the conversation. This is why user stories had already had their place in the project documentation as I started prototyping.
The structure is pretty simple and straightforward. I created one prototype flow for each low-level user story. Then, to navigate between the stories, I created a landing page with a list of stories that are linked to individual flows. As the number of flows and users increased, a higher level landing page was added. After we headed for development, some edge cases emerged and to address, I dedicated a section to cover these cases.
Here’s a sample layout:
1st (starting) frame: User type or wider category
2nd frame: User story list
3rd frame: User story and link to the related prototype flow
That’s it. I hope you find this article helpful. If you have any suggestions or feedback, feel free to respond. 🖖
*Thanks to Andrea Buran, who first thought me of this method.
*All designs are property of Kolay.
