Surface Duo Blog

Relay Leg 2: Tips and tricks

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

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

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

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

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

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

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

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

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

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