Surface Duo Blog

Dual-screen app design walkthrough

Hello designers, This week we are excited to share with you our journey that inspires, educates, and showcases real world usage of various design patterns and provides designers a sense of exploring foldables with working examples of how to make use of the dual-screen/folding form factors in different ways when an application is ...

Foldable CSS and JavaScript update for web developers

Hello web developers! The dual-screen CSS and JavaScript enhancements for Microsoft Edge were initially shared in June 2020 when they were first available behind a feature flag for testing. Since then there has been a lot of work and feedback on the proposals, and the implementation currently available in the latest version of ...

Design Kit 2.1

Hello designers! We recently unveiled Design Kit v2.1 – a set of updates to the design system kit that enables you to create dual-screen and foldable experiences for Microsoft Surface Duo and Surface Duo 2 in Figma. Figure 1: Design Kit v2.1 on Figma Figma device frame Figure 2: Figma device frames Today ...

Surface Duo Design Kit update

Hello designers, Today we are excited to share you with an update to the Design Kit for the Microsoft Surface Duo that’s available on Figma for download. The latest update to our Design Kit version 0.4 includes: In this blog post we want to highlight details of the guidelines, principles, and...

Creating beautiful dual-screen Xamarin.Forms apps

Hello .NET developers! The blog has previously featured tips for bringing Xamarin apps to Surface Duo and Microsoft Learn training to help enhance Xamarin apps. In this post we’ll discuss changes to animated layouts in a Xamarin.Forms app to adapt them for Microsoft Surface Duo. Adapt a design for Xamarin The sample project ...

Microsoft Surface Duo Design Kit documentation

Hello designers! This week we are happy to share a number of updates to the Microsoft Surface Duo Design Kit that was announced in January. Design Kit updates There have been several additions and updates since the last version on the Figma Design Kit: One major update is the addition of interactive ...

Figma Design Kit for Microsoft Surface Duo

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...