Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。
Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。
我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。
很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸
在一個網站中
常常會在不同的頁面之間看到許多相同共用的元素
比如說按鈕
我們在設計這些常用元素的時候
需要盡可能確保一致性
按鈕的設計在 UI/UX 設計中扮演著關鍵角色
首先是顏色選擇
按鈕的顏色應該與整體設計風格一致
同時要突出顯眼
例如主要行動呼籲（CTA）按鈕
常用如紅色或橙色等亮色系
這樣可以吸引使用者的注意
接著是尺寸和形狀
按鈕的大小應該適中
過大會顯得笨重
過小會不易點擊
形狀上
圓角按鈕通常給人友好的感覺
而方形按鈕則顯得更專業
第三是字體和文字
按鈕上的文字要簡潔明瞭
常用動詞如購買、註冊、瞭解更多等
字體要清晰易讀
避免使用過於花哨的字體
對比度也是設計按鈕時需要考慮的因素
文字顏色與按鈕背景顏色要有足夠的對比
這樣才能保證文字的可讀性
按鈕的狀態變化設計也很重要
包括默認狀態、懸停狀態
點擊狀態和禁用狀態等等
這些狀態應該有明顯的區別
例如懸停時可以改變顏色或增加陰影
點擊時可以縮小按鈕
這些細節可以提升使用者的互動體驗
另外
按鈕的回饋設計也是不可忽視的
當使用者點擊按鈕後
應該有相應的回饋
例如變色
出現 loading 動畫等
這樣可以讓使用者得到操作回饋
最後
響應式設計也是必須的
確保按鈕在不同裝置上都能夠有良好的顯示和點擊體驗
無論是電腦還是手機
按鈕都應該保持一致的功能和美觀
首先我們先建立「New Design file」
點選 Text 再輸入我們要的文字：輸入按鈕
然後點擊上方操作欄位 鋼筆（Pen）繪製出向下的箭頭
可以調整 Stroke 中的線條形狀選擇圓頭
再調整箭頭的圓角輸入 1
並調整大小 8*4
接下來我們選擇 橢圓（Ellipse）當作我們的 icon
並調整大小 10*10
選取全部組件點擊右側選單選擇 Auto Layout
點擊新增
我們再來調整細節參數
再來我們調整 Fill 填充的顏色 選擇 #FFFFFF
再調整文字的顏色 #3C1CFF
這樣就完成了
我們再複製一個
將兩個按鈕重新命名
Button/White、Button/Blue
將 Button/Blue 的 Fill 填充的顏色
選擇 #3C1CFF
再調整文字的顏色 #FFFFFF
將兩個按鈕選取點擊上方操作欄位的
建立複合元件（Create multiple components）
然後我們將這個組件複製一組出來
這時候點擊左側欄位
可以將按鈕裡面的箭頭跟 icon 隱藏
這樣就可以讓 Icon 適應不同情境下的按鈕應用
然後如果想要從藍色切換成白色
可以點擊右邊操作欄位的 component 進行切換
這樣就很方便我們設計師管理
以及當需要設計 RWD 網站時
按鈕也可以自適應與統一管理
關於更多元件介紹會在 Component 單元說明
社群傳送門 - https://portaly.cc/designer.riven
在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。
iThome鐵人賽
看影片追技術