Sidebar With Interactive Prototype Free Figma Template

Sidebar with Interactive Prototype - Free Figma Template

I designed this sidebar with an interactive prototype to validate a new design process. The product concept is generic, so it has the flexibility to be reused by others in our community.

User Stories

• When using the system I would like to be able to collapse the sidebar to have an optimized viewing area of the screen;
• To know where I am, I'd like to have a distinction in menu item and submenus navigations;
• To help with quick decision making, I would like to know how many notifications or tasks are available to me;
• To support the architecture I would like a search field;
• I would like to quickly access my profile settings;
• When I enter the software, I would like to quickly find my main pages.

Technical requirements

• Needs to adapt well to desktop screen size and interaction design;
• It would be very useful to have a browsable prototype for implementation fidelity.

Other notes

• There is opportunity for feedback and improvement;
• This process is inspired by the teachings of Javier Alaves.

Did you experience any difficulties using this file? Send me feedback so we can improve this file together.

Whats new

July 18, 2022

Correction in the components of the menu items. There was a conflict in the icon color settings that forced the creation of variants for each menu item. This has been resolved. Thank you very much Wanderson Miranda and Bruno Tortelli.

------------------

About Me

I'm Vincius, a Brazilian designer passionate about designing interfaces with consistency to create good experiences for people who use digital products and for colleagues who share projects with me. I love music and I designed this file by listening to Best Classical Music playlist on Spotify.

Follow me

Instagram | LinkedIn

This freebie Sidebar with Interactive Prototype was originally shared by Vincius on this url.

The category for this freebie is Uncategorized. Tools used to create this freebie are Figma and Adobe XD.

Helpful hint: If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Before using it for a commerical project, you can ask Vincius nicely and they will probably allow you to use it.