Realistic Mockups

Angle 2

Angle2 is one of the most complete mockup isometric libraries on the web. You can find more than 2000 devices including mobile phones, computers, smart TVs and smartwatches. The Angle library is compatible with Sketch, Figma and Adobe XD. It has a native plugin for each one of the design tools.

LS graphics

LSGraphics is an extensive library of isometric devices mockups. You can find realistic and clay versions compatible with different design tools like Figma, Sketch and Photoshop.

Rotato

Rotato is an exciting tool. You can make 3D mockups or promo videos in just a few minutes. It is very helpful for presentations, portfolios, or app store images and you can export them directly to .mp4 or PNG.

Vectary

Vectary is a web based 3D tool. It allows you to create 3D elements or mockups and then, bring the mockups right into your design process. It works seamlessly with Figma and Sketch.

Artboard

Artboard is another cool mockup library; you can use its variety of mockups and bring them to Figma. Its Figma plugin lets you create mockups based on different categories, materials, and colors.

Mockuuups

Mockuuups Studio is a neat app that offers you a library of pictures and mockups which helps you create a realistic mockup in none-time.

Applying screens to realistic mockups

We will provide you with a specific mockup for this exercise, but if you'd like to try out some other mockup, feel free to download the sample library from the Angle site.

For this exercise, we will work with Figma, but you can use your favorite design tool. At D+C, we have developed a plugin for Sketch and Figma to help you place your design in different mockups. To download the plugin in Figma, go to Community in the dashboard and in the search field, type Angle Mockups. Once you are on the page, click on Install.

Once you open the exercise file in Figma, you will see four different mockups; an iPhone, an iPad, Apple Watch, and a MacBook Pro. We will populate each of these mockups with the other frames we have.

To apply the frame, select the Mockup layer where you would like it to be applied. Then, go to the tab bar and click on Plugins > Angle Mockups > Apply Mockup.

Select the layer where you would like to use the plugin. In the App Design Frame dropdown, select Course Mac in 2x and Best Quality. Then, click Apply Mockup.

Let's repeat the same process for the iPad. Select the layer called Screen inside the iPad mockup, then go to plugins and select the Angle Plugin. From the dropdown, choose Course iPad in 2x and with the best quality. Finally, hit Apply Mockup, and wait a few seconds so the design can be applied to the mockup.

Finally, let's repeat the same process for the iPhone and the Apple watch. Make sure that when you are applying the plugin, choose their respective frames from the App Design Frame dropdown.

Conclusion

Some years ago, creating mockups for presentations was a time-consuming task. With all these new tools, this process has become more efficient, helping designers and developers focus on other priorities.