Skip to main content

Differentiate between Border vs Outline


Monica_Sampaio

Hey!

In code, border and outline are different things.

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.

6 replies

Mattan_Ingram

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.


KennLucas
  • 224 replies
  • July 18, 2024

This has long been a problem in Figma. @Mattan_Ingram said it best…Figma honestly does not care to make the proiduct work for designers.

Why that sounds funny I don;t know. But it is truly a problem. I was hoping Adobe would make the deal go through and fix a lot of that.

Instead we are stuck with Figma releasing half-thought, undercooked, stuff and never looking back.


djv
Figmate
  • Community Support
  • 4798 replies
  • July 24, 2024

Hey All, thanks for your feedback!

I’ve updated this topic for clarity, and we’ll pass this idea onto our team for future consideration.


  • 2 replies
  • August 25, 2024

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


Olha_Shcherbak

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 😐


Monica_Sampaio

But Figma’s devmode shows everything as border…


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings