Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

1. Create the core image template as a symbol

– 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.

Image for post
Image for post
1000px x 1000px (big enough for the standard use in your project, mobile project? Try 320p x 320px)
Image for post
Image for post
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”)

2. Lay out in the square symbol:

– 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.

Image for post
Image for post
The green dotted line represents the “focal area”

3. Create another symbol of the same dimensions as the image:

– 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”

Image for post
Image for post
Pin the symbol containing the image to the center.. et voilà… the image/symbol is now masked! :)

4. Pin the symbol/image to the center of the mask

Image for post
Image for post
Pin the symbol/image to the center of the mask

5. Pin the mask to resize as the parent symbol is resized

Image for post
Image for post
With these pinning settings the mask will always match the dimension of the symbol that contains it.

6. Time to use your swanky 💎 new responsive image!

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

Image for post
Image for post
Insert the symbol “image with mask”
Image for post
Image for post
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 😜

Image for post
Image for post
Override time!

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

Image for post
Image for post
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.

4b. Pin the symbol/image to the center of the mask AND to the top and bottom of the symbol

Image for post
Image for post
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!

Image for post
Image for post
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. 💨

Image for post
Image for post
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:

Image for post
Image for post
  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…

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store