Microsoft Updates Surface Duo Design Kit
Thursday, 15 September 2022

Microsoft has updated the Surface Duo Design Kit to add more components and an enhanced device frame. The design kit is a collection of all the UX design suggestions and UI components for both Surface Duo and Surface Duo 2, along with interface components.

The Microsoft Surface Duo Design Kit is described as including safe areas, design patterns & guidelines, dual screen postures, and components for designing Dual Screen apps. The kit details dual screen capabilities and shows common ways the kit could be used.


Version 2.0 of the kit was released last year. The improvements to the updated release, version 2.2, start with the device frame. Describing the improvements, Yuran Li of Microsoft's Surface Duo team said:

"Device frames are useful not only for prototyping and mock-ups but also sharing real app screenshots in-situ. With this in mind we updated the Surface Duo 2 device frame for pixel-perfect accuracy."

This should mean that a screenshot of an app will look more the way it would on a real device. 

The other main improvement comes in the form of new Surface Duo 2 component variants. Version 2 of the kit did include Surface Duo 2 variants for some of the components in the design kit, but the updated release includes Surface Duo variants for all the components. The developers say they've also made use of Figma’s component set feature to make it easier for developers to find the right model, orientation, theme, and type of component. Figma is a collaborative web application for interface design, and the Surface Duo kit is published on Figma.

Yuran Li said that in the previous release, a developer wanting to use  an app bar would be shown a list of 32 very similar app bar thumbnails that would appear with long wrapped names for each one of them to indicate their properties. Version 2.2 uses Figma’s component set feature to simplify the search, and looking for an app bar would now show only the one matching App bar thumbnail result. The developer could then choose from the property drop down menus to find the version they need.

Surface Duo Design Kit 2.2 is available now.


More Information

Surface Duo Design Kit in Figma

Related Articles

Microsoft's Surface - What's a Tablet For?  

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.


CDN Serves Malware - 100,000 Polyfill Users At Risk

Back in the day, before modern JavaScript was all grown up, a lot of us resorted to polyfills to make up for browsers not supporting the very latest features. It looks as if that choice is coming to b [ ... ]

Rust's Rapid Rise on TIOBE Index

Rust is making spectacular progress up the TIOBE index and JavaScript is also on the up and experiencing a personal best. Kotlin is maintaining its inclusion in the top 20 and the gap at the very top  [ ... ]

More News

kotlin book



or email your comment to: