Mobile Device Frames For Excalidraw

François Best • 11 June 2020 • 3 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.

TL;DR#

Here are the links to the Excalidraw resources:

Apple Device Frames

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

Mirrors:


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