Hi Sketch folks - feedback re. the resizing constraints area. I am using this gazillion times a day, and every time my brain is fighting to figure out what to click. The dropdown has two or max three values. It’s surprisingly tasking on the brain. Feel like these controls could be brought to the surface. Please, and thank you.
So one reason this is a dropdown, as opposed to a segmented control that doesn’t require two clicks is because this menu can also show additional options depending if it is a stack item or not, and we wanted to keep the UI consistent.
I completely understand your feedback, thank you, but I just wanted to provide a bit of context!
1 Like
Thanks for a quick reply and context, but with three (even four options), I believe this could’ve been a segmented control. Similar to the alignment controls. Perhaps even a vertically stacked segmented control, since I’d definitely want to keep the “icon + text” with these. Just my $0.02.
@ekifol I’m curious about this remark. Are you switching between Relative and Fixed very often, and if so, for what purpose? Or are you using this mostly in stacks?
I’m struggling with these options as well. It’s been a month and I’m still often not sure which one to select, but it should be obvious, especially on symbol frames themselves (their content is easier).
I think I was able to finally wrap my head around Fixed, Fit and Fill, but I think “Relative” showing up only sometimes confuses me a lot. Your documentaiton says:
- Fill. The frame will always size to fill its container. Available in Stacks.
- Relative. The frame will resize relative to the size of its parent.
Fill and Relative seem very similar? Or it’s not clear what Relative does exactly (and I do use it a lot)
Relative is proportional to the layer’s container: so when the parent’s size changes, that layer will resize as well. You can have a relative width/height be any size that you want, you’re in control.
Fill, for layers in a stack, will fill up all the available space on that axis.
Here’s a demonstration:
1 Like
I rarely use stacks since I like to have freedom when exploring different variants. With that - I do like to have resizing constraints of child elements set to either relative or fixed, so when I resize the parent, its contnet behaves as I expect it to behave.
PS. I was just testing some of these constraints settings, and I find the relative vs fixed to be confusing? You might see in the video that my child group is set to ‘fixed’ yet it follows the parent when I resize it. Is this expected behavior?
Fixed layers, like Relative layers, do nonetheless observe the pins you have set. Because you have that layer pinned to the left and right (and top as well, but doesn’t matter here as you’re only adjusting the width), it will keep its distance to the left and right of its parent. In order to do that, its width must change.
So, if you have both ends of an axis pinned, that trumps over the sizing option for that axis.
My recommendation is that for UI design, you mostly want Fixed in combination with pins — which is why that’s the default experience now. Reserve using Relative only for when you want that one layer’s size to be proportional to the parent frame — not the most common, but can happen, like a proportional sidebar.
Side note: we know these names aren’t flawless, but believe me we’ve debated them at length internally, and ended up settling on Fixed and Relative for a variety of reasons that are too elaborate to detail here. But perhaps it may help you to think of them more like “absolute” vs. “proportional”.
Got it. Thanks! This takes some time get used to, but makes sense.
I think these are fine names, adjacent icons look good as well. My original comment above, however, is more about questioning the dropdown for these settings, vs. something as segmented button - as @chris suggested.
Thanks for your answers! 
1 Like
But perhaps it may help you to think of them more like “absolute” vs. “proportional”.
Actually that’s interesting, because people familiar with CSS probably understand Absolute vs Relative very quickly, and if you’re not familiar with CSS then fixed vs proportional are also both pretty clear. But in the end you picked one of each world, which may be partly responsible for why this was hard for me to wrap my ahead around (thanks for the video!)
Well, but absolute and relative mean very different things in CSS, they’re about positioning, and not sizing. In CSS proportionality is expressed with percentage units (which we did consider using for display of Relative sizes).
I guess I’ll get into it, the reason we didn’t go with “proportional” is 2-fold:
- The resizing behavior isn’t actually strictly proportional, if one of the ends is pinned, for complicated but valid reasons. This is also why we didn’t use % units, as we couldn’t guarantee the % value wouldn’t change.
- It’s a bit longer as a word at least in English, and space was a factor.
Maybe one day we’ll make it be strictly proportional and change it and show % values. But the Frames project was already massive in scope and this wasn’t trivial and didn’t make it.
1 Like
I understand, I was just curious what was making you use these options so much, because switching to Relative from Fixed shouldn’t be that common in UI design (and for icon design, we have Graphics which are strictly proportional).
By the way, if you’re looking to change to Fit (e.g. on text) or Fill (only in stacks), you don’t need to use these menus. You can double-click the selection box to fit, or ⌥-double-click to fill. Clicking the edge affects only that axis, clicking the corner affects both.
2 Likes