在網站或 App 設計中，按鈕（Button）是最核心的互動元素之一。好的按鈕，不僅要美觀，更要能適應不同的字數、裝置，甚至長期維護。
今天就用 Figma 的 Auto Layout，帶你快速製作一個能「自動調整」的按鈕。
Step 1：建立按鈕內容
先輸入按鈕的文字（例如「送出」、「立即購買」），如果需要，也可以加上 icon。
設計觀點：
- 文字建議保持簡短，方便在不同螢幕上閱讀。
- icon 應該輔助，而不是增加理解負擔。
Step 2：轉換成 Auto Layout
選取文字與 icon → 按下 Shift + A，Figma 會自動建立一個 Auto Layout 容器。這個容器就是按鈕的「骨架」，接下來所有設定都能在這裡完成。
設計觀點：Auto Layout = 前端的 Flexbox。它能讓元件自動對齊、縮放，不需要你一個一個手動微調。
Step 3：調整參數
這裡是讓按鈕「變專業」的關鍵：
- Padding（內距）：上下 8–12px、左右 16–24px（依照字體大小調整）。
- Spacing（間距）：如果有 icon，與文字保持 約 8px 間距。
- Alignment（對齊）：保持水平、垂直置中。
- 樣式：設定顏色、圓角、陰影。
設計觀點：Padding 決定了「按鈕的氣質」：
- 大 Padding → 穩重、厚實
- 小 Padding → 精緻、輕巧
Step 4：完成並測試
現在試著修改文字（例如「送出」換成「立即註冊」），你會發現按鈕會自動拉長，間距依然完美。
💡 設計觀點：這就是 Auto Layout 的真正價值 —— 不管內容怎麼變，排版永遠保持一致。
總結
Figma 的 Auto Layout 不只是省時間，它代表了一種 系統化設計思維：
- 一顆按鈕，不只是單一圖層，而是「可維護的元件」。
- 修改一次，全站同步，讓設計更具延展性。
下次做按鈕時，記得：別再用手動排版，讓 Auto Layout 幫你處理。
