{"id":1169,"date":"2021-01-07T11:59:10","date_gmt":"2021-01-07T19:59:10","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1169"},"modified":"2021-01-07T11:59:10","modified_gmt":"2021-01-07T19:59:10","slug":"figma-design-kit-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/figma-design-kit-preview\/","title":{"rendered":"Figma Design Kit for Microsoft Surface Duo"},"content":{"rendered":"

\nHello designers,\n<\/p>\n

\nWe\u2019re excited to announce the v0.1 of our Design Kit for Microsoft Surface Duo<\/a>. 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.\n<\/p>\n

\nThis kit includes the following design elements:\n<\/p>\n

\n \"Figma\n<\/p>\n

\nThis 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.\n<\/p>\n

Safe areas<\/h2>\n

\nThis page showcases safe areas and how to prevent content from underlapping the app header, navigation bar, tabs, and hinge.\n<\/p>\n

\n \"Safe\n<\/p>\n

Design patterns and guidelines<\/h2>\n

\nDesign 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.\n<\/p>\n

\n\"Extended<\/a>\"List<\/a>\"Two<\/a>\"Dual<\/a>\"Companion<\/a>\n<\/p>\n

\nFollowing 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\u2019s and don\u2019ts.\n<\/p>\n

\n\"Do\n<\/p>\n

Postures<\/h2>\n

\nDual-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.\n<\/p>\n

\n\"Five<\/a>\n<\/p>\n

Controls and layouts <\/h2>\n

\nWith 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.\n<\/p>\n

\n\"Screen\n<\/p>\n

Components<\/h2>\n

\nEach 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.\n<\/p>\n

\n \"Design\"Light\n<\/p>\n

Resources and Feedback<\/h2>\n

\n The Surface Duo Design Kit<\/a> is available as part of Microsoft\u2019s Figma profile<\/a>.\n<\/p>\n

\nYou can find an overview of developing dual-screen user experiences in the introduction to dual-screen devices<\/a>, including the five common patterns (extended canvas, list-detail, two page, dual view, and companion pane).\n<\/p>\n

\nWe would love to hear from you about your experiences designing dual-screen experiences for the Surface Duo. Please reach out using our feedback forum<\/a> or find us on Twitter @surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hello designers, We\u2019re 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 […]<\/p>\n","protected":false},"author":49635,"featured_media":1194,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[710],"tags":[709,31,46],"class_list":["post-1169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-design","tag-design","tag-dual-screen-development","tag-surface-duo"],"acf":[],"blog_post_summary":"

Hello designers, We\u2019re 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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/49635"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1169"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1169\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1194"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}