How to Preview Your Mobile Designs Outside the Main Figma Window?

Figma released an update at Config2023 that allows you to open an inline prototype preview window within the design window, eliminating the need to open a new tab.

This is convenient for mobile design work since you don’t need to open a separate tab for preview - you can design and preview simultaneously. However, the inline window has one issue: it sometimes blocks our design area. For instance, when I want to view elements below the preview window, the inline window blocks them, forcing me to move or close the preview window first.

You might say, just use iPhone preview. But for designers like me who don’t have an iPhone, this method isn’t quite applicable. So I wondered if there’s a way to open a completely independent window to preview our designs.

Using Xcode Preview

I was developing an iOS app at the time, and Apple’s Xcode comes with a built-in simulator. I thought maybe we could use it to preview our designs. So I asked my AI assistant, and it told me I could implement an iOS app that only displays a webview, which can load https://figma.com/mirror in the Xcode simulator to achieve preview functionality.

Let’s get started - it’s actually just a few lines of code. For convenience, I won’t teach you how to implement and package it. I’ve directly packaged an installable file that you can download and install following the steps below.

1. Download and extract Figma Mirror
2. Find and open Xcode in your Applications folder.
3. After opening, ignore the welcome window and look directly at the Apple menu bar at the top of the screen. Click Xcode in the menu bar, then select Open Developer Tool -> Simulator from the dropdown menu.
4. Now we can see an iPhone simulator displayed on our desktop.
5. Drag the extracted Figma Mirror file directly into the simulator, and it will install automatically.
6. After installation, we can see the Figma Mirror icon in the simulator. Click it to open, and you’ll need to log in with your email and password for first-time use.
7. If you can’t type in the input field, click I/O -> Keyboard -> Connect Hardware Keyboard in the menu bar, so you can use your macOS keyboard for input.

After logging in, we can preview our designs in the Xcode simulator.

You can also adjust the preview window size as needed.

How’s that? Pretty convenient, right? If you think this method is useful, feel free to share it with your friends.