UI DNA是基于Photoshop的一款扩展插件，提供一系列图形设计功能，可以针对设计稿中的内容进行修改，包括阵列排列、文本表格編輯、變量和表达式设置等，增强了Photoshop原生功能，详细的小编提供了UI DNA教程，需要的ps设计师赶快下载吧！

插件功能

1、一個功能齊全的操作面板

在一处使用 UI 设计需要的所有功能

增强 Photoshop 原生功能

可定制*

2、變量與表達式

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

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

在文本框中用 "{{ 表达式 }}" 来渲染文本模板

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

3、解放設計生産力的快捷功能

Photoshop 没有却该有功能

長陰影與厚度層

文本與圖片填充

自由的陣列排列

文本表格編輯

UI DNA安装方法

支持 Photoshop CC 2017

使用自動安裝包可以直接下載後運行自動安裝。

如果使用手动安装包需要解压后复制 nullice.UI-DNA 文件夹到Photoshop 扩展目录。

UI DNA界面介绍

界面

UI-DNA 所有功能集中在一个 Photoshop 面板中，不同类别的功能被划分到了不同的子面板，每个子面板都可以通过点击右上角的按钮展开或者收起：

1. “选中图层”子面板

“选中图层” 子面板可以显示当前选中的图层，UI-DNA 大都数功能的目标对象都是当前选中图层，确定当前选中的图层有哪些是很重要的。

“选中图层” 子面板默认是收起的，只能看到选中图层数和简略的图层名，你可以展开它，看到更多详细的信息，包括图层类型、图层 ID、图层名称、图层 item index，

图层选中相关功能除了显示图层选中信息， “选中图层”子面板还有另一个重要的功能，点击右侧的按钮，可以看到图层选中相关功能的菜单。

2. “快捷功能”子面板

“快捷功能”子面板是集中了 UI-DNA 提供的直接一些设计中常用的功能，比如比例缩放、生成阵列、内容填充等。

快捷功能的“文本”、“形狀”類的功能按鈕要選中圖層中有文本、形狀類型的圖層才會顯示出來

3. “UI-DNA” 属性”子面板

这是 UI-DNA 的核心功能，它可以显示并修改选中图层的属性，操作起来跟原生的面板一样，修改属性后可以立即反映到图层中去。

“UI-DNA 属性” 不同类别属性的选项卡按钮左键点击是互斥的，也就是在不同类别属性的选项卡中切换，如果要同时显示多个类别属性的选项卡，可以右键点击：

4. “操作” 子面板

UI DNA使用教程

1.所有屬性可複制、粘貼

UI-DNA 中所有属性都可以用文本来编辑、复制、粘贴，即使是色彩或者下拉列表选项：

變量

2、使用變量与表达式

UI-DNA 的属性值中可以使用變量，也可以把属性值赋值给變量：

有关變量与表达式的详细说明将在单独的章节来介绍。

3、屬性選項卡

不同類別屬性的選項卡按鈕左鍵點擊時是互斥的，也就是在不同類別屬性的選項卡中切換。如果要同時顯示多個類別屬性的選項卡，可以右鍵點擊：

另外不是最常用的的屬性被隱藏在“高級”選項裏，需要時可以展開：

1.位置與尺寸

Photoshop 对图层位置与尺寸的修改除了实时形状图层可以在属性面板中修改以外只能用自由变换工具来修改，这对于需要精确控制位置、尺寸数值的 UI 设计来说并不方便。 相比之下 UI-DNA 的位置与尺寸属性提供了更实用的功能：

可以用精確數值修改任何圖層的位置與尺寸。

多選圖層時，每個圖層的修改都是獨立的，而非當做整體修改。如前文提到的。

可自動計算輸入的數學公式。

支持的属性 ：

簡稱名稱描述

XX 坐标图层 X 坐标

YX 坐标图层 X 坐标

H高度圖層高度

W寬度圖層寬度

錨點圖層尺寸改變時的錨點位置

锚点这里的“锚点”与 Photoshop 自由变换工具的锚点的效果一致：

更新內容

修复 选中多个图层时可能出现意外的触发渲染的问题，这个问题导致操作时可能不断扫描图层。