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

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

Sketch最新Beta版本下载

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

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

11 月还没结束，Sketch61 就已经出来了，距离 60 版本发布才半个多月。

如果想体验 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 个属性，分别对应不同的图标，下面是每个属性的简单介绍。具体用法可以看下这篇文章：

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

Sketch 58 Beta 版本已于近期推出（其实最近一段时间已更新了好几个测试版），官方终于推出 Smart Layout 智能布局，让 Symbol 组件获得响应功能，变得更加灵活和强大。

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黑客」