Published on <a href="https://blog.prototypr.io/design-better-overlays-with-magic-mirror-3-f400d8836282?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> UXchange <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V9YJvL0mhDZ46UENtdZMVg.jpeg">
When you design a website or an app, you must remember to design ALL the screens. When I say ALL I mean even all of those not-so-fun screens that designers often forget about, like the “create an account” page for an e-commerce site, or the empty states for your to-do list app.
Part of the not-so-fun screens family are overlays.
During my first few months designing e-commerce sites this was the typical conversation with my boss (👩🏻):
<blockquote>💁🏻 “What happens when I click here?”</blockquote>
<blockquote>🐸 “An overlay opens and you can choose between option #1 and option #2” (drawing it on a piece of paper)</blockquote>
<blockquote>🙍🏻 “Oh. And where do I find the overlay on Zeplin?”</blockquote>
<blockquote>🐸 “uhm… I will update Zeplin with the overlay ASAP”</blockquote>
If it’s hard to remember designing overlays and it’s even harder to remember to keep them updated. During the life cycle of a product the design will change overtime and ever if you remember to change the overlay, you also need to update what’s BEHIND the overlay.
There are a couple of ways to keep the background updated, but only one gives you the chance to do it with just one click. So, go ahed and tell me, Davide, how do I keep it updated? The answer, my friend, it’s two wrong methods away.
<h3>Flatten Selection to Bitmap</h3>
You duplicate the artboard, select all the layers and you flat the selection to bitmap.
Now you have a big bitmap image, and ok, it’s super light, but you can not edit it anymore. To update it you need to do this action again and again and again until you get the final sign-off on the design (or until you forget about it entirely).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lPHY-YRh10mKMA_8XEi1ZA.jpeg">
<h3>Copy all the design in a folder</h3>
You duplicate the artboard and you compress all the layers in one folder that we will name it “background”.
Now you have a huge folder and, ok, you can edit it but… you can understand that it’s long and pointless. Let’s forget about this method.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FW5DolkDNuDDi4EJUfYK5Q.jpeg">
<h3>Use Magic Mirror 3</h3>
Everyone knows about Magic Mirror 3 and we are all huge fans because it allows us to create stunning mockups that make our projects shine. In the few weeks I learned to use it to keep my design updated in just one click and I am happy to share with you a tutorial.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FP7V099jNsio%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DP7V099jNsio&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FP7V099jNsio%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/59adb2eed436fceed4504866ff89e8c3/href">https://medium.com/media/59adb2eed436fceed4504866ff89e8c3/href</a></iframe>
<h3>Using Magic Mirror 3 (Listed Steps)</h3>
If you hate video and just want a list of steps to follow, here you go:
<ol>
<li>Select the artboard and enable Magic Mirror 3</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*zrnzF6stSBbiXhSTMhcxlA.gif">
2. Duplicate the artboard
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*CRX9XIHS0np3IJIlXWtwGg.gif">
3. Remove all the layers inside of it
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*YuWFjur6e1qvxh5G8-LAdA.gif">
4. Create a white rectangle as big as the artboard and rename it “background”
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*Ep3grRCbekDpWraUn69bdw.gif">
5. Apply Magic Mirror 3 to “background”
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*0MpUZAE43C0tIz4WuXUMVg.gif">
6. Add a new black rectangle and set its opacity to 70%
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*RvHu2ycDE35sTA0bUpiMGg.gif">
7. Add your overlay
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*mTcozRy5EFiH9odl2j_vNQ.gif">
But wait, now it’s review time! After a one-hour-meeting with you boss you go back to your desk with some changes to do. AND YOUR BOSS WANTS EVERYTHING READY IN 5 MINUTES! THERE IS NOT TIME TO LOSE! UPDATE YOUR DESIGN! DON’T FORGET YOUR BACKGROUND!
8. Change your design
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*DQd_3bzWHQqZuy3Uj3apHA.gif">
9. Select “background” and click on “update” in the Magic Mirror 3 panel
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*bM9ikzFWoX0VkUcqDBiujQ.gif">
<h3>Easy, huh?</h3>
I discovered this trick while I was playing around with Sketch and from that moment on I can’t live without it!
<h3>Well… you can also create a symbol…</h3>
While I was writing this article I found out that there is a fourth method to keep your design updated: using symbols.
You transform the entire page into a symbol, you can use the symbol as the background of the overlay, so when you make some changes to your design you have immediately the other pages updated.
I tried it and seems to work, I would like to know if some of you are using this method and if does the trick.
<iframe src="https://cdn.embedly.com/widgets/media.html?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQ_YEQbdwQaA&amp;src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FQ_YEQbdwQaA&amp;type=text%2Fhtml&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/00f51b2dfa90c19aa5ecb76a81658998/href">https://medium.com/media/00f51b2dfa90c19aa5ecb76a81658998/href</a></iframe>
And you? How do you keep your design updated?
Let me know with a comment or writing me an email at davide.pisauri@gmail.com or on <a href="https://twitter.com/ilpecoranera">Twitter</a>.
I hope you enjoyed this article and that it was been useful for you.
Don’t forget to clap 👏🏻 !
Daje! Davide Pisauri
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f400d8836282" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/design-better-overlays-with-magic-mirror-3-f400d8836282">Design better overlays with Magic Mirror 3</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Design better overlays with Magic Mirror 3

Top Stories