久等了！PHOTOSHOP 的设计构建工具UI-DNA正式发布！

把文本框的表达式属性勾选上，就可以在文本内容中用双花括号 {{　}}　包裹表达式，来把表达式或者变量转化成文本。这就像 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 还是测试版， BUG 还比较多，甚至偶尔还会卡死（为此 UI-DNA 甚至还自带重启扩展的功能，带重启功能的扩展，也没别人了）。

转载声明：作品来源于网络，不作任何商业用途