創(chuàng )建樣式 

樣式功能允許你定義對象的一組屬性,使得可以在團隊的設計中重復使用。

你可以使用樣式來(lái)定義顏色,文本和應用于對象的圖層效果,或者布局網(wǎng)格的結構和外觀(guān)。

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

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

在本文中,我們將介紹:

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

文字樣式。

圖層效果樣式。

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

與你的團隊分享樣式。

創(chuàng )建樣式 

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

 

1. 顏色樣式 

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

 

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

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

提示

 

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

 

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

 

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

 

漸變樣式

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

 

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

 

2. 文字樣式 

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

你可以將文本樣式應用于整個(gè)文本對象,或將其應用于其中的部文字。

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

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

 

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

 

 

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

 

 

 

單擊 Text Styles 菜單中的 “+” 圖標。

 

 

設置文本樣式的名稱(chēng)。

 

 

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

 

提示

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

 

3. 圖層效果 

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

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

如果尚未添加,請將需要的圖層效果添加到對象中。

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

 

 

單擊 Effect Styles 菜單中的 “+” 圖標。

設置圖層效果的名稱(chēng)。

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

提示

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

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

 

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

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

 

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

 

 

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

 

 

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

 

 

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

 

單擊+”圖標。


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


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

 

與你的團隊共享樣式 


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

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