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