Achieving multiple of 8 for heights on UI Kit

[zecadibPC]

Hi, I'm currently facing a challenge in ensuring that all my UI kit components conform to multiple height increments of 8. Specifically, I aim for buttons to have options of 24, 32, and 40 height sizes, categorized as small, medium, and large. The same standard applies to major form elements such as text inputs, number inputs, dropdowns, and checkboxes.

Although we've already adjusted the global font size to 16, the heights of components vary significantly. While I understand that not all components or assets should be identical in size, consistency is essential for our platform. Therefore, all containers, if not the visible components themselves, should adhere to this standard.

I wonder if a viable solution could be to add a token that clearly defines sizes as such. Any thoughts on how to achieve this?

[onursenture]

Hello, we use a global.fontSize of 14 in our UI Kit because the base font size in our showcases is also 14. We chose to keep the same font size to achieve an identical appearance and provide a better experience for our users.

However, Figma rounds decimal numbers and causes issues when you expect pixel perfection. We are considering switching to an 8-point base for now. Our recommendation is to use Tokens Studio to set the global.fontSize token to 16 and then apply it to the document. Since this is an untested case in current versions, you may encounter issues with some components. Therefore, please check each component individually.

[vieira-brz]

Yes, using a sizing token system in your design to standardize component heights is a great solution. You can define a set of size tokens (e.g., small: 24px, medium: 32px, large: 40px) and apply these consistently across all relevant components like buttons, inputs, and dropdowns. This approach will ensure uniformity and ease of maintenance across your UI components. Implement these tokens in your CSS or styling solution to apply them across your components effectively.

Step 1: Define the Size Tokens

First, define your size tokens in your CSS file:

:root {
    --size-small: 24px;
    --size-medium: 32px;
    --size-large: 40px;
}

.button-small {
    height: var(--size-small);
    padding: 0 12px;
    font-size: 14px;
}

.button-medium {
    height: var(--size-medium);
    padding: 0 16px;
    font-size: 16px;
}

.button-large {
    height: var(--size-large);
    padding: 0 20px;
    font-size: 18px;
}

Step 2: Apply the Sizes to Buttons

Now, apply these classes to your buttons in HTML:

<button class="button-small">Small Button</button>
<button class="button-medium">Medium Button</button>
<button class="button-large">Large Button</button>

This approach keeps your UI elements consistent and scalable. You can use similar patterns for other components like inputs and checkboxes.