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.

This is Auto-Layout. Gif from the official guidelines.

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.