分享

Figma 教學 : 怎麼解除 mask / 遮罩 ?

一直以來都是用 Photoshop 做視覺的我,不管是做活動網站、官網或是landing page 的一頁式網頁,都是用 photoshop 一條龍做到尾,直到前年跟其他設計交流後,才開始用了自己的第一個 UI 設計工具 Adobe XD 來做排版。
而從 2020 下半年開始就看到許多設計相關社團都在分享另一個 UI 設計工具 Figma 有多好用之類的,於是拖到了現在決定直接用 Figma 來做一個專案,畢竟實做還是學的最快。
過程中我是搭配 Hahow 好學校買的這堂【產品設計實戰:用Figma打造絕佳UI/UX】線上課邊學邊實作的,比自己摸索更多了許多扎實的知識。
比起 Adobe XD,Figma沒有這麼的讓我無障礙學習,反而在一些介面操作上很有障礙,但畢竟越來越多公司需求要會 Figma,所以還是硬著頭皮繼續學。
很快地就遇到一個我覺得明明應該要很簡單,卻卡了我一些時間的工具操作,那就是遮罩 / mask。
有用過 Adobe XD 的人應該都知道要用遮罩就是將兩個物件交疊然後按下 Ctrl + Shift + M 就可以了,然後取消遮罩很自然地就是按下 Ctrl + Shift + G (被photoshop訓練得很習慣了)。

而 FIgma 則是按下 Ctrl + Alt + M。

figma UI 設計
figma UI 設計
左上角也可以看到像上圖這樣星星跟方形色塊被包覆在 Mask 裡面,那要取消遮罩的話,按照過往的邏輯我很自然地就按下 Ctrl + Alt + G,結果 guess what ?
figma UI 設計
它就變成一個 Frame 了,因為 Ctrl + Alt + G 是變成 Frame selection 的快捷鍵,那麼再按照過往的習慣取消群組總可以了吧 ( 因為 Adobe XD 按右鍵點選 Ungroup Mask 就可以取消遮罩了 )。
figma UI 設計
點選 Ungroup 之後更讓我霧煞煞了 (見下圖)。
figma UI 設計
左邊確實可以看到 Mask group 已經取消掉了,但是右邊的物件還是被遮罩的樣子。
可能是我被 Adobe 的快捷鍵荼毒太深,一直覺得以往那樣操作是很合理的,結果在 Figma 這邊想取消遮罩卡了我快半小時,一度覺得該不會這是不可逆的吧,一變成遮罩一輩子就只能當遮罩@@。
最後發現原來我少了一個步驟,取消遮罩確實是按 Ctrl + Shift + G (也就是 Ungroup ),但這只是第一步驟,第二步驟你還要對已經變成遮罩的圖層 (下圖紅框處) 按下 Ctrl + Alt + M 才算解除遮罩。
figma UI 設計
當然你也可以按下圖中紅框的按鈕 (記得要選到已經變成遮罩的圖層),一樣可以取消遮罩。
figma UI 設計
如果你也跟我一樣被這白癡問題困擾到,希望這篇文章能幫到你,Figma 我覺得會用的話可以很好玩,但有些東西反而沒有 Adobe XD 直覺,但工具就是用久了就熟悉了,等用 Figma 做完專案後再來分享實作心得。
#figma  #UI  #設計 
分類:學習

評論
更多文章
載入中... 沒有更多了