UI 設計日常
給團隊的不專業 Figma 操作教學
入坑 Figma 後，你怎麼能不愛？
去年在某個臉書社團看到一個最近在使用的設計軟體的票選活動，覺得超意外的是 Figma 躍升為最多人使用的軟體，那時候就萌生想要學習這個軟體的念頭，剛好 Simon 老師開始募資「產品設計實戰：用Figma打造絕佳UI/UX」，所以我就腦波弱的入手了哈哈。Figma 新手如果不想花錢也可以到 Figma 官方 YouTube 看新手教學，我為了快速上手所以花錢買課程順邊吸收 Simon 老師的設計精華?! XD（然後又沒看完…）
這篇是給團隊成員們看的，但我有點懷疑非設計師的團隊成員會看到這篇文章嗎？QQ
目錄
團隊使用 Figma 工作的優點
基本操作說明
使用介面
複製圖片說明
批次輸出圖片說明團隊使用 Figma 工作的優點
Figma 設計 UI 的優點網路上應該有很多人分享過了，但我這裡想說一下其中幾個對團隊工作最大的優點：
- UI 設計師可以分享自己所有的設計畫面於網頁上給團隊成員看，而團隊成員不用安裝任何應用程式，只要有網路和網頁就可以看到設計稿。
- 可以即時迭代設計稿及 Prototype，當我們在會議上討論到需要修改的部分，設計師可以立即修改設計稿，而團隊成員也可以馬上確認。
- 減少設計師輸出圖檔的時間及減少大量圖檔佔用電腦容量（這點對 Macbook 很重要哈哈哈）。
最後一個優點有點特殊，因為公司的專案屬於標案，所以我們需要產出各種書面或電子文件給政府單位，想當然會需要將設計圖放到文件內，以前是設計師產出圖檔給 PM 去編輯，如果畫面少當然不會很花時間，但現在有 Figma 設計師不需要另外花時間產出圖檔，讓 PM 或其他團隊成員自行上去 Figma 找他們需要的畫面就好，在 UI 畫面非常多的時候真的大大減少設計師做雜事的時間，設計師可以更專注於其他設計工作！
起源
開始用 Figma 做設計後，當我分享給團隊成員我的設計連結時，他們大部分的人開啟網頁後都不知道該如何操作，這時才恍然發現原來身為設計師的我，把某些操作方式已經視為理所當然了，所以才誕生了這篇教學文。
因為目前工作於傳產公司，所以我們用的系統是 Windows，以下介紹都會用 Windows 的快捷鍵做說明。
以下操作畫面是以 Viewer 的角度，編輯者的功能這裡就不多介紹。因為我的設計稿不適合公開，如果團隊有設計師可以請設計師隨意找個設計檔分享連結出來再上去玩玩看。
入坑 Figma，你怎麼能不愛她？
基本操作說明
- Ctrl + 滑鼠滾輪：放大縮小畫面範圍。
- 空白鍵 + 滑鼠左鍵：白手出現可以拖曳畫面。
- Ctrl + \：關掉上左右工作區。
使用介面
Pages
畫面左邊上半部工作區的 Pages 裡有不同頁面可以點開看，我自己的設計的主要作業區在「 🚧 作業中 🚧 」，這會依據設計師的設計習慣而有所不同。
Comments
選擇對話框可以直接在畫面上有疑問的地方標註並留言。
Observing
當線上同時有其他人時，可以點選其他人的頭像觀察其他人的視角。（去偷看別人在看什麼其實還蠻有趣的 😄
Share
按下右上角的 Share 按鈕會出現分享的視窗，下面是分享視窗最底下的內容。
勾選 Link to selected frame 可以分享當下選取的 frame；沒有勾選表示分享此 Pages。選取任意 frame 右鍵 Copy/Paste 選 Copy link 也可以分享。
Inspect（切版相關）
畫面右邊工作區有 Inspect，工程師可以在上面查看樣式屬性。
複製圖片說明
Ctrl + Shift + C（按右鍵 Copy/Paste 選 Copy as png)
選擇中間工作區內任意物件可以直接複製成圖片。
用網頁搜尋功能可以搜尋左邊工作區內圖層名稱，這時候選擇圖層右鍵一樣可以直接複製成圖片。這個使用前提是設計師對 UI 圖層有好好的命名 XD。
批次輸出圖片說明
Export
畫面右邊工作區切換到 Export，選任意物件按「 ＋ 」可以自己調整想要切圖的倍率解析度及檔案類型，如果有很多圖檔需要輸出不用馬上按 Export。
一次全選要輸出的圖層畫面按 File > Export。
這時右邊會出現之前有設定 Export 的圖片清單視窗，按 Export 可以一鍵輸出。
結語
最近剛好公司的專案需要製作文件，自從用了 Figma 後團隊成員需要圖片都不再找我要了，想要圖片嗎？自己上 Figma 找，除非那個畫面我剛好還沒畫到才會被催討，省下產圖檔加命名圖檔時間整個超開心～
複製圖片的功能真心大力推薦給需要製作文件的團隊成員們，當 Frame 有包好 UI 畫面只要複製那個圖層到文件不用另外裁切圖片，每張圖邊邊都完美的，這應該是強迫症發作的人才覺得很棒吧哈哈哈，這另外一個前提是設計師對間距也有強迫症 XD。
從 2018 年到 2021 年繼 Sketch、Adobe XD 後，我學了第三個 UI 設計工具，大家總說前端的世界變很快，現在連 UI 設計軟體也進化的有點快了，吃資訊科技的飯就是要與時俱進（笑。
最後祝所有人團隊合作愉快！
附錄
附上自己用 Figma 製作的圖片版使用說明：
