Sketch: Responsive, “focusable” and swappable images using nested symbols and masks.

Sketch: Responsive images using nested symbols.

Francesco Bertocci
Jun 15, 2017 · 6 min read

If you, like me, don’t like to do repetitive tasks, read on. 😀

This technique improves on these current workflows:

– You start your designs with one image (low res, un-retouched, unlicensed, etc…) and you (or someone else 😈…) want to then swap it everywhere with another one without having to do it manually.

– You want to make sure the image is always rendered and exported at the resolution possible even if you are cropping it (for example you used an image for a layout and now you purchased the high resolution image)

– You want to control the “focal point” as in the portion of the image that will always be visible, no matter how you crop it in different ways for different uses or breakpoints.

Works only with:
Sketch 44.1+
Anima App’s AutoLayout plugin 0.7+

In a rush? 👉 Download the Sketch file

Sketch 48 UPDATE! (December 11 2017):

You can now achieve this without using Anima’s Autolayout plugin (Although I still recommend it) and you can just use the pinning properties within Sketch.

Fix Width and Height for the masked image. The mask must instead be pinned to the borders of “image with mask”.

The setup is fairly simple…
You need a symbol to contain an image, and a mask, and the proper pinning properties via AutoLayout.

– Start by creating a square symbol (say 1000px by 1000px, it can be any dimensions, but keep it square as it will force you to decide a focal area that is a square. Make the symbol big enough that you can tell if the resolution of the image is high res enough for your needs). Also, The reason for square symbols is because symbols only allow to override nested parts of themselves with other symbols of the same dimensions.

1000px x 1000px (big enough for the standard use in your project, mobile project? Try 320p x 320px)
One nested symbol with mask over a responsive image – also a symbol. And images with various focal points (the green dotted line represents the “focal area”)

– An image of your choice (the image should be bigger than the symbol itself, bleeding past its margins)
– Above the image add a “focal area” (this is really just for reference but it’s good if you are following along, and you’ll want to hide it once you start designing and definitely before exporting). The focal area needs to match the symbol’s size dimensions.

The green dotted line represents the “focal area”

– Insert the image (symbol with the focal area set) in the “image with mask symbol”
– Add a mask of the same size as the symbol and make sure to mask the symbol “image with focal point”

Pin the symbol containing the image to the center.. et voilà… the image/symbol is now masked! :)
Pin the symbol/image to the center of the mask
With these pinning settings the mask will always match the dimension of the symbol that contains it.

Insert the symbol “image with mask” anywhere you need to use a responsive image. :)

Insert the symbol “image with mask”
Drag it and resize it according to your needs

Please note: Once you are familiar familiar with the structure of the symbols feel free to rename the symbols with something that makes sense to you 😜

Override time!

Replace any of the images by overriding any of the symbols with another image! 😀

Override the responsive image with another “image with focus” — notice that some are horizontal images, some vertical, but they all have the same size focal area.

If you want to learn more about AutoLayout I strongly recommend watching this Sketch Together video on simulating flexbox inside Sketch by the awesome Pablo Stanley!

Important:

Downside to this approach (and I realized more then halfway through the tutorial 😡…) is that with the settings shown above the images will be responsive “vertically” but won’t behave as expected when scaling “horizontally”.

👉 Add top and bottom pins to make sure the images will be horizontally responsive. Why is this important? Glad you asked …well the majority of the images used on the web tend to be horizontally cropped.

Add top and bottom pins to make sure the images will be responsive horizontally

You can then swap a vertically responsive image/symbol for an horizontally responsive one. That’s pretty neat!

Swap a (vertically) responsive image symbol for an horizontally responsive one. 🐛 🚨 -> There’s a little bug… the nested symbol override is lost when swapping symbols 😟

In the file you’ll file below you’ll find both setups.

👉 Remember:
The symbols containing the images MUST all be the SAME size to be “swappable”. Think of this as a way to have your images all organized in a “library” which is just a subset of your symbols.

This is key when you want to make sure that only certain symbols show up in the overrides dropdowns. My friend Jon Moore talks extensively about other ways to nest symbols and use overrides in his UX Power Tools post (and tons of other tricks!)

When you have familiarized with the way the focal area works or when you are ready to export, you can just edit the symbol and hide the focus area/dotted line (🍎 + SHIFT + H) and it will disappear from all your responsive images. 💨

When ready, turn off the dotted line.
Had a similar reaction? :)

If you learnt something from the post — please like ❤️ and share and ideally leave me tip 😜 – it took several ours to write this post and create the file.

Get the Sketch file:

  1. Download the .Sketch file
  2. Edit the symbols and see how they are set up.
  3. Change images and focal points and see how they change when you resize them in the main artboard.

To Download the .Sketch file – name a fair price:

– 💵 WOW! Download for $1

– 💰 Awesome! Download for $3

– 🤑 Dope! Download for $5

Go make awesome stuff! :)

Btw, you can do something similar for icons in your library and you can even tint icons by overriding icon colors. Read more about tinting icons in Sketch.

If you have any tips on other ways to use smart symbols to achieve this effect shoot me an email at Francesco@FreeAndWilling.com or add a comment below. I appreciate your feedback!

If you are in NYC and are are into Sketch, Principle or InVision and prototyping in general make sure to join Design & Prototyping meetup or Facebook group or check out the Sketch workshops.

Thank you :)

Francesco

Design&Prototype

Design and prototyping tools and create user experiences…

Design&Prototype

Design and prototyping tools and create user experiences for Mobile, Desktop, Wearables and beyond! I started this group to meet other prototyping enthusiasts and learn from each other.

Francesco Bertocci

Written by

Design Advocate & Ambassador at Sketch / Product/UX/UI Designer, Prototyper & Founder of Free&Willing https://FreeAndWilling.com/fbmore

Design&Prototype

Design and prototyping tools and create user experiences for Mobile, Desktop, Wearables and beyond! I started this group to meet other prototyping enthusiasts and learn from each other.