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 Excalidraw resources:Apple Device Frames
Android & others: coming soon, Follow me on Twitter for updates.
android-device-frames.excalidraw: Coming soon
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!