Showcase your designs with Angle Mockups for Adobe XD

Anyone who has designed an app knows this feeling: you’ve just created a killer design for your app, and just as a photographer might frame their best pictures, you as a designer want to see your designs in beautiful mockups that showcase your work in the best light.

What are angle mockups

In the past, you may have looked at different workflows to create mockups. But the truth is creating mockups is a time-consuming task, and sometimes we have to make the hard decision to skip this step.

The developers of Angle for XD, Design+Code, ran into this problem again and again, so they set out to solve this problem for themselves and for the community. They needed a stand-alone solution to quickly create mockups on any device without leaving the design app where they started their creation.

They divided their solution into two parts:

1. A plugin that helps them copy an Artboard to any isometric shape that can be created using only a shortcut.
2. A collection of vector mockups, illustrated hand-by-hand, including a variety of devices from computers, to smartphones, to tablets and smart watches.

The team has succeeded in making a fully-featured Sketch plugin with hundreds of handcrafted devices, and has helped thousands of designers showcase their products in creative ways, but this time they wanted to take it even further. Last October, they announced the Angle for XD plugin, one of the many plugins that supported the XD ecosystem launch at Adobe MAX. “We’re excited to bring Angle to Adobe XD, where a designer can now design, prototype, and create impressive perspective mockups, all without leaving XD,” said Thomas Wang, developer at Design+Code.

Designers work hard to create compelling user experiences, going to great lengths to make sure every detail of the design is as perfect as possible. So when it’s time to present the design, use Angle to give your design a beautiful frame.

How to use angle mockups

• Step 1: Open Adobe XD.
• Step 2: Select Add-ons > Plugins to launch the Plugin Manager. Search for Angle and click Install.

• Step 3: Create your design with XD.
• Step 4: Get your own mockup ready or download one of our 500 mockups at designcode.io/angle-xd.
• Step 5: Select the screen layer of your mockup, then select Plugins > Angle > Apply Mockup. Or, run the shortcut CTRL + A.

How will this look on a real device?

Download over 500 device mockups and counting

Angle has a huge library of 500 mockups, which includes the new iPhone XS and XR, as well as Android devices, MacBooks, iPads, iMacs, and much more. The design team has also included pre-composed compositions, so there are endless ways to present your designs. The mockups package is currently discounted at 75%, and 85% for Design+Code users.

Conclusion

Check out the Angle plugin for Adobe XD to showcase your designs in perspective mocks. And if you haven’t tried XD yet, Adobe’s complete end-to-end solution for UI/UX design, you can download it and try it out for free.