Mobile Device Frames For Excalidraw

François Best • 11 June 2020 • 4 min read

I love using Excalidraw to build UI mockups. As I was working with a client on a responsive version of their webapp, I realised that I was always eye-balling the screen dimensions, and I wanted a way to make the screen ratio closer to the final deal.

Mobile UI mockup made with Excalidraw

Figma has frame size presets for various devices, which is a great feature when paired with responsive layouts and other design tools. None of that is needed for mockups. It would bring unnecessary complexity to a tool that needs to remain simple, but at least having the option to set a rectangle to the dimensions of a given device would be cool.

So I set out to build my own library of device frames, which are simply rectangles with the right aspect ratio for each device.

TL;DR#

Library files now available

Those files are now part of the official Excalidraw Libraries repository.

Here are the links to the editable Excalidraw sketches:

Apple Device Frames

Android & others: coming soon, follow me on Twitter for updates.

Mirrors:

Apple Device Frames (sketch)
Apple Device Frames (library)
android-device-frames.excalidraw: Coming soon

License

These resources are released under the Creative Commons Attribution 4.0 (CC BY 4.0) license. You can use them for any purpose, but I'd appreciate you keep the attribution if you redistribute them.

Updates

2020-12-29: Added iPhone 11 Pro Max
Libraries are featured in the official Excalidraw Libraries repository

Making Your Own Frames#

We are going to use the following tools:

Figma (free)
CleanShot X (paid, but worth every penny)

From Figma, we create a frame for a given device, say an iPhone 8, with a vivid background colour:

iPhone 8 frame in Figma with red background

Copy the frame as a PNG image:

Right click > Copy/Paste > Copy as PNG

Then we're going to import the frame image to CleanShot:

Now we can use the overlay feature by pinning the frame image to the screen:

Click the 'Pin to the screen' icon in the lower left corner

CleanShot Feature Request

If anyone from CleanShot reads this post, a feature to use the clipboard image as a source for the "Pin to the Screen" menu action would save an extra step here.

In Excalidraw, we can now position our overlay frame image and draw a rectangle that follows the same ratio:

Follow me on Twitter for more UI design tips and Excalidraw goodies!