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.


Unity Introducing Per-Install Fees Leaves Devs Reeling

When Unity announced plans for a new "Runtime Fee" tied to a player's installations of a game left many game makers wondering if having a hit game through Unity would cost them more mon [ ... ]

BitLocker Defeated Using Logic Analyser

Security is hard, very hard, in fact so hard that I really don't think a device can be secure if you have physical access to it. To prove the point news that Bitlocker can be bypassed if you have a ch [ ... ]

More News

Summer SALE Kindle 9.99 Paperback $10 off!!




or email your comment to: