January 7th, 2021

Figma Design Kit for Microsoft Surface Duo

Mehul Shah
UX Designer

Hello designers,

We’re excited to announce the v0.1 of our Design Kit for Microsoft Surface Duo. The kit details dual-screen capabilities and shows common use cases to help inspire your mobile app design. You can easily grab design elements and modify them as needed, giving you more time to create the best experience for your users.

This kit includes the following design elements:

Figma preview of the Surface Duo Design Kit

This blog post provides details of what you can expect from the Design Kit that is published on the design and prototyping collaborative tool Figma, and how to leverage these resources for designing dual-screen apps. We will be expanding the Design Kit with more design content and guidance in the future.

Safe areas

This page showcases safe areas and how to prevent content from underlapping the app header, navigation bar, tabs, and hinge.

Safe areas on the Surface Duo

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.

Extended Canvas pattern exampleList Detail pattern exampleTwo Page pattern exampleDual View pattern exampleCompanion Pane pattern example

Following the design patterns are the scenarios guiding you the right way a pattern must be used. You might first want to identify which pattern would suit your app the best and then drill down into each of them by reviewing the do’s and don’ts.

Do and don't advice for dual-screen layouts

Postures

Dual-screen devices are available 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 might include larger displays or varying hinge designs. As you design your apps, keep in mind that you should avoid designing to the specifications of a particular device available today.

Five different Surface Duo device postures: flat, single portrait, single landscape, tall, and laptop mode

Controls and layouts

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.

Screen dimensions

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.

Design componentsLight theme component properties

Resources and Feedback

The Surface Duo Design Kit is available as part of Microsoft’s Figma profile.

You can find an overview of developing dual-screen user experiences in the introduction to dual-screen devices, including the five common patterns (extended canvas, list-detail, two page, dual view, and companion pane).

We would love to hear from you about your experiences designing dual-screen experiences for the Surface Duo. Please reach out using our feedback forum or find us on Twitter @surfaceduodev.

Author

Mehul Shah
UX Designer

Mehul is a Designer who creates delightful, scalable user experiences for Microsoft's dual screen personal device running Android OS. He's also a graduate from the Human-computer Interaction and Design program from University of Washington and is always up for a design coffee chat.

0 comments

Discussion are closed.