\n \n \n Today you can start creating wireframes and mockups for Surface Duo and Surface Duo 2 by grabbing the Figma frame and placing your components inside them. \n<\/p>\n \n Visually you may notice that Surface Duo 2 has a taller frame height and slimmer hinge compared to Surface Duo since it rocks a new curved display when the device is spanned or maximized. Additionally, this curved display runs across the glance bar<\/a> in the hinge allowing users to view notifications when the device is closed. \n<\/p>\n \n We\u2019ve also included two new device frames for Surface Duo 2 in this update that includes glacier and obsidian color devices to bring a more realistic effect for your mockups and prototypes. \n<\/p>\n \n Figure 3: Layout, spacing and accessibility<\/em>\n<\/p>\n \n Along with the Figma frames, we\u2019ve also updated the Layout tab to support Surface Duo 2 with dimensional specifications to consider when designing for a folding form factor. \n<\/p>\n \n We\u2019ve designed a sheet that details the spacing and red lines to follow in your apps. Additionally, the team at Microsoft Design<\/a> has put together two accessibility<\/a> plugins which are also linked in the Figma file. These plugins check the color contrast ratio of all visible text in a frame, annotates and provides feedback on whether it meets WCAG\u2019s AA and\/or AAA level compliance. It also includes color sliders that allow users to adjust the colors and understand how the corresponding contrast ratio changes in real-time.\n<\/p>\n \n Figure 4: Video and media guidelines<\/em>\n<\/p>\n \n To support app scenarios that utilize the media and video players, we\u2019ve created guidelines to help and provide you with the best practices in the design kit as well. \n<\/p>\n \n In addition to those guidelines, the kit also highlights on orientation-based media layouts \u2013 i.e., portrait and landscape.\n<\/p>\n \n Figure 5: Figma components<\/em>\n<\/p>\n \n Along with the guidelines and layouts, we\u2019ve also updated several components in the Design Kit. Components like navigation rail, keyboards, chips, and app notification badges, that incorporates scenarios for unfolding states and folding states.\n<\/p>\n \n In addition to including the navigation rail component in the design kit, we\u2019ve also made a navigation rail sample<\/a> app that was mentioned in last week\u2019s blog, showcasing the component that adapts to larger displays and how it transforms to a bottom navigation when the device is flipped or folded into a single screen.\n<\/p>\n \n The\u00a0Surface Duo Design Kit<\/a>\u00a0is available on Figma<\/a> at the\u00a0Microsoft Design Page<\/a>.\n<\/p>\n \n While we are expanding the Design Kit, we would love to hear from you about your experiences designing dual-screen experiences for Surface Duo. Please reach out using our\u00a0feedback forum<\/a>\u00a0or find us on Twitter\u00a0@surfaceduodev<\/a>.\n<\/p>\n![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/graphical-user-interface-application-description.png\")
Figma device frame<\/h2>\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/shape-rectangle-square-description-automaticall.png\")
Layout, spacing, and accessibility<\/h2>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/word-image.png\")
\n<\/p>\nVideo and media guidelines<\/h2>\n
![\"Two](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/graphical-user-interface-diagram-description-aut.png\")
\n<\/p>\nComponents<\/h2>\n
![\"A](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/11\/graphical-user-interface-application-description-1.png\")
\n<\/p>\nResources and feedback<\/h2>\n