small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2nqBbR0">Design + Sketch App &mdash; Medium</a> | Sebastian Müller <img alt="" src="http://ift.tt/2o87xx6"></p>
<h4>Or How to Use the Fluid Plugin to Make Your UI Design Automatically Resize to Its Content…</h4>
<h3>Introduction</h3>
<p>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.</p>
<p><img alt="" src="http://ift.tt/2nqxtah">This can be annoying</p>
<p>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.</p>
<p><strong>Just like that:</strong></p>
<p><img alt="" src="http://ift.tt/2o7NpeP">Magic 🙂</p>
<h3>About the Fluid Plugin</h3>
<p><a href="http://ift.tt/1MafWVS">Fluid</a> 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 <a href="http://ift.tt/2o7Mhru">Auto Layout</a> and is actually pretty similar to it but has a different UI and no auto update feature which is fine for me.</p>
<p>But Fluid has a great advantage compared to Auto Layout: You can use mathematical expressions to create <strong>relative margins</strong> 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.</p>
<p>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…</p>
<h3>Starting Point</h3>
<p>Here is your starting point: Download this Sketch <a href="http://ift.tt/2nqxlYa">example file</a>. Then please download the Fluid Plugin <a href="http://ift.tt/1MafWVS">here</a> or better just use the <a href="http://ift.tt/1AmxNWk">Sketch Toolbox</a> and search for it.</p>
<h3>Step 1: Arrange the layers</h3>
<p>The most important thing is the arrangement of the layers. This approach is all based on the so called <strong>“Previous Sibling”</strong>. 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.</p>
<p><img alt="" src="http://ift.tt/2nqxQ4L">Arranging the layers</p>
<p>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…</p>
<h3>Step 2: Make the elements’ positions dependent on each other</h3>
<p>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 <strong>Previous Sibling</strong>). So what you have to do is: Choose the “Text” group, open the Fluid Window and give the “Text” group the following pinning:</p>
<p><img alt="" src="http://ift.tt/2o7X6Kb">Defining relative margin to the Previous Sibling</p>
<p>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.</p>
<p>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:</p>
<p><img alt="" src="http://ift.tt/2nqBPyg">Defining even more relative margins</p>
<p>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:</p>
<p><img alt="" src="http://ift.tt/2o7Tdoq">Making an element stick to the bottom of the group</p>
<p>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.</p>
<p><em>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.</em></p>
<h3>tadaa: Your finished layout should behave like this:</h3>
<p><img alt="" src="http://ift.tt/2nqDFik"></p>
<h3>Conclusion</h3>
<p>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 <strong>vertically responsive</strong>. 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.</p>
<p>If you enjoyed this tutorial, you will like Part 2 which teams up Fluid and Auto-Layout: “<a href="http://ift.tt/2o7Ru2u">How to Team Up Fluid And Auto-Layout to Create a UI Design Which is Vertically AND Horizontally Responsive</a>”</p>
<p>I hope this tutorial helps or inspires you. If so, please share it by simply clicking the ? down there. Thank you ?</p>
<p><em>Oh, by the way. The layout I’m using is the details screen from our free iOS app called </em><a href="http://ift.tt/2nbOR28"><em>MYGIGS</em></a><em>. 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 🙂</em></p>
<p><img src="http://ift.tt/2o7YJaN" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2nqxuLn">How to Make Your UI Design Fully Responsive With Sketch — Part 1</a> was originally published in <a href="http://ift.tt/1OWmBEs">Design + Sketch</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


How to Make Your UI Design Fully Responsive With Sketch — Part 1

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…

Introduction

Top Stories