功能特色：

一个功能残缺的操作面板

在一处运用 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 的部署功能比此外工具愈加锐敏，它的部署功能不光可能对于任何图层运用，而会自动合计选中图层的间距，当你更正现有图层时这就颇为利便了：

自动合计间距也象征着它可能把一键凌乱的图层变患上规整：

除了按间距部署的阵列，尚有按网格部署的阵列，详细这里就未多少说了。