One of the things us designers like to do after working on an application or website is to see how it will look in reality. This way, we get a better feel for the design and can focus on more detailed aspects. For example, we can decide if the size of a button is correct or if the distance between elements looks right.
Desktop applications are easy to test. We can click on the screen and view it in its intended size. Of course, we also can create a prototype and test the interactions and the flow between the screens.
While this process is simple when designing desktop apps, it’s harder on mobile devices. This is because we have to use a mobile phone or tablet to test the application since it’s the real environment, not the desktop screen.
For that problem, Figma has an excellent solution. It’s the Figma Mirror app (for both iOS and Android), where you can mirror your frames or prototypes from the desktop app and view them on a mobile or tablet device.
Let’s look at how to do this and see some tips and tricks for getting the most out of the app.
Figma Mirror is an app that Figma launched that works on iOS and Android, and there is also another smaller web version for access.
The app lets you view your Figma designs on mobile or tablet. You can open files and prototypes from the app or mirror what you see on the desktop in the app.
If you want to try it out, below are links to the app for each platform:
There are two main reasons why Figma Mirror is useful:
With the app, you can see the exact design in actual size and on a real device. It will help you test component sizes, for example, buttons or checkboxes, and also check the feeling of the app and the interactions between the screens.
So, instead of looking at the design in desktop size, which is not the real size of a mobile app, you can see its actual size. This will enable you to get the actual feel of the app during the design process.
Imagine you want to test a mobile application and want the users to get a real feel of it. You can open the prototype with a smartphone or tablet so the user gets a better impression of the app, and you get better results.
In addition to these two main options with the app, you can open Figma files, watch them, and write comments to your team about the design. This is, for example, when you are on the bus or the metro.
Install the app on your tablet or mobile device by downloading it from the Android or Apple store. When you log in, make sure you use the username associated with your desktop account so the screens can be mirrored.
The app has four sections:
The steps are simple:
Whether you’re tweaking a design on the go or testing for mobile, these tips will make your journey smoother.
If you want to go back to the app’s main screen, tap and hold with two fingers on the screen, then open the menu and click exit.
Changing the selected artboard on the desktop app will also update the frame on the app:
Connecting the screens in the Figma file will make the mirroring process behave like a prototype. When you click on one of the clickable areas, the screen will move to the next one:
When testing, use the same device size you designed to get the natural feeling. For example, if you design with an artboard of iPhone 15, it is better to use an iPhone 15 for testing.
This way, you will see the exact size you design for. If not, the artboard will adapt to your mobile size, and it will not be 100 percent the same size.
If you open a prototype or a file from the recent section or the search bar, you can also open the menu by tapping and holding it with two fingers on the screen. Then, you can restart the prototype, view the file, add comments, and turn off the hotspot hints.
While mirroring, it is best to take the phone or the tablet by hand instead of testing it on a stand so you can feel the design better. This helps you test button positions, how comfortable it is to tap and scroll, and so on.
You can use the app as a remote control for presentations you made in Figma. Connect all the presentation screens like a prototype, then connect the laptop to a big screen and mirror it to the mobile. Now, you can click on the mobile and move slide by slide.
If you have a problem downloading the app to your mobile or tablet or prefer not to add another app to your phone, Figma also has a solution.
You can open the browser and use the mirror option with the web-based app.
Log in to your account and mirror from the desktop. This is like a small app with only the possibility of mirroring from the desktop:
The Figma app allows us to test our design and prototype with a mobile phone or tablet, giving us the real feeling of the application in its actual environment.
It’s easy to use on the go, and the app has plenty of other features that encourage every designer to have it downloaded. Give the app a try!
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Don’t waste wait time. Here are my personal fav smart ways to turn loading screens into delightful, helpful moments your users will actually enjoy.
Buttons are one of the most common components in UX design. Learn how to create buttons that guide users effectively.
Improve loading UX with skeleton screens. This guide breaks down what they are, how they work, and how top apps use them.
The key to effective typography is to think of it as an essential element from the very beginning of the design process.
Learn more →
