Sneak peek: new Layout section of Webflow's Style panel

[@LutherDePapier]

Love it, so much simpler. Be it in code or nocode, layout is truly is the hardest when it come to UI imo.

[@the-secrettutorials]

This is something I secretly wished for lately 😍 Great work and props for going with the time 👍

[@PubgSpeed-wl8yo]

What was wrong with the old version? It could do the same thing.

[@the-secrettutorials]

@@PubgSpeed-wl8yo Well it looks like your standard UI design platform. They all look the same because it works great.

[@myceliumtechno]

Huge improvement., love it. Can't help to notice that it's basically the Figma way of handling auto layout, which is a good thing! Building towards that industry standard for doing layout on digital products.

[@ScrubsToScreensWithFibro]

Love this!!!!! Thank you Webflow

[@ivanbadia3232]

Time stamp 6:07-love how the team surprise themselves learning new shortcuts. "Opt-Enter" will mirror measurement to opposite padding space

[@oliverthiebes8918]

Love it! Always wanted sth. similar to Figma 🙂

[@amcds2867]

Change is difficult for everyone, but if it makes things better it's welcome.

[@alexhartan]

This is a welcome update. I've been using WF for years, and the flexbox model is still giving me headaches occasionally.

[@unicornroad]

command + emter?! game changer.

[@GraphicDesigner_01]

the intent of an compress align/justify section makes sense especially if its mirroring figma spacing and also webflow/figma roadmap intergration direction, however this feels needlessly hidden, it would feel more efficient to have the full layout of controls visible at all times, I was excited for this update and now seeing it, Im hoping the ux and dev team will revert it back soon.

[@shableep]

You can’t use the other controls when using the other layout modes. So it makes sense to hide the controls you can’t use for other layout modes. Flex is different than grid, etc. So each get their own tools for controlling those layout modes.

[@amcds2867]

Amazing! i just think that grids in the Navigator should display with the grid icon as opposed to the div icon - i get that in this exercise the grid had a class given to it, but it would make it easier to identify the grid with it's icon even with class attribution.

[@Wildenfree]

I see what y’all are doin 😏 the gap between Webflow & Figma closes even more…!

[@alexhartan]

15:40 Sergie 'summoning' the fireworks in the background lol

[@matthewbowker1350]

I think this is a good improvement overall but time will tell. Changing the number of grid columns and rows right in the style panel looks like a great improvement but I'm not sure about the new 3x3 grid UI, not sure it makes the most sense as the old panel I thought was really clear but maybe I'm the minority. Regardless this feels like an alignment (pun intended) with Figma's style panel which makes the transition from design to build for no-code developers easier so that's a good thing! 15:00 - 18:00 was uncomfortable to watch 🤣

[@aleexious4670]

Love this :)

[@Webflow]

❤

[@FishkiWebflow]

when will you improve the standard webflow sledder I think many users have been waiting for this for 10 years. I don't want to have to resort to a third party solution.

[@junsss]

Love this!!

[@prhawkeye]

Why would you use grid and then make everything flex inside? Instead of moving the elements into the top grid cell, you should have just expanded the right cell down and into the open cell underneath it. You would have saved yourself that 10 minutes of moving everything around and having to add even more complex flex alignments and spacing. Creating a new div to wrap everything in. It was excessive. Essentially, you could have made the whole thing a 3x5 grid and expanded the top and right sides to the cells that you were looking to fill. This was a messy config.

[@eli.shmerler]

Exactly my thoughts 👍🏻

[@sergiemagdalin6168]

Yeah totally, there's a bunch of ways we could have built the section. Even though it's not the simplest way to build it, we wanted to show off flex and grid display settings.

[@prhawkeye]

@@sergiemagdalin6168 I had thought of that after my comment, thinking this was more for demo of the new interface and not so much about how to build something.

[@RyanPerrella]

WOAH KEYBOARDS

[@micdouglass]

Is anyone using Quick Stack?

[@chrifur]

Yes, it’s great when you turn your head around to it

[@Adarsh-k8i]

I think the old UI is better than these update

[@ryanaldous2743]

Good features But next time get a host who knows how to use the product

[@sachinRao15]

No way need the old UI back 😔 I am a box model guy not a layer model 😅 Dev tools like control was my way of using webflow 😢

[@danie7kovacs]

huh? what does this have to do with the box model?

[@sachinRao15]

@@danie7kovacs while the undelining code output will be the same in an UI or model changing a tool from using a box model UI to a layer model UI can impact users. Those used to directly editing layout properties, similar to CSS, may find the transition challenging. While a layer model UI may be more user-friendly for people familiar with design tools, it can feel limited for those who prefer the detailed control of a box model UI. This is particularly noticeable when working with intricate responsive layouts or when precise alignment with the underlying web CSS model is important.

[@ruku2134]

Change can be hard, you’ll be okay.

[@danie7kovacs]

@@sachinRao15 I just don't understand how it relates to the box model. The 'Spacing' section that contains the box models is still there unchanged.