DESIGN SYSTEMS BOOTCAMP
2021
While working at Office Media Group / Microsoft, our team, along with the majority of the company, began to migrate from Sketch to Figma as the primary design tool. Given Figma's extensive functionality involving design systems and libraries, I began to take a leadership role in this space, given my passion for system design. To make sure that everyone on our design team utilized the new toolkit and UI pattern libraries in the most effective way, I created this one hour virtual design systems bootcamp to make sure everyone was fully on-board.
The following are slides from my presentation, for which I created countless UI patterns, custom icons, illustrations, and the overall visual theme.
CAPABILITIES USED
Visual Design, Presentation, System Design, Iconography, Illustration
MISCELLANEOUS
Work created at Microsoft
The following are slides from my presentation, for which I created countless UI patterns, custom icons, illustrations, and the overall visual theme.
CAPABILITIES USED
Visual Design, Presentation, System Design, Iconography, Illustration
MISCELLANEOUS
Work created at Microsoft
THE PRESENTATION
|
|
|
|
|
|
This slide linked to two of the primary Figma libraries which I was consistently developing for the product.
|
This slide featured the Stream color ramp which I developed to provide specific guidance for the way brand color could be utilized in product.
|
This slide featured some of the many custom brand themed illustrations I worked on for the Stream platform.
|
|
|
I utilized a basic navigation menu UI pattern to show how the pattern reflows across target breakpoints.
|
I utilized shared library colors to create examples of UI patterns in light, dark and high contrast themes.
|
|
The breakpoint guidelines are guidance library assets which I created for our team to utilize for working on product UI reflow across breakpoints.
|
|
|
I designed and utilized product wireframes to show how the UI would reflow across target breakpoints.
|
|
More examples of product UI reflow across target breakpoints.
|
Creating detailed design guidance with "redlines", before handing the designs off to the engineering teams for implementation, is one of the essential steps in my design process. This slide shows a basic example of this step.
|
|
More examples of library colors applied to the product UI.
|
This exemplifies some of my UI documentation work for keyboarding and accessibility.
|
Basic example of the product UI being integrated into the Figma libraries.
|
|
|
|
Making sure our designers are always styling text using the appropriate font libraries and typography ramps.
|
Making sure our designers are always utilizing the appropriate color libraries.
|
Placing additional guidance on Figma's outlines view to get a better look at the way the UI is structured during the design process.
|
Placing additional guidance on Figma's layout grids.
|
|
|
|
MDL2 icons is Microsoft's primary font-based library of UI iconography, many of which I contributed during my product work.
|
|
|
|
|
|
|
Optimizing the Figma libraries into an intuitive structure has always been my focus while doing system design.
|
|
I designed library sticker sheets for our designers to utilize when contributing to the product libraries.
|
|
As the Design System lead, I always keep a close watch over the Figma library analytics to see how the library components are being utilized across the company.
|
|
To follow-up this bootcamp, I organized a 45 minute virtual workshop, which received over 15 attendees. This allowed my team members to get hands-on with our Figma design systems and libraries under my supervision.
