Design + Sketch App — Medium | Bunin

Sketch Tutorials

Learn how to effectively use mockups using the power of nested symbols.

This is part of Frames for Sketch — series of short tutorials about best practices we used to make Frames Kit truly useful tool. We’ll cover on how to build and use mockups with a fine demo example.

Use the overrides panel to quickly switch between devices assets.

What problem solves?

Ever faced with the need to prepare high-quality mockups showing off the best parts of your product for the landing page? This part of the process is always forcing you to sort through a large number of different design variants over and over again, manually replacing the devices, each time adjusting the picture to fit the newly chosen mockup. Yes, we’ve been here too, and we know how it feels and how to improve this process.

How will it benefit me?

This simple technique can help you with this:

1. Will save you tons of time, and eliminate the need for constant navigation between different tabs and files.
2. Will allow you to generate a lot of different design mockups options by literally creating them on the fly.
3. Helps you to keep your sketch file clear and consistent, images will always fit the screen size of your device automatically.

What should be done?

That’s a good question! First, you need to download the Demo. After this, we will learn how to organize symbols within the file.

How to make it work?

Okay, so what’s the recipe for this technique, let’s go through the main components which are included into the iPhone mockup.

• Screen — Use it to swap between wireframe and photo screen states of any device. The photo state is set up as fill image.
• Device — Allows you to quickly swap the mockup style by changing the device iPhone assets. Each asset represent a specific appearance of the device, which is stored as a 3x device image.

To make the magic happen you simply need to put the screen symbol above the device screen and make sure all of you devices screens have the same size. You don’t even need to set up any specific resizing option for your mockup to scale it.

Always remember to put a high-quality image as you device assets, this will save you the need to bother about the different device layers and will make your sketch file cleaner.

Speed up your work with photos

You can speed up your work with photos, by simply using this techniques:

Select the mockup photo which you want to override, and drag a new picture into image window next to where it says “Choose Image”.

You can also paste images from your clipboard, simply by selecting image window and using CMD+V to paste into it.

If you are looking for well designed devices mockups, we would like you to check this well-crafted products that are compatible with sketch.

• Facebook Devices — (Free)
• Device Mockups — (Free)
• Hero Mockups — (Premium)
• Angle mockups — (Premium)

Summary

Try it by yourself and see how one simple technique can make your life much easier while working with mockups and any other promo content for your project. And don’t forget to…

• Download the freebie above!
• Grab the full version of Frames design system to use this component at maximum, and tons of others just like this one.
• Share this tutorial with your friends on social media.
• Follow Robowolf on Twitter for more awesome freebies and tutorials.

A better way to use mockups in sketch was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.