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.
Here are the links to the editable Excalidraw sketches:Apple Device Frames
Android & others: coming soon, follow me on Twitter for updates.
- Apple Device Frames (sketch)
- Apple Device Frames (library)
android-device-frames.excalidraw: Coming soon
- 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:
From Figma, we create a frame for a given device, say an iPhone 8, with a vivid background colour:
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:
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!