每次上網在搜尋UI設計相關的文章時，總是會看到Figma這個設計UI的工具，國外蠻多人都使用這個工具，聽說最大的特點是「共同協作」的功能很好用，且要看每個元件的css語法也很方便。就我自己的觀察，Figma在前幾年在台灣還沒到很熱門，但這一、二年開始慢慢有越來越多人關注到它了，甚至有些人直接從Sketch、Adobe Xd轉戰成Figma
就讓我越來越好奇，真的有這麼好用嗎？
於是我就跳下海來學學看囉，反正多學一套軟體也沒什麼不好，且如果真的很厲害很好用，或許可以試著把Adobe Xd汰換掉(?)，尤其是協作那項功能真的是蠻吸引我的，目前的工作跟工程師在不同的辦公室，有時開會會即時修改的一些UI的畫面或功能，無法馬上跟工程師更新檔案，導致後面傳新的UI檔案給他們時，他們已經用舊UI的檔案開發了一些功能了…
但不得不說學新軟體的那種陣痛期，真的是讓人有點排斥，尤其是要學差不多類型的軟體(Adobe Xd vs. Figma)，但操作方式卻有些許不同，有時會切換不過來，所以用Figma畫UI時，腦筋要稍微思考一下才轉換的過來，畢竟Adobe Xd用習慣了
最有感的就是「快捷鍵」！
常常做到一半要去看Figma的快捷鍵說明
比如說要將圖層移到最上層，Figma是按Cmd + Option + ]；而Adobe Xd是按Cmd + Shift + ]，有時會誤按Adobe Xd的快捷鍵，然後網頁就會直接跳下一個分頁，真的是會被嚇到😅
所以就紀錄一下自己常用或是常搞混的Figma快捷鍵吧～
Figma快捷鍵(Mac版本)
【基本】
拖曳畫布：空白鍵 + 左鍵
看到所有畫布：Shift + 1
畫布比例呈現100%：Shift + 0
放大選取的物件比例：Shift + 2
選中最裡層：Command + 左鍵
鎖定物件：Command + Shift + L
隱藏左右側邊：Command + \
隱藏左側邊：Command + Shift + \
組成Frame：Command + Option + G
查看物件間距：Option【工具/形狀】
開新的Frame：F
移動：V
鋼筆：P(雙邊曲線：按住Cmd拖曳、單邊曲線：按住Option拖曳)
移除鋼筆節點：Shift + Delete
矩形：R
圓形：O
吸色滴管：I 或 Control + C
1~9：設置透明度為10%~90%(0為100%)【變換形狀】
水平翻轉：Shift + H
垂直翻轉：Shift + V
遮罩：Command + Control + M
裁切圖片：Option + 雙擊圖片(點擊圖片兩下)【圖層】
移到最後：Command + Option + [
移到最前：Command + Option + ]
複製屬性：Command + Option + C
貼上屬性：Command + Option + V
重新命名：Command + R(可一次選取多個物件一起命名)
收起所有圖層：Option + L【Frame內的元件層層相疊】
進入下一層級的元件：先選取外層的Frame，再按Enter
往回上一層級的元件：Shift +Tab
切換Frame內同層級的元件：Tab
直接選擇Frame內任何的元件：Command +元件【文字】
減小字號：Command + Shift + <
增大字號：Command + Shift + >
減少字間距：Option + <
增加字間距：Option + >
減少行高：Option +Shift + <
增加行高：Option +Shift + >
文字靠右對齊：Command + Option + R
文字靠左對齊：Command + Option + L
文字置中對齊：Command + Option + T
文字加入連結：Command + K
底下就是我用Figma來試畫的UI，順便當練練視覺
► 做了兩個版本，版本一(左邊)是參考教學影片，所以外觀的設計跟教學影片比較類似；版本二(右邊)就將形狀和位置稍為變動一下。但整體來說，顏色和概念都是差不多的，只是外觀不太一樣而已
►版本一的簡略外觀設計流程
►版本二的簡略外觀設計流程
UI的外觀視覺設計是參考這支YouTUbe教學影片：
COLORFUL APP DASHBOARD DESIGN — Adobe XD Tutorial不過這支影片是教學用Adobe Xd畫UI，非用Figma。我追蹤這位作者Caler Edwards也蠻久的，一直很喜歡他的設計，他也會常常拍攝Adobe Xd的相關教學影片
以上就是剛學Figma的紀錄囉，自己是覺得不太能說是心得，因為才剛學不久，還是有很多功能不懂沒用到，也沒有實際用在工作上，所以無法去評比說出好壞，但能確定的是，基礎的功能都蠻簡單，易上手的，尤其是有用過其他軟體(我是用過Axure和Adobe Xd)，所以稍微摸一下，UI就能畫出來，因為基礎的功能都差不多，但如果是要做更進階的功能就有差異了，需要再去看教學影片
