Preview designs and prototypes with Figma Mirror app

    Before you Start

    Who can use this feature

    Users on Any Plan

    You will need to have a Figma account to be able to use the Figma Mirror app

    iOS: You must be running 11.0.1  or later

    Android: You must be running Android 7.0 - 9.0 or later

    Learn more about supported platforms in our Supported Platforms and Browsers article. To find out which version of operating system you're using:

    You can preview your designs on a mobile device to see how they look and feel on an actual device.  You can use the Figma Mirror app to preview both static designs and Prototyping interactions.

    This allows you to simulate a more realistic and immersive environment, without the browser header and footer.

    There are a few approaches available when it comes to previewing your designs:

    Browser preview

    You can preview any design on your mobile by opening a Prototyping link in your mobile browser. This will allow you to navigate through any Prototyping Connections.

    If you are sharing your File via Public Link Access, anyone with the link will be able to view your Prototype. If the File isn't shared via Public Link Access, you will only need a free Figma account to view the File.

    We will display your designs inside a regular browser window, so the browser's header and footer will still be visible. This approach doesn't replicate a true "in-app" experience, so is better suited for mobile web designs.

    Figma Mirror app preview

    To better replicate an immersive app environment, you can use the Figma Mirror app, which allows you to preview a scaled version of your design.

    To use the Figma Mirror app, you will need to login to the Web or Desktop app, and the Mirror app, at the same time. Figma will show any Frame you select on the Web or Desktop app, in the Figma Mirror app.

    Note: The Mirror app will scale your content proportionately, to match the width of your device.

    The Figma Mirror app will work on either Wi-fi or cellular data. You don't need to connect to the same Wi-fi network to establish a connection between the two.

    1. Sign in to the desktop app, or desktop browser:
    2. Sign in to the Figma Mirror app using the same account:
    3. On the desktop, select the Frame you wish to view. You can select any top-level Frame or Component
    4. The Figma Mirror app will display the selected Frame.
      The Figma Mirror app will scale your content to the width of the device you are previewing it on.

    Using Figma Mirror in the Browser

    You can also access Figma Mirror via the browser. We recommend this approach if your device isn't supported or you want to preview designs in a web browser.

    1. Open the Figma Desktop app, or in a browser window.
    2. Open the File you want to preview.
    3. Open the mobile browser on your device.
    4. Visit https://www.figma.com/mirror
    5. Login using your account details.
    6. On the File, select the Frame you wish to preview.
    7. We will display the selected Frame in the Figma Mirror browser.

    Tip! You can enter full screen mode using

    • Mac:   Command Shift F
    • Windows:   Ctrl Shift F

    View Prototypes

    To get started, you will need to add Prototyping connections to your design. This lets us know how you want the design to respond when you interact with it.

    If you're new to Prototyping in Figma, we recommend reading the following articles:

    1. Log into Figma and the Figma Mirror app under the same login details.
    2. On the desktop, open the File you want to Preview.
    3. Select the starting Frame of the Prototype:

    4. Figma will load the same Frame in the Figma Mirror app: 

    5. You can then interact with any Frames in that file with Prototyping connections.

    Troubleshooting

    If you are having trouble using the Figma Mirror app, we recommend the following:

    • Make sure you're using a device that is currently supported. Learn more in our Supported Platforms and Browsers article. 
    • Make sure you're logged into both the desktop version and Figma Mirror app under the same account. You may need to Sign out and Sign in again to confirm.
    • If you're running into issues while previewing, you may need to force quit the app and restart it on your device.
    • If problems persist, we recommend uninstalling the app and downloading it again. Find the Figma Mirror app in the Apple App Store or Google Play Store.

    If you're still having issues with using the Mirror App, please get in touch with the Figma Support Team.  Click the " ?" in the bottom-right corner of the app and select "Get Help". Or, send an email to support@figma.com.

    Related Videos

    • Download the Figma Desktop App

      Before you Start

      Who can use this feature

      Users on Any Plan

      macOS: Must be running 10.11 (OS X El Capitan), or later.

      Windows: Must be running Windows 8 or later in a 64-bit environment.

      Learn more about supported platforms in our Supported Platforms and Browsers article. To find out which version of operating system you're using:

      The Figma Desktop App gives you access to the same features and functionality as using Figma in a browser. You can also:

      Figma has desktop apps available for macOS and Windows. Download the desktop app for a more native Figma experience.

      Check your system requirements

      Check if your device meets the minimum operating system requirements for installing and using the Figma Desktop App.

      macOS (Apple)

      1. Head to the Apple menu in the top-left corner.
      2. Select About this Mac from the options.
      3. The version number will be displayed under the version name. You must be running 10.11 (OS X El Capitan), or later.

      Windows

      1. Click the Start button.
      2. Enter Computer in the search field.
      3. Right-click and select Properties.
      4. Identify the version under the Windows edition field. You must be running Windows 8 or later in a 64-bit environment.

      Note: It's not possible to run the Figma Desktop app behind a proxy. If you're using a proxy, you will need to use Figma in the browser instead.

      Download and install desktop apps

      1. Download the Figma Desktop app:
      2. Figma will download the desktop app to the location you have configured. Click on the downloaded file to run the installer.
      3. Move the Figma icon from the Downloads folder to your Applications folder.
      4. Delete the Installer from your Desktop or Downloads folder.
      5. Open the Figma app to get started.

      Beta version of the Desktop App

      Figma also has a beta version of the desktop app available.

      By using the beta version of the app, you're helping Figma test bug fixes and performance improvements, before we release them to the general public. The beta version does not give you access to features Figma hasn't released yet.

      You can install and use the Figma desktop app and the beta version at the same time. Both versions of the desktop app will offer the same core features and functionality.

      You do not need to be logged into the same account on both versions.

      Download the beta version

      Caution: The beta version of the desktop app is a test environment. If you notice issues or behaviors that need our attention, please submit a bug report. Switch to the regular version of the desktop app if needed.

      1. Download the beta version of the Figma Desktop app:
      2. Figma will download the app to the location you have configured. Click on the downloaded file to run the installer.
      3. Move the Figma icon from the Downloads folder to your Applications folder.
      4. Delete the Installer from your Desktop or Downloads folder.
      5. Open the Figma Beta app to get started.

      Once installed, app icons display as Figma for the regular desktop app and Figma Beta for the beta version.

      Focus_view_tooltip.png

    • Color management in the Desktop App

      Before you start

      Who can use this feature

      Anyone on any team or plan can manage their color profile in the Desktop app.

      You can only use color management in the Figma Desktop app.

      • macOS: You must be running 10.11 (OS X El Capitan), or later.
      • Windows: You must be running Windows 8 or later in a 64-bit environment.

      Learn more about Figma's browser requirements.

      There are lots of terms used to describe color. The terms color space and color profile are often used interchangeably. In this article, we refer to the following definitions:

      • Color space: how an application or system implements a color model on a specific device.
      • Color profile: a standardized system for rendering colors. 

      Figma can only export assets using the sRGB color profile.

      Figma in the browser

      In the browser, Figma uses a managed sRGB color profile. Figma will export any assets using the sRGB color profile. You can't change the color profile  in the browser.

      Figma Desktop app

      In the Desktop app, your color profile can be managed or unmanaged.

      An unmanaged color profile lets you to use the color profile settings designated by your system's display settings. Your color space will be unmanaged by default. 

      You also have the option to switch to the managed sRGB color profile. Having a managed color profile allows you to keep a consistent color space in both the browser and desktop app.

      Note: If you set your color space to Unmanaged, colors may render differently between team members or displays. Regardless of your desired color profile, Figma can only export assets using the sRGB color profile.

      Update your color space

      On the Desktop app, You can switch between using a managed (sRBG) or unmanaged color profile.

      You will need to restart Figma to apply these changes. Make sure you're connected to the internet and your changes are saved before updating.

      1. Open the Figma Desktop app.
      2. Click on the Figma menu
      3. Select Color Space from the options.
      4. Choose between sRGB or Unmanaged:
      5. Restart the Figma application to apply your changes.

      Image showing how to access the color management setting for the Figma Desktop app on macOS

    • Adjust the scale of the Figma Desktop App interface

      In the Figma Desktop App, you can zoom in or out of the Figma interface to personalize your workspace.

      Scaling the size of the interface is useful if the default size is too small for your comfort or display.

      This includes the scale of the:

      • Sidebar in your File Browser
      • Layer and Properties panels in the Editor.
      • Font size for the tools and icons in these sections.

      Keep in mind, increasing the scale of the interface will result in less working space in the canvas.

      Note: You'll need to use your browser's zoom settings to adjust the size of the Figma interface in the browser app.

      Adjust interface scale

      1. In the Desktop app, click View from the menu bar.
      2. Hover over the Interface Scale option:
      3. Choose to:
        • Reset to Default
        • Make Larger
        • Make Smaller

      Interface_Scale_menu.png

      Keyboard shortcuts

      macOS:

      • Reset to Default: Option - Command - 0
      • Make Larger: Option - Command - =
      • Make Smaller: Option - Command - -

      Windows:

      • Reset to Default: Ctrl + Alt + 0
      • Make Larger: Ctrl + Alt + =
      • Make Smaller: Ctrl + Alt + -

      Tip! To zoom in or out of objects in the canvas, learn about adjusting your view settings in the Editor.

    • Open Figma links in the Desktop App

      Before you Start

      Who can use this feature

      Users on Any Figma plan can use the Desktop app

      macOS: To use the Desktop app, you must be running 10.11 (OS X El Capitan) or later.

      Windows: To use the Desktop app, you must be running Windows 8 or later in a 64-bit environment.

      Learn more about supported platforms in our Supported Platforms and Browsers article. 

      You can access your Figma Files via their unique URL. These can be used to open the File in the browser, or in the Figma Desktop app.

      There are a few different methods for opening Figma URLs in the Desktop app.

      Note: Prototyping links can currently only be opened in the browser.

      When you open a File link

      When you click on a Figma link, Figma will open the link in the browser by default.

      If you have the Desktop app installed, you'll see an alert when the File opens. Figma will ask you: Do you want to open this file in the Figma app?

      Open_in_app.png

      There are a few options available:

      • To continue to view the File in the browser, click Dismiss.
      • To only open the app now, uncheck the box next to Always open in the app and click the Open in app button.
      • If you'd like to open all Figma File links in the Desktop app, click Open in app:

      Figma will open the Desktop app and load the File. You will still be able to view the File in the browser, click the Open here instead link in the browser window:

      Tip! If you chose Always open in app, Figma will remember your decision. The next time you open a Figma URL you will be shown a loading screen in the browser.

      Open the current File in the Desktop app

      If you want to view your current File in the Desktop app, we have a Open in Desktop app setting. When you select this, Figma will open your current file in the Desktop app.

      1. Go to the menu in the top-left corner.
      2. Select Open in Desktop app from the options: 
      3. The File will be loaded in the Figma Desktop app. 

      Note: You will need to log in to the same account on the Browser and Desktop app for this link to work.

      If you are logged into an account that doesn't have access to a File - or you're logged into different accounts - you will not be able to open or access the File.

      Update your link preferences

      If you want to open all Figma URLs in the Desktop app, you can enable the Open links in Desktop app setting. You can find this in your Preferences. 

      You can only access this setting if:

      • You have the Desktop app installed
      • You are using the browser version of Figma. This setting isn't available in the Desktop app.
      1. Open the menu and hover over the Preferences option.
      2. Select the Open links in Figma app setting.
      3. A checkmark will be displayed next to the setting to show it is enabled. If there is a check next to the the setting already, you can select the setting again to disable it.
    • Download the Figma Mirror App

      Before you start

      Who can use this feature

      Users on any plan

      You will need to have a Figma account to be able to use the Figma Mirror app

      iOS: You must be running 11.0.1 or later

      Android: You must be running Android 7.0 - 9.0 or later

      Learn more about supported platforms in our Supported Platforms and Browsers article. To find out which version of operating system you're using:

      You can preview your designs on a mobile device to see how they look and feel on an actual device.

      To better replicate an immersive app environment, you can use the Figma Mirror app, which allows you to preview a scaled version of your design.

      Image comparing a mobile browser preview and the preview in the Figma Mirror app

      You can download the Figma Mirror app for Android and iOS from the Figma Download's page. Or from the App Store or Google Play Store. 

      Note: To use the Figma Mirror app, you will need to use a device that meets our system requirements. Beta versions of mobile operating systems are not supported.