How to Make Your UI Design Fully Responsive With Sketch — Part 2
Or How to Team Up Fluid And Auto-Layout to Create a UI Design Which is Vertically AND Horizontally Responsive…
Introduction
In Part 1 you learned how to create a UI layout which automatically adapts its size to vertically to its content. You created a content-based resizing UI where you can play with length of texts and heights of elements without having to move any element manually. That will make you ready for client requests like:
“Make the hero image smaller and show me your layout with very long text because I know no one on the internet likes large images and everybody likes to read a lot of text. You have two minutes to do that.” And you know what you can answer after reading this article?
“I’ll do it in one” ;)
After this second part of the tutorial you will be prepared for another client request which probably sounds like that:
“Can you show me how this works on iPhone 7 Plus. And what does it look like on the iPad? Do we have to create a specific layout for that?”
And your answer will be just a few clicks away.
This tutorial will show you how to make your UI design ready for different screen widths with the help of the Auto-Layout Plugin. In combination with the Fluid plugin you will create a flexible and fully responsive UI design.
About the Auto-Layout Plugin
The pretty new kid in town when it comes to responsive design is called Auto-Layout. It’s a Plugin for Sketch which allows you to define layout elements in a way that they respond to different screens widths. No matter if the element is supposed to have a percentage based padding, pixel based padding or centered alignment. The auto update feature makes it even more amazing.
Besides that it has an intuitive interface and well-made videos tutorials and documentations. Due to the fact, that there is already much information and many tutorials out there I don’t want to go too much into detail. So for more details please have a look at the official anima Auto-Layout website or check out the official Auto-Layout Medium page.
Starting Point
Here is your starting point: Download this Sketch example file. Then please download the Auto-Layout Plugin here. Or even better just use the Sketch Toolbox and search for it.
Step 1: Setup your Design With Sketch’s Resize and Pinning Options
This step is essential to make your elements scale able without breaking or squeezing them after changing the art board width. Since there is already a bunch of tutorials (e.g. Bohemian, Francesco Bertocci) with this topic out there I just quickly show you what’s important. Sometimes it’s a bit tricky especially if you are using symbols within symbols within symbols of symbols…
The following screenshot shows you exemplary how to define the resizing option of each element inside a group or symbol. This is the essential base for the second step.
All right. You did that? After setting up all the correct resizing option your elements should behave like this:
Step 2: Make your Layout Respond to Different Screen Widths Using Auto-Layout
Your layout is now ready to become responsive using Auto-Layout. You’ll now define how the elements behave on different screen sizes. Let’s start with the header image. This is supposed to have a width of 100%. Select the “Header” group, click on the percentage icon and make it 100% wide.
Next is the “Text” group. This is supposed to have a margin left and right of 24 px. So just select the folder and click the checkbox for the right and left margin and type in 24 (if it doesn’t have that position already).
Now you want to achieve that each text layer inside the “Text” group keeps its position and width of 100%. Since layers are always pinned to its parent you have to give each text layer inside this group a margin of zero.
Now this is the principle to define all the elements. Please repeat these steps for all the other groups and layers.
When you’re done it should look like this:
Looks pretty cool at the first sight. But on the second sight you probably see some things you would like to optimise. For example the emerging empty space above and beneath the layers. That is because you are not (yet?) able to define relative margins between elements. The elements change their size but keep their x-positions.
Another weird thing is the chevron besides the band name “Modeselektor”. No matter what kind of pinning I define it just does something I don’t get.
And sometimes the text labels overlap while scaling the artboard up. Seems to be buggy, I don’t know. What I know is there is a way to fix that. That way is called Fluid.
That’s why I made two tutorials and and since I know you all thoroughly worked your way through Part 1 you can just click Update on the Fluid Toolbar and everything’s gonna be fine:
That’s it. You Have Created the Most Flexible App Design, ever :)
You are now able to dabble around with the image heights, text-lengths and artboard widths. Make it bigger, make it smaller, add something, remove something. No need to be afraid of change requests anymore :)
Conclusion
Auto Layout is an amazing plugin. Still you’ll find some bugs and you’ll miss some features here and there while using it. Due to its auto update feature it can suddenly break you layout by changing the group order or layer properties. But the good thing is: There is Fluid. And with teaming up Fluid and Auto-Layout you can complete the whole responsive design workflow by combining two plugins instead of complaining about one.
I hope this tutorial helped or inspired you. If so, please share it by leaving some 👏 down there. Thanks for reading 🤓
Oh, by the way. The layout I’m using is the details screen from our free iOS app called MYGIGS. It’s an app two developers and I created in our free time without any investors or budget. It shows you concerts and clubs nearby and other cities in a quick and easy way. It’s free, just grab it :)
