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.
- Figma Community Page
- Figma Toolkit on Microsoft Docs
- Figma Unity Bridge on Microsoft Docs
- Open MRTK Figma Toolkit
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
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.
- 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
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.
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.
Intro Pages on Mixed Reality Docs
Created pages with video content for MRTK Figma Toolkit, where designers and creators can discover and learn about the tool.
End-to-end voice-over demo video