The Figma Mirror app, now just called Figma, is a powerful tool to have at your disposal as a UI designer.
If you're designing mobile apps and you're not designing on your phone, you need to start immediately. It will — I promise I'm not exaggerating — make you a better UI designer.
When you design an app for a phone, on a phone, you're removing one more layer of interpretation that your brain has to do to imagine it in context.
The closer you can get to creating a 1:1 relationship between the context you're designing for and the context you're designing in, the better your designs will be.
For those of you who have used an earlier Wacom or similar device and switched to an iPad Pro or similar device (again: once the technology of the iPad-like-device became close enough to a 1:1 experience,) it's like going from this:
To this:
I know there will be diehard Wacom holdouts out there that will come after me for this comment. But. Once the refresh rate and pressure sensitivity of iPads caught up to the point of diminishing returns relative to the Wacom, the iPad provided an objectively better experience overall.
And this is because it closed the gap across screen quality, pressure levels, and response time, creating a near 1:1 experience for digital drawing and painting.
The closer you can get to creating a 1:1 relationship between the context you're designing for and the context you're designing in, the better your designs will be.
In the Figma app, not only can you see the changes you make in the right context (on the phone) as you make them, but you can also interact with your designs as you design them.
Meaning, if you're designing an app and you've wired up your screens to be interactive, you can use it similar to how you'd use the actual app.
Even better: this means other people can use the screens you're working on as if it's in an actual app, so the feedback you get will also be nearly 1:1 with what it would be if they were using the actual app.
So without further ado, let's start out by downloading the Figma app. Here are the respective links for each platform:
Once you've got the app downloaded, you need to know two things:
- It requires you to be signed into the same Figma account on both your phone and computer
- It used to require you to be on the same wi-fi network. Now it doesn't, but I'd recommend it anyway, since it will use a lot of data otherwise.
Now that you're signed into the app and into your Figma account on your computer, you can simply click a frame to select it.
Important note: you should use a frame size that matches your phone. This is important because your elements will not be sized correctly if you don't. If you don't know, here's how you set that.
Why this is important: imagine designing in a tablet-sized screen size, and then viewing it on your phone: all of those pixels will just be scaled down to fit within the viewport of your phone, so you won't be getting an accurate read on the sizing of your elements.
To do this, first select the Frame tool in the upper left. You can also press F on your keyboard.
Once you have the Frame tool selected, check out the top right of the Figma screen. You'll get a list of frame sizes for common devices:
They do a pretty good job of updating this list. So check for your phone, and if you can't find it, I'd recommend creating your own frame sized based on the aspect ratio and dimensions of your phone.
Ok. Now that we have our frame set up, let's start mirroring our designs on our phone!
If you have the Figma app open on your phone, and you're signed into the right account, just select the frame you want to mirror to have it display on your phone.
Small pro tip: it's easier to select the frame if you click near the name:
The Figma app will detect that you've selected a frame and will ask you if you want to mirror it on your device:
Alternatively, you can tap on the Mirror tab, where after selecting the frame, you'll see an in-line prompt to mirror your selected frame.
Then in either place, select Mirror, and the frame should display on your device:
You can now move elements around in the desktop, and the changes will happen in real time in the Figma mirror app so long as you select the frame.
This means you have instant feedback as you design.
I actually set up my phone next to my computer and use it as my primary design "display" when I'm doing UI design for mobile apps, using the desktop app as more of an input to what I'm seeing on my phone:
It's also possible to run prototypes in the Figma app so you can tap around what you've designed. The setup process is the same as the one we just did; just make elements into an interactive prototype in Figma, and you'll be able to see them as you design and tap to use them.
Once you get the hang of it, using Figma mirror to design on your phone will change how you think about mobile app design. You can start designing as if you are designing an app in real time, rather than designing a picture of an app that will then be built into one.
It'll save you time translating your designs to workable sizes, gives you a better sense of how your colors will appear on a modern phone screen, and forces you to consider the usability of your design immediately and proactively rather than retroactively.
The cherry on top: handing someone a UI designed and having them use it right in front of you is a way more efficient way to get feedback on your designs.
When you design on your phone, there are fewer layers of interpretation and less suspense-of-disbelief required. Less imagining, and more doing the next thing.
Bottom line: it will make you more efficient designer overall, and I'd highly recommend it.
Happy designing! ⚡
Was this article helpful? You can support me by buying me a coffee! (I love coffee.)
Fyi, here's what I use to keep my phone propped up while I'm designing. I like it because:
- You don't see much of the stand around your phone
- There's a hole in the back for a charger cable
- It's metal, so it helps keep your phone cool with all the Figma-ing
- It's cheap and looks decent
