In Figma, when we define the stroke of a component, the dev mode always shows the border. Even if the border is outside.
This is important, for example, when defining the focus state, which should be outline, not border.
This way, when developers implement the component we’ve designed and use the Figma specs… they implement everything as a border and not as an outline.
I think it would be interesting to differentiate between those two things so that there is more uniformity between the language of designers and developers.
I 100% agree, but also realize Figma will never do this.
Pretty much every feature request here is for CSS features like this, yet Figma isn’t built on CSS and they philosophically are against emulating web-design 1:1 (even though it would actually be better for non-web-design as well).
We need a product design tool built on real HTML/CSS rendering so we can stop being held back by Figma like this, they will never implement such technically specific feature requests.
Isn’t setting Stroke to Outside would be actually the same as Outline?
Outline is a line outside of the element’s border. Unlike other areas of the box, outlines don’t take up space, so they don’t affect the layout of the document in any way. outline - CSS: Cascading Style Sheets | MDN
Agree! This issue impacted my team and we have a problem with different button sizes in a result, deviation occurs because one button was filled with color, and another outline, so in code it resulted in 32 vs 34 px height
