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…

Sebastian Müller
Mar 21, 2017 · 6 min read


About the Auto-Layout Plugin

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

Starting Point

Step 1: Setup your Design With Sketch’s Resize and Pinning Options

Resizing options

Step 2: Make your Layout Respond to Different Screen Widths Using Auto-Layout

Giving the header image a width of 100%
Giving the “Text” group a margin of 24px

That’s it. You Have Created the Most Flexible App Design, ever :)


Design + Sketch

The best collection of articles, tips, tutorials, and…