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.

10:47FeaturesPricingCritical Nav linksNon-critical NavLorem Ipsum,dolor sit ametTaglineProductscreenshotInvitationto scroll

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.


Here are the links to the editable Excalidraw sketches:

Apple Device Frames

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


Making Your Own Frames#

We are going to use the following tools:

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:

CleanShot > Open from Clipboard

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

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!

François Best

Freelance developer & founder

Edit this page on GitHubDiscuss on Twitter