設計中的全局樣式

Figma 全局樣式

2018年5月左右，Figma 推出了全局 Style 的功能。Figma 的 Style 是能夠定義一組能夠在設計中重複使用的顏色、字體和效果（如陰影）。當你調整這些顏色的時候，使用到這些顏色的對象的顏色都會即時更新。

Figma 的 Style 和 Component， 這兩個功能極大優化了咱們的組件化設計的工做流，也可讓咱們更容易去創建和維護咱們整個項目的樣式一致性。

PaintCode Library

不知是否是巧合，Figma 的 Style 和 PaintCode 在早先四五年前推出的 Library 一模一樣，甚至一度懷疑 Figma 是有借鑑 PaintCode 的 Library 的。

在這以前，我已經使用過一年多的 PaintCode，以爲它的 Library 功能實在是太好用了，要比如今的 Figma Style 還要好，由於它自己除了 Figma 自己有的幾個特性以外，還能夠在 Library 中添加自定義變量。​這一強大的特性使得 PaintCode 在設計的時候能夠對繪圖進行更多控制 —— 好比能夠在繪圖中開一些參數出來，讓開發能夠傳參，這樣就可使繪圖有更多的變化。好幾回就在想，若是哪一天 Figma 能把 PaintCode 收了就行了（笑）。

PaintCode 的公司是 4 我的的小團隊，目前出了 PaintCode 和 Drama 兩個產品。

Variables

不過也不奇怪，不管是 Figma 的 Style 仍是 PaintCode 的 Library， 其實和前端開發中的全局 Variables 的理念也都是相似的，無非就是定義一系列的 Design Tokens 出來，在設計中重複使用，方便全局修改樣式。

Figma 和 PaintCode 的結合使用

​雖然這兩個工具都有相似的功能，可是他們在設計流程上是不衝突的。PaintCode 比 Figma 要嚴格不少，好比它爲了可以導出高質量的代碼來給開發直接調用，它的 Library 和 畫布不容許命名重複，並且對命名格式有嚴格要求。我更可能是將 Figma 中的 Color Style 和 Icon 之類的，導入到 PaintCode 中，再由 PaintCode 導出高質量的 StyleKit 供 iOS 開發使用。

而對於安卓，則能夠創建一個 xml 變量表，至關於樣式變量是由設計師嚴格把控的，這對於後期更換樣式有很大的便利：

最後

Paintcode 是對設計師和開發都很是好用的工具，不過它的社區好像不是很活躍。若是感興趣的話，能夠去它的官網上去看看文檔就能夠快速明白怎麼使用。不過它的官方文檔只有英文的，我最近翻譯把它的文檔翻譯成了中文，不想閱讀英文文檔的小夥伴能夠去看看，順便找下技術和翻譯錯誤哈哈哈：

• PaintCode 中文指南

參考連接

• Figma Styles
• PaintCode StyleKits
• PaintCode Variables

還有

若是對文章感興趣的話，能夠關注一下個人公衆號：