Call for feedback: “Auto Layout”

Suggest an idea Calls for feedback
1

Hi everyone! :wave:

As you might’ve seen on our socials and website, we’re working on a new layout feature similar to Figma’s “Auto Layout”, XD and Framer’s “Stacks”, and Penpot’s “Flex Layout”. No, we haven’t yet decided what we’ll call it, but that’s not important right now.

I’m opening this thread to hear from y’all here in the forum. We want to know your wishes and expectations for this feature, and have a chance to ask you questions about it.

Here’s some prompts to get the conversation going:

  • What features and properties are non-negotiable, period?
  • What’s something you think that could live without? At least for a while?
  • Is there something that one of these apps does well that you think we should too?
  • Is there something that none of these apps do but you think we should?

Before passing it on to you, I want to be upfront and honest about a few things:

  1. We won’t model it 1:1 on CSS’s Flexbox. We don’t want to follow any one platform’s implementation too closely but instead the principles they all share: to provide an automated and composable stacking layout feature that gives designers the ability to define systematic rules, but also some flexibility within those rules.
  2. We won’t be doing everything. We’ll use your feedback to help us shape the feature, and our goal is to provide loads of depth, but not overwhelm with complexity. Finding this balance is hard, and may require leaving out specific things you’ve requested.
  3. It’ll take time to go all the way. We’ve got a small team on this (me, 2 engineers, 1 QA), so we won’t immediately reach the level of depth we’re aiming for. But our plan is to give you something earlier and keep on iterating, rather than waiting until it’s “done”.

We’ll be sharing occasional updates here about how the feature is shaping up, and we also aim to be honest and transparent with you about anything that might not make the cut.

That’s it from me! Please give us any and all feedback, and thanks for being here.

16 Likes
4

Reflow, Horizontal and Vertical Gap, Horizontal and Vertical alignment, Min and Max width come to mind. Also the ability to nest layouts to create complex responsive layouts.

2 Likes
5

One thing I appreciate from Smart layout (From my limited experience with it) is the lack of messing around when it comes to having elements ignore spacing. Figma allows you to mark an object as absolutely positioned and Sketches implementation should too from day one, otherwise it’ll be kind of a downgrade from smart layout.

Space between in both X and Y in addition to padding. You’ve stated you don’t want to replicate Flexbox 1:1 (I personally would find the complexity tradeoff worth it, but YMMV) but space between in both dimensions in addition to padding is a must.

As is wrapping with a fixed width container. (See screenshot)

CleanShot 2024-07-18 at 14.29.20
CleanShot 2024-07-18 at 14.29.201047×930 27.1 KB

Would this have the same apply idea as smart layout? (FWIW, this should all be an expansion/replacement for smart layout) So instead of the Figma nested frame approach (Which I personally don’t love) would this be something you would apply to groups?

FWIW I think Penpot’s approach is probably the best out there. And yeah, it’s basically just flexbox, maybe with minimal simplification, like not having to set absolute/static elements for example and just have “Fixed position”? Abstract away the CSS semantics whilst representing all of the functionality would be my goal if I were designing this feature.

Personally I wouldn’t arbitrarily simplify the tool when most Figma users envy Penpot’s execution. Simplicity goes beyond the tool itself. Part of the reason why I’ve so far struggled with Smart Layout is that its simplicity actually makes it harder to reason about. For me at least.
The overall industry seems to go closer to direct representation of CSS, not minor UX gains that tradeoff a lot of flexibility.

To flip the argument, my frustration with Auto layout in Figma is how its abstraction leads to brittle layouts, as someone who knows CSS, it turns me off from building more complex layouts in Figma, given how finicky they can end up. I just drop tools, leave it as a doodle and finish the job in actual markup - this isn’t true for everyone of course, I can only speak for myself here.

3 Likes
6

Stacks are must have. I love SwiftUI model, so having vertical, horizontal and z stacks would be critical.

4 Likes
7

Hi @Ash!

Not like Smart Layout, and instead like every other layout engine I mentioned. Enabling this layout mode on a group will only lay out the group’s child layers. If you want those layers’ contents to also be laid out, you’ll have to enable layout on them. What don’t you love about it? What would you rather see instead?

What specifically makes it the best?

Can you speak more about this brittleness / fiddliness? Feel free to use CSS terms if you want to explain, I was a frontend web designer and developer for many years.

1 Like
8

Hi @mromanbanks! Why Z stacks in particular? What would that look like in a design look like Sketch? Isn’t this easily accomplished by grouping, laying layers atop each other, and using resize constraints?

9

@paulozoom simply make it intuitive. Launch it, Ask for feedback, Listen to our feedback and revisit it frequently until its :ok_hand:t4:

*and ship it with a bunch of examples and tutorials.

1 Like
10

Ah, I think we have some crossed wires here, what you’re describing is what I had in mind. The thing I’m referring to not liking is the differentiation in Figma between a nested frame and a group. I prefer Sketches approach of an artboard being an artboard and groups can have additional behaviours, rather than the Figma approach of converting a group to a frame is all. Make sense?

Being effectively 1:1 functionally with Flexbox, I know this isn’t your goal, I think I just disagree and would rather see something very close to the behaviour of Flexbox with some abstractions, rather than something fundamentally more limited. I don’t know if the complexity tradeoff will be worth it for everyone, you know the Sketch userbase better than me of course.

I think the brittleness might just be inherent to the idea of auto layout? IDK, what we’re taking about here is really a metaphor for a more flexible system (Pun not intended) With more complex layouts you constantly run into elements not collapsing correctly, resizing wrong, just general funky behaviour. With Figma you don’t have the same visibility on the state of the component as you do with CSS. You end up clicking and isolating nested layouts and fiddling until it works. I guess what I’m saying is, any approach I would take in designing this feature would prioritise visibility of the state of the layout.

If I have something like this (Gonna use tailwind here)

<div class="flex">
  <div id="first" class="flex">
    <div id="child-1" class="grow"></div>
    <div id="child-2"></div>
  </div>
  <div id="second"></div>
</div>

I can pretty quickly see what the first item in the nested flex is doing. I’d love some facsimile of that visibility in an auto layout type system.

1 Like
11

Got it. We’re starting with groups and our plan is to look at artboards at some later point (which are different in how they’re sized). No plans for the moment to introduce a different container type that this layout mode would be specific to.

We’re on the same page here: our aim is not to go all the way there but a good chunk of the way, and in a way that’s familiar to designers and existing concepts in Sketch. But true 1:1 parity would have us go down into aspects like numeric values for growth/shrink, the concept of flex-basis, amongst others, which I’m not keen on.

I totally get what you’re after here, it’s a good point. I’ll take this feedback with me and explore what we can do to give people clarity and awareness about the state of the layout when they’re working on it. Thanks for the input!

12

Oh yeah, totally with you here. You have to draw the line somewhere. I think like “grow” would be cool, just mark something to fill the remaining space, and Figma does a good job of representing flex direction.

flex-basis is an excellent example of a place to stop

2 Likes
13

No particular reason for Z stacks. I’m least confident in this suggestion and its usefulness depends on the actual feature implementation. It might help to avoid the need for “absolute positioning” (as in figma), for example.

14

Whatever you do, please allow groups to have fill, stroke, roundness etc. so we don’t have to use shapes in the background like we do today with Smart Layout. That would already be a huge step forward. Good example is building a button in Figma - I always start from a text layer, make it auto layout and then add padding, margin, roundness, fill etc. - that should be possible in Sketch too.

I also think that, while css flexbox is pretty good, design tools maybe need a more general approach. Not all design is done for websites and using flexbox for any layout feels a bit wrong. As mentioned, some design will be implemented using SwiftUI and its stacks and so on. I would even go as far to say that I find mimicking exactly the implementation might not be the best approach for a design tool, designers spend way too much time obsessing over it. I still believe design tool should allow more freedom to explore and less rigidity - and the rest should be left to good communication and process with developers. Designers still need tools that make creating all the variants, responsiveness, interactions and many other things as quick as possible, so that should imo be a guiding principle for design tools.

13 Likes
15

Stayux

Hi, Sketch team.

Just giving my general perspective. In summary, you have to be close to Figma UX for auto layout, but implement in the direction of Penpot app with Flexbox and CSS Grid.

I hope this is the moment in which you revive your glory and attack other problems. The biggest flop of Figma is variables implementation as an alternative of Design Tokens.

For a reference, you can check the work of Tokens.studio. (ex Figma Tokens). The DS’s crowd is crucial to be involved.

1 Like
16

Hi there!
Long time Sketch user here (since Sketch 3!) that has started using Figma instead 1–2 years ago exactly because of Auto Layout.

Table stakes features are:

  • Stacks*
  • Hug/Fill width and height
  • Uniform gap between the items
  • Padding/Inner spacing (the thing I’m using Auto Layout most for day-to-day, to quickly add or adjust uniform padding without having to manually reposition half my UI)
  • Horizontal and vertical alignment (leading, centered, trailing, spaced evenly) within the auto-layout

Anything else, like absolute positioning within an Auto Layout, stacking order, grid support, etc. is a nice-to-have but not essential to me.

*This was my biggest disappointment with Smart Layout in groups. I thought that a workflow like I have in Figma would now be possible when Smart Layout was introduced, but since stacks are not really enforced there, there are too many cases where I copy-paste something into a Smart Layout group, expecting it to insert nicely into the stack, but it ends up somewhere random and I have to manually fix it.

I especially use Auto Layout when designing for the Web, for Web Apps or native mobile apps; where it also brings tremendous gains for developer handoff, because the design very clearly indicates how things should be responsive and developers have a better reference, because the CSS output is more usable.

I understand not wanting to model it exactly after, say Flexbox in CSS. But looking at Smart Layout and how finnicky it is, I really hope you don’t stray away too much from what’s become the industry standard in Figma – it works really well there, so I advise against “Let’s be different“ syndrome just for the sake of it. What I like about Figma’s way of Auto Layout, is how predictable it is once you learn it and decide to use it.

In my experience, the current typical Auto Layout model works really well for different types of layout models; not just Flexbox, but also things like SwiftUI. This is another thing Figma does quite well, translating the Auto Layout to CSS Flexbox and SwiftUI code in Dev Mode for hand-off; would be awesome to have similar output in Sketch Cloud, as an evolution of the current CSS output there.

Really looking forward to this! I’d love to make it my primary tool I go to again for UI design.

Edit: +1 on @wwwedran’s input on fill, stroke, etc. appearance properties for groups. This is crucial! With Auto Layout, you can properly add layout to containers, so it’s important to also style those containers, like in the button example.

3 Likes
17

Very exciting! I agree with the points above. I recently moved from Figma to Sketch and really miss features like hug/fill, stacks, and padding/inner spacing.

  • Padding & Hug/Fill: The workarounds I’ve found in Sketch are time-consuming, often making me spend more time ensuring inner spacings are correct than on the actual design, especially when designing across devices.
  • Stacks: As @stefanwittwer mentioned, copying and pasting into a Smart Layout often places items randomly, making it quicker to avoid using Smart Layout altogether.

While fill, stroke, etc., are nice-to-haves, my main need is better padding and inner spacing control, including better system feedback on these values, as well as stacking to make smart layouts a bit more effective in my opinion!

5 Likes
18

Thanks for the feedback, it’s very much appreciated — keep it coming!

Comments on specific points below. Follow-up questions in another post.

We haven’t gotten there yet, but that’s the plan, yes.

Grid is not part of the scope for this feature.

We’re definitely looking to add support for this new layout mode to the web app, with properties in the inspector, and flexbox code in the CSS output. But we don’t have specific plans to add other languages/frameworks at this point.

2 Likes
19

Hi @Stayux, can you talk more about this? Why you do single out Penpot’s direction with Flexbox over Figma’s Auto Layout specifically? What’s better about it?

21

Medium:

Blockquote
Absolute position that lets you put an element exactly where you want it, even if there isn’t enough room to do so in the space you’ve chosen. Get rid of elements from the Flex Layout flow with this handy feature.
Smart spacing for the intuitive realization of padding, margins, and the spaces between objects. Use drag motions to resize things to the size Penpot predicts will work the best in your composition. Without having to space things manually, you’ll save time and have things lined up perfectly.
With wrapping for dynamic layouts, you can adapt to different screen sizes and even device orientations. Get the right dynamic design for a tablet on its side and then see how it compares to a mobile device or desktop browser. With this feature, you can automatically see if items need to wrap to new lines or if they go outside the borders. There are no surprises when it comes time to test your design for various devices and technologies.
Z-index management helps you know what elements should be on top in an overlapping design while keeping the order intact. Powered by CSS standards, it saves so much time and helps you think through designs without disruption.

Link to article.

My perspective is production oriented. If a tool uses all the open standards available and act as an honest medium for developers and designers, this will be a no-brainer for companies who want to protect their cognitive architecture from AI data hoarding. Figma strategy is to monetize everything in the pipeline. Sooner or later, someone will be fed up with dark patterns and growing bills.

My view maybe is not correct, but I express it. In my mind, the design canvas has to be close to production implementation as possible. The middle ground compromise is a direct token generation (baked in the app) and logic, which Penpot is implementing together with Tokens.studio. (They tease the feature, but did not ship yet.)

Old discussion on this topic at Penpot forum.

You get my direction of thinking. Please note that I am not fully aware of your advancements and if you offer a similar workflow I give my apologies in advance. :smile:

2 Likes