{"id":2991,"date":"2023-01-05T12:00:33","date_gmt":"2023-01-05T20:00:33","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2991"},"modified":"2023-01-05T01:36:57","modified_gmt":"2023-01-05T09:36:57","slug":"happy-new-year-2023","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/happy-new-year-2023\/","title":{"rendered":"Happy New Year 2023"},"content":{"rendered":"<p>\n  Hello app builders,\n<\/p>\n<p>\n  We\u2019re excited to kick off the new year with a summary of all the great design and user experience guidance from the foldable and large-screen ecosystem. Can\u2019t wait to see what new apps evolve in 2023!\n<\/p>\n<h2>Large screen design patterns<\/h2>\n<p>\n  Read about the similarities and unique elements of the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/large-screen-design-patterns\/\"><strong>large screen design patterns<\/strong><\/a> from the Surface Duo Design Kit and the Android Material Design site. User experiences like list-detail navigation can scale across all form factors:\n<\/p>\n<p>\n  <img decoding=\"async\" width=\"1329\" height=\"703\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/phone-foldable-and-tablet-device-showing-the-lis.png\" class=\"wp-image-2992\" alt=\"Phone, foldable, and tablet device showing the list-detail design pattern\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/phone-foldable-and-tablet-device-showing-the-lis.png 1329w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/phone-foldable-and-tablet-device-showing-the-lis-300x159.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/phone-foldable-and-tablet-device-showing-the-lis-1024x542.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/phone-foldable-and-tablet-device-showing-the-lis-768x406.png 768w\" sizes=\"(max-width: 1329px) 100vw, 1329px\" \/>\n<\/p>\n<p>\n  Visit the Android <a href=\"https:\/\/developer.android.com\/large-screens\">large-screen landing page<\/a> for code resources and the sample gallery.\n<\/p>\n<p>\n  The <a href=\"https:\/\/m3.material.io\/\">material.io<\/a> site also has guidance on <a href=\"https:\/\/m3.material.io\/foundations\/adaptive-design\/large-screens\/overview\">designing for large screens<\/a>, which covers window size classes, grid layouts, and a great explanation of <a href=\"https:\/\/m3.material.io\/foundations\/adaptive-design\/large-screens\/component-adaptation\">adapting UI components<\/a> to make layouts responsive.\n<\/p>\n<h2>Designing for foldables<\/h2>\n<p>\n  Thinking specifically about designing for foldable and dual-screen apps is covered in <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/design-foldable-large-screens\/\">this blog<\/a> and in the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/design-kit-update\/\">Design Kit update<\/a> post.\n<\/p>\n<p>\n  <a href=\"https:\/\/www.figma.com\/community\/file\/925222050648034066\"><img decoding=\"async\" width=\"1056\" height=\"622\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/graphical-user-interface-application-description-3.png\" class=\"wp-image-2993\" alt=\"Surface Duo Design Kit title card\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/graphical-user-interface-application-description-3.png 1056w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/graphical-user-interface-application-description-3-300x177.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/graphical-user-interface-application-description-3-1024x603.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/graphical-user-interface-application-description-3-768x452.png 768w\" sizes=\"(max-width: 1056px) 100vw, 1056px\" \/><\/a>\n<\/p>\n<h2>Design to code<\/h2>\n<p>\n  Another exciting 2022 announcement was <a href=\"https:\/\/developer.android.com\/jetpack\/compose\/tooling\/relay\">Relay for Compose<\/a>, which helps designers hand off their Figma layouts to Jetpack Compose apps.\n<\/p>\n<p>\n  This video <a href=\"https:\/\/youtu.be\/6PgzGXZt5Fg\">Reimagining designer-developer handoff: Introducing Relay<\/a> provides an overview of using Relay:\n<\/p>\n<p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/6PgzGXZt5Fg\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Resources and feedback<\/h2>\n<p>\n  If you have any questions about design resources or creating responsive designs for different screen sizes and modes, please reach out via the\u202f<a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\" target=\"_blank\" rel=\"noopener\">feedback forum<\/a>\u202for on Twitter\u202f<a href=\"https:\/\/twitter.com\/surfaceduodev\" target=\"_blank\" rel=\"noopener\">@surfaceduodev<\/a>.\u202f\u00a0\n<\/p>\n<p>\n  Our Twitch livestream is taking a break over the holidays, but you can view the <a href=\"https:\/\/www.youtube.com\/watch?v=jWFIDm0RvDk&amp;list=PL39Ta7GR_KGHPfilayS6AC1Vd5m1Ok9Y1\">full archive on YouTube<\/a>. We look forward to seeing you online again soon!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello app builders, We\u2019re excited to kick off the new year with a summary of all the great design and user experience guidance from the foldable and large-screen ecosystem. Can\u2019t wait to see what new apps evolve in 2023! Large screen design patterns Read about the similarities and unique elements of the large screen design [&hellip;]<\/p>\n","protected":false},"author":108330,"featured_media":2992,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[710],"tags":[709,46],"class_list":["post-2991","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-design","tag-design","tag-surface-duo"],"acf":[],"blog_post_summary":"<p>Hello app builders, We\u2019re excited to kick off the new year with a summary of all the great design and user experience guidance from the foldable and large-screen ecosystem. Can\u2019t wait to see what new apps evolve in 2023! Large screen design patterns Read about the similarities and unique elements of the large screen design [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2991","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\/108330"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=2991"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2991\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2992"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}