品牌型號(hào)：聯(lián)想GeekPro 2020
系統(tǒng)：Windows 10 64位專(zhuān)業(yè)版
軟件版本：Figma入門(mén)版
Figma擁有優(yōu)秀的矢量圖形設(shè)計(jì)功能，能幫助設(shè)計(jì)師輕松在線(xiàn)設(shè)計(jì)產(chǎn)品。同時(shí)，Figma也提供了豐富的現(xiàn)成UI組件資源，一鍵就能應(yīng)用在設(shè)計(jì)面板中，可大大提升設(shè)計(jì)師的工作效率。接下來(lái)，一起來(lái)學(xué)習(xí)下Figma怎么使用現(xiàn)成的UI組件，F(xiàn)igma怎么使用剪貼蒙版的相關(guān)內(nèi)容。
一、Figma怎么使用現(xiàn)成的UI組件
Figma在設(shè)計(jì)面板中內(nèi)置了豐富的資源，其中包括各種現(xiàn)成的UI組件，可快速添加各種常用的圖形、圖標(biāo)等。接下來(lái)，本文會(huì)簡(jiǎn)單演示Figma怎么使用現(xiàn)成的UI組件。
首先，如圖1所示，點(diǎn)擊左側(cè)面板的草稿添加按鈕，選擇添加“設(shè)計(jì)文件”。
圖1：創(chuàng)建設(shè)計(jì)文件
創(chuàng)建設(shè)計(jì)文件后，如圖2所示，左側(cè)工具欄會(huì)默認(rèn)顯示文件面板。如果要使用現(xiàn)成的UI組件資源，需要在左側(cè)工具欄中切換“資源”面板。
圖2：資源
在資源面板中，如圖3所示，包含了搜索欄以及各種組件庫(kù)列表。將所需的組件關(guān)鍵字輸入搜索欄，即可快速檢索所需的UI組件。當(dāng)然，我們也可以打開(kāi)列表中的組件庫(kù)，選擇合適的組件使用。
圖3：組件庫(kù)
比如打開(kāi)簡(jiǎn)單的系統(tǒng)設(shè)計(jì)元素組件庫(kù)，如圖4所示，可添加各種簡(jiǎn)單的按鈕圖標(biāo)組件。將組件從庫(kù)拖入設(shè)計(jì)面板，即可快速添加圖標(biāo)。
圖4：添加組件
添加了圖標(biāo)組件后，選中組件，如圖5所示，可在右側(cè)工具欄對(duì)組件的屬性進(jìn)行調(diào)整，比如調(diào)整圖標(biāo)的填充顏色、填充透明度、描邊效果、邊距等。
圖5：屬性調(diào)整
二、Figma怎么使用剪貼蒙版
Figma的剪貼蒙版能隱藏部分的圖層內(nèi)容，起到控制圖層顯示范圍的作用。Figma的剪貼蒙版也常作為遮罩使用，圖層內(nèi)被遮擋的區(qū)域會(huì)隱藏，而未被遮擋的區(qū)域則會(huì)顯示出來(lái)。下面一起來(lái)看看Figma怎么使用剪貼蒙版。
首先，使用底部的插入圖形工具繪制圖形以及插入圖片。
圖6：繪制矩形
如圖7所示，在設(shè)計(jì)面板中繪制一個(gè)橢圓形，并插入一張圖片，以制作橢圓形的剪貼蒙版。在橢圓形蒙版的作用下，圖片僅會(huì)顯示局部的圖像。
圖7：繪制圓形與導(dǎo)入圖片
完成對(duì)象的插入后，如圖8所示，在Figma左側(cè)的圖層面板中，會(huì)自動(dòng)新增兩個(gè)圖層，分別是橢圓形圖層與圖片圖層。
接下來(lái)，我們需要將橢圓形設(shè)置為剪貼蒙版，右擊橢圓形圖層，在彈出的右鍵快捷菜單中選擇“設(shè)為蒙版”即可。
圖8：設(shè)為蒙版
完成蒙版的設(shè)置后，如圖9所示，橢圓形圖層的上一級(jí)會(huì)出現(xiàn)一個(gè)蒙版組，此時(shí)，將圖片所在的圖層拖到橢圓形圖層上方，注意圖片圖層需添加在蒙版組內(nèi)。
圖9：移動(dòng)圖層
圖層調(diào)整效果如圖10所示，可以看到，在左側(cè)圖層面板中，圖片與橢圓形所在的圖層均包含在蒙版組內(nèi)。按照以上圖層設(shè)置，設(shè)計(jì)面板中會(huì)呈現(xiàn)出橢圓形的遮蓋效果，在橢圓形區(qū)域的圖像會(huì)顯示出來(lái)，反之則會(huì)隱藏。
圖10：蒙版效果
三、小結(jié)
以上就是關(guān)于Figma怎么使用現(xiàn)成的UI組件，F(xiàn)igma怎么使用剪貼蒙版的相關(guān)內(nèi)容。Figma提供了豐富的組件庫(kù)資源，可以直接使用到產(chǎn)品設(shè)計(jì)中，以減少圖形繪制的時(shí)間，提高工作效率。另外，F(xiàn)igma可利用剪貼蒙版制作局部遮蓋的效果，讓產(chǎn)品的設(shè)計(jì)更具變化與多樣性。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。