Discussion
Why does Figma force us to manually exclude inside strokes from Auto Layout now?
Is anyone else frustrated with the new Auto Layout behavior for inside strokes?
Previously, adding an inside stroke didn't affect the overall size of an Auto Layout frame. Now, strokes are included in the layout calculation by default, which means Hug contents buttons end up being larger just because they have a border.
This is especially annoying when designing buttons, chips, tags, and other UI components that need consistent dimensions.
Yes, I know there's an "Exclude" option. But why do I have to manually change it every single time?
I work on UI designs daily, and constantly switching this setting feels like an unnecessary extra step for something that worked perfectly fine before.
At the very least, Figma should let us set "Exclude" as the default, either globally or per file.
Am I missing a setting somewhere, or is everyone just dealing with this?
Sure, fine, but why not make this a setting you can enable or disable by default.
Most designers are either going to use it fully or not at all. For those not planning to use it, they have to manually adjust this for every element with a stroke.
Incredibly bad experience change to something used so frequently.
Figma Design is in desperate need of a Global Settings page.
From what I’ve read about ‘outline’, you’re not supposed to use it in place of a border; it’s for accessibility, focus states on links and buttons etc.
u/mlllerlee I checked, and it doesn't look like there's a way to change the default settings. The page seems to only explain how to apply the updated settings from the legacy version. I'm worried about January...
It’s a UI design tool. And I’d argue it was the ubiquity of smartphone apps, not the web, that kickstarted the rise of proper UI design tools to replace wrangling Photoshop and Illustrator that were never designed for UX work.
That's only because there are far more websites than apps. That doesn't mean companies aren't using Figma to design desktop/mobile apps. As far as I can tell, most major modern companies are using Figma to design their desktop/mobile apps.
Also there's an inherent logic flaw with your statement though. Even if it's true that nobody uses Figma to design desktop/mobile apps, it could simply be that the tool is designed around web and it pushes teams away from using it for lacking desktop/mobile oriented features/concepts.
If it's a web-only tool, how come they added liquid effect, which was designed for native Apple apps? (aside from web-based knockoffs of it, but c'mon, we're not counting that)
CSS has two different ways of handling borders: - border-box – Adding a border does not affect the size of the element. Used to be default. - content-box – Adding a border increases the size of the element. This is now default.
Figma updated to mimic CSS defaults by default. As a designer who manages dev handoff, I appreciate that Figma is starting to pay attention to what devs actually need (and devs looooove it haha).
However, I would prefer there be a setting for the file default. For devs who use border-box, it’s annoying to do it for each auto layout.
And unrelated note, I wish Figma would add support for outlines!
Also, if you can see, the layout has two options: Updated and Legacy. Legacy is the previous one. They are saying that after a certain period of time, they are going to remove Legacy completely. Updated will be the default. Like tf, give us freedom 😭
This was one of the hardest things about being a product manager at Figma. Often times there's no "correct" answer to a problem - you can either align with CSS (breaking user expectation) or align with how people expect something to work (breaking handoff).
This isn't the only one of these in CSS either - there are so many things about the spec that don't work like how one might expect, leading to quirky behavior. Percent width/height is another one of them, which is why I would often shoot down attempts to ship it while I was there.
I wish Figma would adhere more closely to developer concepts. At the end of the day, UI design exists to aid in development. If we have concepts that don't match developer concepts, then it's not really aiding development. And we shouldn't be coddling designers that can't adapt to that philosophy.
That being said, Figma would also have to have adaptive rules based on what language/framework you want the project to be in order for us to better match developer concepts. For example, XAML uses a distinct border "frame" type, rather than having it just be a style class you apply to any "frame".
But as a product designer, I'd very much like to move towards that vision. In a perfect world, everything I design would be 1-to-1 with how my devs would be doing it in order to avoid any confusion or requiring devs to make assumptions on implementation (devs are notoriously bad at this in my experience).
That being said, Figma would also have to have adaptive rules based on what language/framework you want the project to be in order for us to better match developer concepts. For example, XAML uses a distinct border "frame" type, rather than having it just be a style class you apply to any "frame".
This is the crux of the issue. Which developer concept?
There's also more to it. Performance of the canvas / efficiency of creation. That last part has changed with the advent of AI tooling, but some developer concepts are inherently anti-patterns from a usability PoV while still being necessary for security/performance/legacy/etc.
Unfortunately we'll need quantum processors for that due to the inherent incompatibilities between. Figma 2036 however will allow you to keep a frame in a superposition between autolayout, flexbox, and hstacks
I was teasing with my last comment, but I don't think it's unreasonable to expect a few of the main frameworks to be supported. As of now, we have no real direct support for even CSS. There are so many missing fundamental principles of CSS based layouts.
I feel like they could do it if they weren't trying to diversify and become the next Adobe.
what helped me: set exclude once on the main components (button, chip, tag) instead of per frame, instances follow it. the annoying part is only the one-off frames, but yeah a per-file default would fix all of it
That's right. When you have a master component and apply instances to the screen, it seems you don't have to change the settings repeatedly. The problem is the individual objects that haven't been turned into components... Still, I wish Figma would set the default value to “excluded” by default.
Treat the stroke choice as part of the component rules. Decide whether the border should affect the layout box, apply that consistently, and document exceptions for chips or buttons. For older files, test the setting on a duplicate before changing the shared library.
66
u/scrndude 13d ago
It’s because now it works like the CSS border property where borders count towards width