Sketch 62 Beta版本探秘，看看都有什么新功能！

Sketch 推出了 62 Beta 版本来迎接 2020。从一月的 53 开始到现在，总共推出了 10 个大版本更新。下面就一起看下 62 版本的新功能。

Sketch最新Beta版本下载

如果想知道 61 版本的新功能，请看这篇文章：

如果想体验 Sketch 最新 Beta 版本，请进入 Sketch 测试版主页下载 https://www.sketch.com/beta/。但是要记住，一定不要用在自己的正式文件中，防止修改后，低版本打不开。

Sketch 62 要求 Mac 系统版本是 macOS High Sierra 10.13.4 及以上，下面是 Sketch 各大版本对应的 Mac 系统版本，如果遇到新版的 Sketch 打不开就需要检查下自己的系统版本。

智能布局新增最大值和最小值

自从 Sketch58 新增了 Smart Layout 智能布局功能后，UI 设计师可以很方便地通过制作弹性组件来应对各种不同状态的需求。

在新建 Symbol 组件时，弹窗新增 Layout 选项，总共有 7 个属性，分别对应不同的图标，下面是每个属性的简单介绍。具体用法可以看下这篇文章：

Sketch62 版本的智能布局新增了最大值和最小值功能，选择好布局方式后，就可以在右侧属性面板区域设置。这里的最大值和最小值规定了智能布局对象的两个临界点，可以分别单独设置。

水平布局设置宽度的最大和最小值：

垂直布局设置高度的最大和最小值：

那么这个最大值和最小值对我们的工作有什么实际作用呢？

两种宽度按钮

这里用上图中最常见的按钮组件作为例子。

我们经常使用的按钮是固定宽度按钮，和字数多少没关系（当然要在合理范围之内）。例如下图，按钮宽度是80，不管是多少字，宽度始终不变。好处是整齐、标准，容易排版布局。

固定宽度按钮在CSS代码中，直接把宽度写死文字居中即可，比如  width:80px

另一种按钮是弹性宽度按钮，两端留固定的边距，字数越多宽度越大。好处是灵活，遇到极端特殊情况不至于文本溢出。

弹性宽度按钮在 CSS 代码中就不能写具体的宽度数值了，而是要使用padding-left和padding-right，即左边距和右边距。例如上图的弹性按钮可以写成

padding-left:16px
padding-right:16px

最小宽度的弹性按钮

但是在实际工作中也会遇到这样的问题：正常字数，常见的2、3、4个字，按钮宽度固定，比如始终保持80宽，这样可以满足大多数需求。遇到极端情况，比如8个字，我们需要让按钮两端始终保持边距16，宽度跟着字数多少走，但不能小于80，这个该怎么办呢？

在Sketch62版本之前，我们可以设置按钮为水平智能布局，字数少宽度小，字数多宽度就长，如果想保持一个最小宽度，比如2、3、4个字保持80的宽度，那么我们需要手动拉伸按钮，但这样的话会破坏弹性宽度，治标不治本。

Sketch62版本更新的最大值和最小值功能就可以完美解决这个问题。

比如设置宽度最小值为80，就是说这个智能布局规定了对应按钮Symbol最小宽度是80，不能再小了。接下来试着改变数字。

可以看到，由于设置了最小宽度为80，按钮中即使只有一个字，宽度也会始终不会小于80，这就是最小值的作用。

最大值同样的道理，只要设置好对应数值，在不手动拉伸的情况下，宽度不会超过设置的最大值。

实际上，Sketch这次增加的最大值和最小值，比如宽度，对应CSS中的max-width和min-width两个属性，也是Web前端中比较常用的。

文档保存优化

Sketch62中保存文档时会新增两个选项，分别是：保存在本地电脑和保存在Sketch Cloud。

还有其他的一些更新点，也主要是对Sketch Cloud 的优化，可见在Figma的追赶下，Sketch也逐步重视云端的相关功能。

总结

前有Figma的攻城略地，后有Adobe XD的紧追不舍，2020年Sketch将会给我们UI设计师带来哪些新功能和新的设计工作流呢？让我们拭目以待。

欢迎关注作者的微信公众号：「UI黑客」