Surface Duo Blog

Surface Duo Design - Surface Duo Blog

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 ...

Designing for foldable and large screens

October 6, 2022 Oct 6, 2022 10/6/22
Yuran Liu
Hello app designers! Today we are going to talk about designing for foldable and large screens. We’ve been practicing responsive web design for a long time - let's use those concepts to optimze your mobile app for different platforms and devices. Mobile apps can use adaptive designs to deliver a consistent app experience. In today...

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 ...

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...

Microsoft Surface Duo Design Kit documentation

April 8, 2021 Apr 8, 2021 04/8/21
Mehul Shah
Hello designers! This week we are happy to share a number of updates to the Microsoft Surface Duo Design Kit that was announced in January. Design Kit updates There have been several additions and updates since the last version on the Figma Design Kit: One major update is the addition of interactive ...