How to Make Your UI Design Fully Responsive With Sketch — Part 1
Or How to Use the Fluid Plugin to Make Your UI Design Automatically Resize to Its Content…
Stop✋. Don’t waste your time by reading this tutorial. You can scroll down and scan the article. The concept still makes sense but the steps don’t work anymore because unfortunatelly the essential plugin for reading this article Fluid is not maintained anymore by the developer. But fortunatelly there are alternative ways to make your UI design automatically resize to its content: Smart Layout works pretty good. IMO not perfect since this is just applicable to symbols. And Auto Layout is still also a pretty good plugin which does what I did here with Fluid.
So, no need to cry. Just keep on making awesome responsive UI design.
Thank you all 🙏 for the 1,5 k claps on this article. One day I will write a new tutorial regarding this topic. Until then you can improve your line height skills by reading this:
Introduction
I think you all know the following situation: You create a design for a one pager or an app and you have to change the height of the second module because you added text or an element. On top of this you want to change the header image size. What happens? You have to have in mind all the margin values between each module, select them and move them up and down accordingly to the adjusted module heights…
No, I don’t like that! I’d rather like to hit “Update” and all the elements move automatically according to the changes. And that’s what can be done with the Fluid plugin.
Just like that:
About the Fluid Plugin
Fluid is a very cool plugin and I’ve got the feeling it’s very underestimated since I can’t find many articles or tutorials about it out there. But I like it very much and it’s essential for my workflow. It was there before Auto Layout and is actually pretty similar to it but has a different UI and no auto update feature which is fine for me.
But Fluid has a great advantage compared to Auto Layout: You can use mathematical expressions to create relative margins between elements. That means no matter how long the text or how high the image is set, all the elements move vertically according to the changes you make.
An amazing feature which might sound quiet technical at first. But trust me, it’s not that complicated and you’re gonna save loads of time with this feature. Let’s do it…
Starting Point
Here is your starting point: Download this Sketch example file. Then please download the Fluid Plugin here or better just use the Sketch Toolbox and search for it.
Step 1: Arrange the layers
The most important thing is the arrangement of the layers. This approach is all based on the so called “Previous Sibling”. You have to arrange the layers from top to bottom. Since layers in Sketch (as well as in Photoshop) in the Layers Inspector are placed from bottom to top while the visual design is arranged from top to bottom, it’s a little bit confusing but you get used to it.
So after arranging the layers from bottom to top (reversed according to what the layout shows you, got it? ;)) you can start to create some rules…
Step 2: Make the elements’ positions dependent on each other
At first you want to have a flexible image height, so that everything below the image moves up and down accordingly to the image height. To achieve that these elements need a relative margin to the image above (=the Previous Sibling). So what you have to do is: Choose the “Text” group, open the Fluid Window and give the “Text” group the following pinning:
That means the “Text” group moves exactly below the “Header” group (that’s the 100%) plus a margin of 24 (that’s the 24). Just dabble around with the values and you will understand.
Then you hit Copy on the Fluid Window and do the same for the layer groups below. Repeat that also for all the elements inside the groups like this:
Next we want the bar with the date (German date, sorry:) to stick to the bottom of the image, no matter what it’s height is. To achieve that you have to give that bar the following pinning:
Once you set up all the layers and groups which could probably be influenced by changes above or below each other you have a layout which is vertically very flexible. What means: Less clicking and less time eating repetitive layer movements.
Note: In this tutorial we defined margins for every little layer to create the most flexible layout the world has ever seen :) Obviously that can become very complex and confusing. So what I mostly do is to create a pinning between the main groups or modules. That’s very quick and easy, time saving and doesn’t become very complex at all.
tadaa: Your finished layout should behave like this:
Conclusion
Although Fluid is such an amazing and powerful plugin it has some little bugs and confusing behaviors here and there. That’s why I use Fluid mainly to make my layout vertically responsive. It’s then content-based resizing and you can play with length of texts and heights of elements without having to move any element manually. For different screen widths I recommend sticking to Auto Layout. Combining both of it will be covered in the Part 2.
If you enjoyed this tutorial, you will like Part 2 which teams up Fluid and Auto-Layout: “How to Team Up Fluid And Auto-Layout to Create a UI Design Which is Vertically AND Horizontally Responsive”
I hope this tutorial helps or inspires you. If so, please share it by simply clicking the 💚 down there. Thank you 🤓
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 :)
