Surface Duo Design Kit (in Figma)

The Surface Duo Design Kit is a Figma community resource to help app designers and developers build dual-screen user experiences. The components in this kit are the building blocks of what make Surface Duo feel like Microsoft products on Android.

• Device Frame - Glacier and Obsidian colored device outlines to present screenshots.
• Safe Areas - Safe areas prevent content from underlapping the app header, navigation bar, tabs, and hinge.
• Pen Interactions - How to design interactions for pen input.
• Design Patterns and Guidelines - Design patterns in the kit show the possibilities of dual-screen displays for different app scenarios and how all the pieces come together for a meaningful product experience.
• Video and Media Guidelines - Tips for including video and images in a foldable user experience.
• Postures - Dual-screen devices can come in a range of hardware and industrial design variations. The recently released Surface Duo, along with other planned devices, are intended to help define the category, but other devices may come with larger displays or varying hinge designs. As you design your apps, keep in mind that you should avoid designing to the specifications of any specific devices available today.
• Layout, Controls and Plugins - With a dual-screen form factor in mind, we made sure that you can design just the way you like using familiar controls and layouts. We also highlight details for you to be aware of when designing for dual-screen apps, such as the hinge and include layouts for designing on-the-go.
• Components - Each component is built to be as flat as possible so they are easy to manage and work with. Some components have hidden layers you can toggle on/off to add variations without detaching.
• Component Set - Master components for navigation and other design elements as grouped sets which help better organize variants containing different models, modes, screen counts, and orientations.