ps UI-DNA插件

UI-DNA插件是一款適用于ps的UI專用構建插件，這款插件為 Photoshop 帶來了真正上的變量，讓設計稿中組件的復用與修改變得更加便捷與靈活，此外還提供了一系列提高圖形設計特別是 UI 設計效率的功能。

功能特色：

一個功能齊全的操作面板

在一處使用 UI 設計需要的所有功能

增強 Photoshop 原生功能

可定制*

變量與表達式

用變量輔助設計，修改一處，處處生效

雙向綁定，每個屬性值都可以設置為變量，也可以把屬性值賦值給變量

在文本框中用 "{{ 表達式 }}" 來渲染文本模板

通過變量與表達式讓你能實現動態、易修改的設計

解放設計生產力的快捷功能

Photoshop 沒有卻該有功能

長陰影與厚度層

文本與圖片填充

自由的陣列排列

文本表格編輯

使用教程：

在設計中使用變量與表達式吧！

在 Photoshop 制作的組件復用一直很是問題，雖然有智能對象可以實現圖層或圖層組整體的復用，但是智能對象的編輯是脫離當前文檔的，把圖層和變成智能對象相當于喪失了編輯的便捷性，所以 Sketch 、 Affinity Designer 甚至 illustration 的 Symbol 一直是使用 Photoshop 的設計師羨慕的功能。

UI-DNA 并沒有提供 Symbol 一樣的功能，而是提供了對智能對象機制的補充（整體復用智能對象就足以），對于組件復用而言更加靈活，自由度更高的解決方案：變量

使用 UI-DNA 可以為幾乎所有圖層屬性設置變量，這意味著你可以在各個圖層間共享填充顏色、描邊設置、文本、位置、高度、寬度、陰影、圖層樣式…..當你需要修改時，只要修改原型圖層，所有使用變量的圖層的相應屬性都會被修改，這個變量應用到實際圖層過程被稱之為渲染。

不僅是變量，還可以把圖層的屬性設置為表達式，像是這樣把圖層寬度設置為某變量的一半再減 10：

表達式：A/2 -10

這意味著可以隨心所欲的完成動態的布局，像是下圖這樣：

為了方便的輸入， UI-DNA 還提供了會智能賦值的 @ 開頭的對象變量，可以不為單個屬性一一建立變量，單個屬性會賦值成為對象變量的一部分，當引用時會根據目標屬性來取相應的值。

比如可以把圖層的寬度和高度都賦值到 @a ，當在另一個圖層的高度屬性引用 @a 時就會引用@a 里的高度值，在寬度屬性中引用 @a 時就會引用 @a 里的寬度值。另外還可以用 @a.w 或@a.h 來明確要引用的值。

另外，在文本框中也是可以使用變量和表達式的：

把文本框的表達式屬性勾選上，就可以在文本內容中用雙花括號 {{　}}　包裹表達式，來把表達式或者變量轉化成文本。這就像 Web 前端中 Angular、或者 vue 對 HTML 所做一樣，還有像是 rgb() hsl() 這樣的內置函數把顏色轉化成不同的文本格式：

色彩1：{{cc1}}

色彩1：{{rgb(cc1)}}

寬度：{{@a.w}}

高度：{{@a.h}}

比例：{{@a.h/@a.w}}

陰影大?。簕{@a.quickEffect.dropShadow.blur}}

這意味著可以在你可以在文檔里做動態的標注，這樣的標注可以使用 Photoshop 里各種各樣的效果，比起脫離文檔標注，可以更自由設計的外觀。

除了文本內容，智能對象的內容（文件路徑）也可以使用變量來指定，把路徑設置為 > 開頭就表示這個路徑可以使用 {{ }} 來解析表達式 ：

{{style1}}/img.png

文檔的圖層效果和內容都已經可以用一系列變量來控制的了， 也就是說內容、布局、外觀都可以分離了，這意味著可以把設計稿模板化，修改內容只需要修改變量，可以批量的替換內容、替換布局、替換顏色、字體、樣式，可以把文字內容完全交給文案，或者從別的格式轉換而來。

太復雜？還有簡單粗暴的

變量與表達式很強大，但是可能對于很多人來說太復雜，沒關系，UI-DNA 還提供了一系列不會改變工作流程的快捷功能，涵蓋了圖形設計的各個方面，由于太多了，這里選幾個代表性的來介紹。

陣列與排列

創建陣列（或者說 N 宮格）是設計經常會用到的工作，當然排列也是。

UI-DNA 派生陣列也是就是根據一個圖層創建多個排列好的副本，這和別的工具里 Grid 一樣。

而 UI-DNA 的排列功能比別的工具更加靈活，它的排列功能不僅可以對任何圖層使用，而會自動計算選中圖層的間距，當你修改現有圖層時這就非常方便了：

自動計算間距也意味著它可以把一鍵雜亂的圖層變得規整：

除了按間距排列的陣列，還有按網格排列的陣列，具體這里就不多說了。