Sketch Resizable (Smart) Symbols for Responsive Interfaces and how they can speed up your workflow.

The Sketch file below was shown at a prototyping event in NYC. I’ll be showing how to set up the file at this event soon.

EDIT 1/18/17: Since I wrote this post in September I started playing with a plugin by

Anima App

called “Auto-Layout” that is complementary to the methods used below for smart symbols. It can be applied to any element and it is really really powerful, even if you are just designing pages of different heights, not necessarily also widths.

Auto-Layout – plugin by Anima app

EDIT 1/21/17:

Anima App

just released an update that allows to simulate in Sketch also Flexbox or iOS Stacks! I made a quick video showing what’s possible below:

If you are into Sketch, Principle or InVision and prototyping in general make sure to join the meetup in NYC.

“Designing for Responsive UI’s should not be complicated” — and thanks to Sketch Resizable Symbols now it isn’t!

Sketch Resizable Symbols
The purpose of the file below is to illustrate how Sketch Resizable Symbols work and how they can be used in this case to design responsive interfaces.

Resizable Symbols (left) and Responsive Layouts (right) — download here

I will try to update the file over time when new features are added to Sketch that improve this process. Dig into the file to see what elements have been set to Stretch, Pin, Resize or Float. The options can be set for folders and symbols.

For responsive design it seems that the “pin” option is the most frequently used. Shortcut is “Control + 2” (use 1, 3 and 4 respectively for the other options).

Stretch, Pin, Resize or Float options for folders and symbols

1. Download the file.
2. Edit the symbols and see how they are set up.
3. Resize them in the layouts and see what happens.

If you have any tips on other ways to use smart symbols for responsive UIs shoot me an email at Francesco@FreeAndWilling.com or add a comment below. You can find the official guide to symbols here.

If you learnt something from the file or the event — pls like the post and share.

Thank you :)

Francesco
@fbmore
@FreeAndWilling

Francesco Bertocci, UX/UI Designer & Founder

At the same meetup Ian Cox also demonstrated responsive forms and atomic design methodology within Sketch. His files can be downloaded below.

Sketch File:
https://drive.google.com/file/d/0B3mS4iEToLCOb1YtQlpEaE02T2s/view?usp=sharing

Here’s a short video showing how everything works:
https://twitter.com/i_cox/status/760935726708101120