創(chuàng)建樣式 

樣式功能允許你定義對(duì)象的一組屬性,使得可以在團(tuán)隊(duì)的設(shè)計(jì)中重復(fù)使用。

你可以使用樣式來(lái)定義顏色,文本和應(yīng)用于對(duì)象的圖層效果,或者布局網(wǎng)格的結(jié)構(gòu)和外觀。

每當(dāng)你更改樣式的屬性時(shí),例如將文本顏色從紅色更新為藍(lán)色,使用該樣式的任何對(duì)象都將立即更新。

與組件一樣,可以通過(guò)將樣式發(fā)布到團(tuán)隊(duì)庫(kù)來(lái)共享樣式,這使你可以輕松地在團(tuán)隊(duì)項(xiàng)目中建立和維護(hù)一致的樣式。

在本文中,我們將介紹:

顏色樣式(包括漸變樣式)。

文字樣式。

圖層效果樣式。

布局網(wǎng)格樣式。

與你的團(tuán)隊(duì)分享樣式。

創(chuàng)建樣式 

你可以從現(xiàn)有對(duì)象創(chuàng)建樣式,這將允許你將某些應(yīng)用于對(duì)象的屬性保存為樣式,以便可以在其他對(duì)象上重復(fù)使用它。

 

1. 顏色樣式 

顏色樣式可應(yīng)用于設(shè)計(jì)中的填充,描邊和文本,你也可以為漸變創(chuàng)建顏色樣式。

 

選擇你要為其創(chuàng)建樣式的對(duì)象。

 

“屬性”面板中,單擊要保存的屬性旁邊的樣式圖標(biāo)(四個(gè)點(diǎn))。 (對(duì)于顏色樣式,這可以是填充或描邊屬性。)

 

 

 

單擊 Color Styles 菜單中的 “+” 圖標(biāo)以創(chuàng)建樣式:

 

 

 

系統(tǒng)會(huì)提示你為樣式指定名稱

 

 

 

單擊 Create Style 按鈕以保存樣式。

 

提示

 

我們建議根據(jù)你在設(shè)計(jì)中使用樣式的方式命名樣式,而不是僅使用顏色作為名稱。

 

為了更容易地查找和選擇樣式,你還可以通過(guò)使用斜杠命名約定命名它們來(lái)將樣式組織到組中。在樣式菜單中,你將看到通過(guò)團(tuán)隊(duì)庫(kù)共享的本地樣式和任何樣式。樣式將按團(tuán)隊(duì)名稱的字母順序排序,然后按文件名稱排序。

 

例如:要將所有文本顏色樣式組合在一起,你可以將它們命名為 Text/Purple, Text/Green, Text/Blue 等。然后,Figma 將在 “Text” 標(biāo)題下一起顯示這些顏色樣式。

 

漸變樣式

可以將漸變填充和圖像填充添加為樣式。

 

為漸變創(chuàng)建樣式時(shí),使用的顏色和漸變方向或角度都將保存到樣式:

 

2. 文字樣式 

樣式也可以應(yīng)用于文本,當(dāng)你想為不同的文本塊設(shè)置不同的屬性時(shí),這非常有用。

你可以將文本樣式應(yīng)用于整個(gè)文本對(duì)象,或?qū)⑵鋺?yīng)用于其中的部文字。

這非常適合定義標(biāo)題的樣式(例如 h1h2h3)和正文,以及確定如何在段落中設(shè)置不同的文本樣式(例如鏈接)。

創(chuàng)建文本樣式的過(guò)程遵循與顏色樣式類似的過(guò)程:

 

選擇你要為其創(chuàng)建樣式的文本。

 

 

單擊屬性面板中文本標(biāo)簽旁邊的樣式圖標(biāo)(四個(gè)點(diǎn))。

 

 

 

單擊 Text Styles 菜單中的 “+” 圖標(biāo)。

 

 

設(shè)置文本樣式的名稱。

 

 

單擊 Create Style 以完成該過(guò)程。

 

提示

無(wú)法使用文本樣式設(shè)置文本對(duì)齊方式,你需要單獨(dú)設(shè)置每個(gè)文本塊的對(duì)齊方式。

 

3. 圖層效果 

你還可以創(chuàng)建圖層效果,如內(nèi)陰影或陰影。

選擇你要為其創(chuàng)建樣式的對(duì)象。

如果尚未添加,請(qǐng)將需要的圖層效果添加到對(duì)象中。

單擊屬性面板中效果標(biāo)簽旁邊的樣式圖標(biāo)(四個(gè)點(diǎn))。

 

 

單擊 Effect Styles 菜單中的 “+” 圖標(biāo)。

設(shè)置圖層效果的名稱。

單擊 Create Style 以完成該過(guò)程。

提示

你可以為具有多個(gè)樣式的對(duì)象創(chuàng)建樣式,并且所有效果將包含在最終樣式中。

例如:如果你有多個(gè)屬性應(yīng)用于對(duì)象(例如,兩個(gè)投影和一個(gè)內(nèi)陰影),則所有這些屬性都將保存到一個(gè)圖層樣式。

 

4. 布局網(wǎng)格樣式 

最后,我們可以為布局網(wǎng)格創(chuàng)建樣式,如果你想要跨多個(gè)設(shè)計(jì)復(fù)制特定格式或結(jié)構(gòu),這將特別有用。

 

在畫(huà)布中創(chuàng)建或選擇框架。

 

 

在屬性面板中,將“布局網(wǎng)格”添加到“框架”。

 

 

更新布局網(wǎng)格以匹配你要保存到樣式的屬性。詳細(xì)了解布局網(wǎng)格。

 

 

單擊屬性面板中 Layout Grid 旁邊的樣式圖標(biāo)(四個(gè)點(diǎn))。

 

單擊+”圖標(biāo)。


設(shè)置布局網(wǎng)格樣式的名稱。


單擊 Create Style 以完成該過(guò)程。

 

與你的團(tuán)隊(duì)共享樣式 


你可以與團(tuán)隊(duì)共享樣式,或通過(guò)將樣式發(fā)布到團(tuán)隊(duì)庫(kù),從其他文件和項(xiàng)目中訪問(wèn)它們。

 管理及共享樣式 中了解有關(guān)共享樣式的詳細(xì)信息。

 

上一個(gè):Figma 布局網(wǎng)格 下一個(gè):ABBYY怎么離線激活?