Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。
Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。
我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。
很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸
今天我們將一起探索 Figma 的基本工具
就如同前面單元提到的
Figma 是一款好用且輕量的設計工具
被廣泛應用於 UI/UX 設計
它的協作功能和雲端儲存特性
讓任何團隊都能夠高效率地共同工作
無論你是設計新手還是有經驗的設計師
Figma 都是一個強大且靈活的設計軟體
這個單元將帶你熟悉 Figma 的核心功能
讓你可以開始創作出色的設計作品
讓我們開始吧！
當你打開 Figma 時
首先會看到的是它的主介面
主介面包括工具欄、屬性面板、圖層面板以及畫布
理解這些區域的用途
有助於你更有效地使用 Figma
在我們新建檔案後
上方黑色橫條就是 Figma 的工具列
其中的左邊這些 Icon 是設計時常用的基本工具
接下來我們會帶你了解其中最常用的功能
在開始設計前
我們必須建立一個用來放置設計元素的「畫布」
在 Figma 中我們稱它為 Frame
所以我們可以點擊 Frame 工具
或點擊快捷鍵 F
點擊後會發現右方有提供不同的裝置尺寸
你也可以直接拖曳一個區塊作為你的畫布
接下來我們就可以在畫布中開始設計
首先我們可以從 Shape Tools 中點擊 Rectangle 來繪製矩形
或點擊快捷鍵 R
鼠標呈現 + 的時候就表示已經進入繪製模式
此時可以任意拖曳想要的矩形範圍
在拖曳時長按 Shift 可以繪製出正方形
而除了矩形
也可以點擊 形狀工具（Shape Tools）
的下拉箭頭來選擇其他形狀
像是線條與圓形
繪製形狀後系統會自動幫我們切回 Move 工具
讓我們方便進行位置的調整與對齊
如果你發現無法移動物件時
可以確認是否正在使用移動（Move）工具
或點擊快捷鍵 V
而當我們想調整物件大小時
可以在選取物件後
拖移周圍的四個角來進行調整
在拖曳的同時長按 Shift 可以做等比例的縮放
也可以在 移動工具 的下拉選單內
找到 Scale 或點擊快捷鍵 K
此時進行拖曳時會將整個群組的內容都進行等比縮放
跟 Shift 的等比例縮放有些微不同
如果想要自己繪製形狀
可以從 Creation Tools 中點擊 Pen 來進行繪製
或點擊快捷鍵 P
鼠標呈現鋼筆形狀時就可以開始描點
如果想畫出曲線只要在描點的同時長按拖曳即可
最後進行封閉即可完成拉
那對手繪有信心的同學
可以自行挑戰 Pencil 鉛筆工具
不過這在 UI 設計裡比較少用到
而想加入文字時只要點擊 Text 或快捷鍵 T
鼠標會呈現 + 的形狀
在任意位置中點擊即可輸入文字
或是拖曳一個文字區塊來限制文字的段落範圍
建立文字後可再透過右方屬性面版調整樣式與大小
當畫面超出視窗大小時
可以點擊 Hand Tool 或快捷鍵 H
來移動視窗的位置
在使用 移動工具 時長按空白鍵
也可以快速切換成 Hand Tool
Figma 的強大在於順暢的多人協作
假設我們的設計完成後
可以分享給其他團隊成員瀏覽或留下建議與回饋
這時可以點擊 Add Comment 或快捷鍵 C
鼠標呈現對話框形狀時
即可在任意位置註記訊息
在 Frame 畫布內註記的 Comments
將會跟隨著 Frame 的位置移動
但刪除畫布不會影響 Comments
如果認為註記留言已解決或不重要了
可以點擊 標註為已解決（Mark as resolved）
或刪除註記（Delete thread）
好啦 我們現在已經對 Figma 操作介面有了初步理解
在接下來的單元呢
我們會繼續深入 Figma 的進階操作
等等見囉
社群傳送門 - https://portaly.cc/designer.riven
在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。
iThome鐵人賽
看影片追技術