MRTK Figma Toolkit & Figma Bridge

Jul 2021, Mixed Reality | Microsoft

MRTK Figma Toolkit provides 2D versions of the HoloLens 2 style UI controls available in the MRTK for Unity or MRTK for Unreal. Designers can use this for creating UI layouts and storyboards.

MRTK Figma Bridge for Unity allows designers to bring the layout from Figma Toolkit into Unity. The bridge can import UI layout created with MRTK Figma Toolkit, then instantiates corresponding MRTK prefabs with proper position and size. Figma Bridge helps the design integration process and collaboration between designers and developers.

MRTK Figma Toolkit (Design File)

Figma Bridge for Unity (Unity importer)

Presented at AWE 2021

How Figma Toolkit can help your UX design process for Mixed Reality

Presented at Tokyo HoloLens Meetup

Background

We have been getting frequent questions from our MR community and partners about design tools for Mixed Reality. Since most UX designers who come from the 2D/Mobile/Web industry are not familiar with the game engines such as Unity and Unreal, sketching and designing UI and layout has been a big challenge. Based on this voice from our customers, we decided to create a Figma file that provides HoloLens 2’s UI components.

Role

Collaborated with a designer to create MRTK’s UI components in Figma file
Established the template and library
Teamed with a technical designer who built scripts for importing and parsing Figma JSON file, to design and test Unity interface/workflow.
Finalized the Figma file, published to the Figma community
Created documents and video demos – Figma Toolkit / Figma Bridge for Unity
Presented at AWE 2021 and Tokyo HoloLens Meetup

Outcome

Components

Components with all available visual states in MRTK’s prefab.

Menu & Scene Layout Examples

Created examples to demonstrate how designers can use components to construct simple UI.

Storyboard Examples

Based on our experience in the internal design process, we found that Figma is useful for storyboarding purposes. Using UI components, viewport, and hand models, I created a series of examples for storyboarding scenarios.