But in our case, they lack the clear outline to crop the screen later. SNEAKPEEKIT (not for commercial use) and Sketchsize (commercial use). There are also two other pages where you can download printable device grids. They include various other devices and distribute it under MIT license which means you can do whatever you want - which is really cool! If you want to create another device, I can recommend the Vector Mockups Library from kkuistore. The grid dots are set to show roughly every 20 px. But while the top part where the device stats are normally shown counts into the screen, we did not include it. The device has roughly the real size (150mm screen diagonal with a 9:19.5 ratio). Also, I had to clean my printer first before it was printed correctly. When you print it, make sure your printer is set to 'not scale' so you keep the real sizes.

If you want to use the same document as you see above, you can download a PDF version here or an Illustrator version here. These are the cropping marks we will need in the second step. Here you see the device and inside a big black square. In our case, we have figma set to 375px width (using the iPhone 11 Pro device).Ģ) We can add some marks that help us crop the picture correctly. This has two reasons:ġ) We can define a size that everyone in the team sticks to. We first need to create some paper device mockups. Import pictures in Figma and set up interactions. Take pictures and make sure they are automatically cropped correctly Create some paper that has the device measures and marks indicating the frames of the device.

The steps to make it work were the following in our case: So it definitely would be cool to have something like that working in figma. Aside from this my team and me are using figma. It is a tool from marvelapp that allows you exactly this: Take a photo of your paper prototype and bring it into marvelapp.īut it was updated the last time in 2017 and did not feel special to work with it. There is an app out there called POP (Prototype on Paper). Figma? Isn't there already a tool for Paper Prototypes?

This post will show you all the steps required. So I thought it would be a great idea to find a workflow in which we can share paper prototypes and even build a quick interactive prototype based on these. But I always had some trouble integrating this into a collaborative workflow, where I need to share those with my team. I often default to a pen and paper when I have to come up with a concept for a new app. Even though we have smartphones and tablets and computers, paper is still amazing and not matched by its ease-of-use for me.

Figma prototype