QuickFrames for Figma
QuickFrames is not just another user flow kit for Figma. It’s a method to better create a plan for your website project, displaying it in a way so it’s easy for everyone to understand.
1. As few symbols as possible.
The userflow grows only in two directions (right and down) which helps reduce the number of arrows and possible scenarios. No more elements that you never use.
2. Sitemap, userflow, and wireframe in one.
Now you can show it all in one screen. It’ll help you design a better user experience and make sure there are no gaps in navigation around the website. Use annotations to explain every piece of it. Your clients will love it.
3. Focus on content (mobile first).
Those mini wireframes show only the page sections which helps focus on the content. With mobile-first methodology, it’s presented all in one column flow. This will help you confirm with the client that you have all of the individual sections covered in your website plan. You can even skip hi-fi wireframes completely.
4. Map out automations.
A user’s flow doesn’t end on the web, but the experience often extends to the email sequence. You can now plan it all in one screen to make sure the entire conversion funnel is designed.
5. Sample flows to learn from.
Check out some sample sitemaps and userflows of common types of websites. You can learn from them and reuse them for your own projects.
6. Expandable components for faster work.
Components were designed with Auto Layout support to expand in a smart way that lets you work faster without resizing individual elements. It saves you time and looks perfect.
7. Use color codes.
Use colors to highlight certain sections or show different page templates. It helps identify elements more quickly and makes your sitemaps more interesting. It’s all up to you how you use it.
8. So easy, everyone can use it.
It was designed in such a way so that everyone can use it. There is a starter template that you can use and just duplicate the already existing elements to build your own sitemap and userflow. You can also watch video tutorials and learn how to use it step by step.