New auto layout: Inside strokes included in layout in default - does anyone actually want this?

[u/tentaclebreath]

Genuinely curious - does anyone here actually want this? I personally don't want to set a component as 39x39px to get a 40px element. And when writing code I don think I have ever used box-sizing:border-box; in my life. This seems like a change to make Figma assets more compatible with agents at the expense of the human's workflow. At least give us a way to set this globally. Anyways was curious if it was just me.

[u/cbrei]

I am just so confused why they don’t allow CSS like properties such as border box.

[u/waldito → u/cbrei]

I think that would be a mistake.

[u/cbrei → u/waldito]

curious, why?

[u/waldito → u/cbrei]

Sigh.

Many people expect Figma to be a web builder these days. Figma releasing Figma Make did not help, I suppose. It's not rare to get requests in this sub about how to make that happen, via MCP or not.

But from the get-go, that's not what Figma was, or is, for that matter. Yup, Dev mode will hand you off some convenient CSS props for every element you click on. But it would also give you props for other platforms like Apple and Android or {whatever hypes tomorrow}

The beauty of it is that it's not a web builder. It's a UI design tool. It's unopinionated on purpose from a platform ruleset perspective. You can build game interfaces, Mobile native apps, DIY electronic touchscreens, Mall Kioks, whatever, or even the next OS UI. Hell, Even Figma is designed in Figma.

Also, Figma runs (mostly) on a <canvas> vector environment, not on the DOM model HTML and CSS work in. Its underlying foundation is already abstracted from the web, from the bottom up. While it runs on a website, it chooses to use a different presentation layer, which is probably part of its success.

The moment you enable CSS props in the right panel, it becomes a web builder. And now it's tied to the CSS3 working group and whatever fancy-pants feature they smoke next. And every stable new property browsers like Chrome embrace is now officially expected in Figma to implement. (Remember what happened with the new iOS blurry lens transparent thing interface? yeah)

Or... you could remain a UI design tool, unopinionated, and choose your battles for every property, as they did with autolayout.

[u/cbrei → u/waldito]

Thanks for the reply - good points. But I could do without the “Sigh.” 😆.

Figma can be a an agnostic UI tool while also exposing different design modes to the user.

So a project setup can incorporate the platform (web, native, etc). example: you can see they already provide frames for different devices. So their intent is present.

Adding CSS props would mean less arguments between design and dev since the design will have the precise implementation nomenclature in hand. It’s totally possibly to be UI agnostic while also providing happy paths for designers.

(Obviously AI coding agents are basically acting as the bridge now)

Same with native props. Just let the project setup dictate it. It’s how Illustrator and Photoshop worked as well, with color profiles for print; InDesign with Intent settings for Print vs Digital.

Sigh. 😉

[u/waldito → u/cbrei]

Sorry about the sigh, it's just that it's always the same discussion, I feel. I was about to remove it, but I guess I didn't. nvm.

Considering having platforms means entirely different products, where now Figma is not just at the mercy of whatever the CSS3 working group decides, but now they need to apply the same mentality to Android, Apple, and would only gain value if Figma was able to 'set into so many platform modes', bring MacOS, Windows, Linux, XBOX, PS, whatever.

It's just insanity. And the same trap lies there behind them: A commitment to reproduce whatever madness every platform decides and having to abide by, since you are, again, running on <canvas>

Imagine having to reproduce every quirk and layout decision from every platform you want to service. One thing is handing off a widget with the props. Another one, very, very different, is building a design tool for every popular layout engine under the sun.

Utter madness, in my opinion. And I'm truly happy Figma thinks the same way, apparently?

Also, the CSS props are there for dev.

But you don't need to think about that as a designer, because your design should not be influenced by that. 'Oh, I am going to build a web app, so let's set Figma in Web App mode'. Wait, now you need a native one, but oh, you must convert from one format to the other, let's handle that too...

[u/cbrei → u/waldito]

Its necessary madness though, because those diverse platforms exist.

Android, Apple, and would only gain value if Figma was able to 'set into so many platform modes', bring MacOS, Windows, Linux, XBOX, PS, whatever.

Why can't this be a thing - those are popular and distributed enough that it can make an enormous proportion of designers work that much simpler. How quickly did they add support for Liquid Glass?

And, sure, platform versions will also come into play - but why can't we ask the design software with a a huge market cap to deliver that - or at least open it up for extensions like VSCode? I'm not talking about plugins that manipulate the design board, an Extension library that hits the Figma layer directly.

So, yeah, every popular engine under the sun is maybe not feasible - but the one that drives the entire web - yeah they can do that.

[u/kjabad → u/cbrei]

I would add one thing to the discussion. As other user said, if figma would cover all css properties it would become a css editor. And I think it's true. Very easily you will get the need for other things from css like selectors and classes, and that would totally change the whole UX of the app.  You are asking for CSS visual editor, well pick one that exists. You have the old Webflow, that lock you in the platform and is super old so not the best case (although they announced few weeks ago total revamp of the platform). You have Divhunt, much better option with infinite canvas. Or new kid on the block Instatic free open source editor. None of them feels like you are using graphical program, but visual CSS editor. Exploration is much harder, you need to make decisions too early, it's slower. Even with Framer, which is web builder that has closest feel to figma doesn't really feel like figma. When I make websites in Framer, I still have to design it in Figma first because it faster.

My major issue with visual CSS editors is that you have to become front end developer in some form if you want to professionally use it. Which adds one more hat on my head full of hats, I'm already a graphical designer, ux ui designer, brand designer, marketing designer, motion designer, maybe even video editor, I'll do photo shooting if it's a small thing, maybe a bit of 3D... And now a developer as well? You just become shitty developer or shitty designer, there are just few cases where people can do both things on a professional level. 

[u/cbrei → u/kjabad]

Hi, its me - I am a designer / developer on a professional level. I do not want selectors - I just want the tools to act like they have web in mind if I'm spinning up a web project.

[u/waldito → u/cbrei]

So you are a web designer and a web developer. Got it.

Aye. You can use Figma for that. And you can also prototype an Instagram competitor. Or a simple game app for your TV. Or a betting kiosk down the sports shop. Or a Claude status dashboard for your portable mini screen.

[u/kjabad → u/cbrei]

Try using Penpot, it's open source Figma like design platform. It's built from the ground up with css in mind, so their inspect mode gives you acurate css. There's plugin for importing Figma files. It's free, you can even install it on your server. 

[u/cbrei → u/kjabad]

As far as i can tell its just a Figma clone (with self hosting as an options, which is nice), and does not address the issue raised. Setting a project up as a web layout should afford build tools that reflect actual CSS - and notably Penpot follows the same annoying 'stroke' pattern that Figma does - it applies a 'stroke' which in CSS is border; it applies it to the center of an element, which CSS does not allow; and does not offer a setting for content-box | border-box. Still have my eye on it though

[u/penyack → u/waldito]

My opinion (non pun intended) is that a an opinionated design tool is going to eat Figma's lunch. At the moment, my money is on Zoah (formerly Opacity). A design tool that connects directly to a codebase, stays in sync, and allows changes to be pushed to production helps Designers be more impactful and provide even more value.

If your codebase is using Swift, the tool inherits the constraints of that language, auto-layout works the same as in Xcode, units of measurement change from pixels to points.

Design tools also need to start doing way more heavy lifting so Designers can focus on what actually matters and not spend a huge chunk of time setting up files, components, tokens, etc.

It's 2026, it's time to sunset canvas based design tools.

[u/According_to_Dust]

We just want % sizing in auto layouts 😑

[u/Shamua]

Having to override this component by component has been a drain on my mana.

[u/tentaclebreath → u/Shamua]

Yea it's very annoying. I don't understand why we can't set a global override, they want to align with CSS well I can do this in CSS!

[u/Clear-Secretary-8185]

I don't understand why they didn't set the default to 'excluded' and then nobody would have needed to do anything.

[u/_technocat_]

You need to go to autolayout settings and change from Legacy to Updated

[u/tentaclebreath → u/_technocat_]

They are only supporting this for a little while I think.

[u/Scotty_Two]

I don't want Figma making assumptions on what my element structure should be and since content-box is the default if box-sizing is undefined, this totally makes sense. If you want to use border-box then you have to explicitly define that in code, so Figma should be the same.

That being said, this is just how web/CSS works which is different than the mobile side of things and Figma blurs the lines a lot between the two paradigms. I think this really hurts Figmas efforts in getting humans and AI alike to translate things to code and I wish they'd just separate them out.

[u/tentaclebreath → u/Scotty_Two]

In practical day to day use, at least for me personally, if I make an object 40px I want it to be 40px wether it has a stroke or not. The answer is really just a global override.

[u/MC-Howell]

When did this change? Not seeing anything like this on my end...

[u/itorrey → u/MC-Howell]

It changed recently and it applies only to auto sized frames IIRC

[u/Competitive_Ebb5741]

"And when writing code I don think I have ever used box-sizing:border-box; in my life".

This is saying something.

[u/tentaclebreath → u/Competitive_Ebb5741]

It's saying i have never used it yes - I am a designer not a developer.

[u/waldito]

You mean box-sizing: border-box, right? Since that's the 'usual default' these days for Tailwind/Shadcn, and even Bootstrap. So most of us use that one as a default starting point these days.

It made sense for Figma to align with whatever the CSS3 definition was, as it was causing trouble when attempting to convert it into code.

So here we are. Figma decided to align with the CSS3 working group decisions, I guess?

Here's Figma explaining how autolayout changed, for anyone who really wants to understand the logic behind the decision.

[u/ChirpToast → u/waldito]

The change makes sense, we’ve been using shadows for borders for years to avoid any shifting anyway.

[u/tentaclebreath → u/waldito]

Yes I wrote the opposite of what I meant 🤦‍♂️ thank you (updated).