創(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)共享樣式的詳細信息。