.svg)
Microsoft
A side quest to create new prototyping and UI libraries for the IDNA design team
Team
- Microsoft IDNA design team
Role
Year
Overview
While working at Microsoft I had the opportunity to pursue an area of design I’m really passionate about. My interest in design systems and prototyping led to the creation of shared Figma components and a new prototyping library.
These were side projects I took on outside of my normal product work. It gave me the chance to sharpen my UI skills, learn new prototyping techniques, and contribute to the IDNA design team.
Why create a prototyping library?
My personal goal was to become more efficient with ProtoPie, a tool used for advanced prototyping. When I joined the IDNA design team, there was already growing interest in using the tool. Creating a library felt like a great way to work towards my goal and contribute something that could be used in our day to day product work.
Common components
I began at the component level by importing existing design system components from Figma. Once the designs were in ProtoPie, I replicated the interactions that were already coded in production.
ProtoPie libraries
Some of the components I built in ProtoPie were published as a team library. This allows designers to simply drag and drop common components without rebuilding the interaction each time.
Complex interactions
Keeping design patterns in a central location allowed me to continually refine how the interactions were built the more I learned. These interactions could also be referenced so designers would not have to build from scratch.
Current design system challenge
After the Microsoft Entra rebrand, there was an ongoing effort to move away from the design system previously used for Microsoft identity and security products. A state of flux left new design patterns without a home in Figma and created a challenge for designers trying to track down the latest design assets. I used this opportunity to create a temporary source of truth for the Entra navigation while a long term plan was in the works.
Color, typography, and icons
The existing Entra navigation contained a mix of styles and icons from various sources. I worked with a PM and the design team to decide on a single style library for the component. I also added a page for Entra icons that were not included in any Figma library.
Building the nav component
Once we aligned on styles, I referenced the sizes and interactions coded in production. Components were built in such a way that future iterations could be easily updated and published to the rest of the team.
