the size of boxes

Box-sizing is a minor annoyance for the modern web developer. In short, the question is “when setting the size of a DOM object, should you include the border and padding (“border-box” for the “box-sizing” property) or just the content “guts”? (“content-box”)

Historically, “content-box” was, and remains, the default, even though the consensus is “border-box” is easier to work with. So many sites will put something like

* {
  box-sizing: border-box;
}

So your design system needs to account for that - testing in an environment where that has been set. (Empirically it seems Figma uses the older content-box model.) 

1. Right Click on an page and hit “Inspect”
2. Under the Styles tab, hit the “+” button for “New Style Rule”
3. Replace any class or element name with “*”
4. Click to enter a new CSS property and enter `box-sizing: border-box;` resulting in something like 
   
   
   

The MDN box-sizing page goes into more detail on the options you have for it.