Surface Duo Blog

design - Surface Duo Blog

Relay Anchor Leg: Overall impressions

January 26, 2023 Jan 26, 2023 01/26/23
Kristen Halper
Hello Compose developers, Over the last two weeks, I’ve given a brief introduction to Relay, as well as talked about some of the tips and tricks I picked up while using the tool. This week, I’ll share my thoughts on the current state of Relay from the developer point of view. As a reminder, Relay is in alpha, so please go...

Relay Leg 2: Tips and tricks

January 19, 2023 Jan 19, 2023 01/19/23
Kristen Halper
Hello Compose developers, Last week, I gave a brief introduction to Relay, the new Figma to Compose tool developed by Google. This week, I’ll dive deeper into some tips and tricks I learned when testing out Relay, As a reminder, Relay is in alpha, so please go try it out and send the Relay team your feedback! Putting Relay...

Pass the design baton with Relay

January 12, 2023 Jan 12, 2023 01/12/23
Kristen Halper
Hello Compose developers, Over the holidays, I finally got the chance to test out Relay, the new tool released by Google late last year. The goal of Relay is to simplify the “handoff problem” between designers and developers by translating Figma designs directly into Compose code. Figure 1. Viewing the StatusCard and Chip...

Happy New Year 2023

January 5, 2023 Jan 5, 2023 01/5/23
Lauri Jokela
Hello app builders, We’re 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’t 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...

Large-screen design patterns

November 17, 2022 Nov 17, 2022 11/17/22
Craig Dunn
Hello app designers, At the first Android Dev Summit of 2022 Google announced updated large screen design guidance, gallery, and tips for foldables. These updates included a list of canonical layouts which are complementary to the dual-screen design patterns featured in the Surface Duo developer documentation. Material Design has ...

Surface Duo Design Kit 2.2 update

September 8, 2022 Sep 8, 2022 09/8/22
Yuran Liu
Hello app designers! Our Surface Duo Design Kit is now updated to version 2.2. If you haven’t heard of this kit before, Surface Duo Design Kit is the go-to place where you can find all our UX design suggestions and UI components for both Surface Duo and Surface Duo 2. It includes many of the interface components which you can ...

Dual-screen app design walkthrough

February 10, 2022 Feb 10, 2022 02/10/22
Mehul Shah
Hello designers, This week we are excited to share with you our journey that inspires, educates, and showcases real world usage of various design patterns and provides designers a sense of exploring foldables with working examples of how to make use of the dual-screen/folding form factors in different ways when an application is ...

Foldable CSS and JavaScript update for web developers

November 24, 2021 Nov 24, 2021 11/24/21
Craig Dunn
Hello web developers! The dual-screen CSS and JavaScript enhancements for Microsoft Edge were initially shared in June 2020 when they were first available behind a feature flag for testing. Since then there has been a lot of work and feedback on the proposals, and the implementation currently available in the latest version of ...

Design Kit 2.1

November 11, 2021 Nov 11, 2021 11/11/21
Mehul Shah
Hello designers! We recently unveiled Design Kit v2.1 – a set of updates to the design system kit that enables you to create dual-screen and foldable experiences for Microsoft Surface Duo and Surface Duo 2 in Figma. Figure 1: Design Kit v2.1 on Figma Figma device frame Figure 2: Figma device frames Today ...

Surface Duo Design Kit update

June 10, 2021 Jun 10, 2021 06/10/21
Mehul Shah
Hello designers, Today we are excited to share you with an update to the Design Kit for the Microsoft Surface Duo that’s available on Figma for download. The latest update to our Design Kit version 0.4 includes: In this blog post we want to highlight details of the guidelines, principles, and...