We just started a new component library when the “vertical trim” update came out. We made the necessary updates however now that our Devs are building the buttons in Storybook, every button is 4-5 px too small. The buttons s/b a fixed height, however our measurements are coming out to very odd values when looking at them in the browser.
Is anyone else having issues when building out something as simple as a button?
Why is it when you select a components frame to make an edit on the button, if you even so much as touch “vertical trim” it breaks your components horizontal padding? You can add 683px of padding and nothing happens. Am I the only one seeing this?
We have checked our line-height, auto-layout settings to make sure nothing is “hugging” the text, browser specific issues (mainly Firefox). Plz HELP!
Buttons sizes s/b
Large
Height: 50px / Padding: 14px 24px /Line height: 22 /Font size: 16px
Medium
Height: 38px / Padding: 9px 20px / Line height: 16 / Font size: 14px
Small
Height: 30px / Padding: 7px 16px / Line height: 16 / Font size: 12px
Our developers are getting very frustrated with Figma. This is the first project they are using it on and it’s not a GOOD look guys.