設計系統之微用小記：按鈕元件的內間距設定

從最初第一版的一人設計系統，逐漸獲得認可成為專案長期維護，到現在一個小團隊齊力優化，此系列(?)把過程中各種奇怪心得當作小記，以茲紀念(???)

按鈕是建立設計系統最基本的練習題，也是我們設計系統的第一個元件，本篇紀錄在 Figma 中建立按鈕元件時的小調整。

一般附有 icon 的按鈕，通常為了避免視覺上的平衡，左右兩側水平間距（Horizontal padding）會使用不同的寬度，如下圖:

當我們在 Figma 建置元件時，就需要針對左右不同的 Padding 多建立一組 Variant，也就是除了原本常會有的 Variant，像是 Style（Filled/ Outlined…），State（Enabled/Hovered…），再加上 Icon（None/right/left），元件組就會變得很龐大，如下圖:

Material 3 Design Kit (Figma Community)

在不改動原本樣式與尺寸的前提下，調整按鈕內部 Horizontal padding ，重新分配，原本的文字（Label）對外水平間距為24，改為16+8，也就是針對文字多包一層，左右水平間距為8，當按鈕增加 Icon 時，Horizontal gap between item，從原本的8改為0，如下圖:

如此設定，按鈕左側右側加不加 Icon，都不影響最外層的水平間距設定（Horizontal padding:16），建立原件組時，就不需要因為有沒有 Icon 而建立多組 Variant，如下圖:

好像有用又好像沒用，談不上是大道理好像也能分享，希望透過這微用系列，多聊些設計的實作面與細節，自我期許多接地氣不打高空。