Stack自动布局：Sketch中的Flexbox

hi@victor42.work (Victor42) — Sun, 26 Feb 2017 00:57:13 +0000

[国外设计第164期]

Skacks会彻底改变你对Sketch布局方式的理解。

就像CSS中的Flex Box、iOS中的UIStackView和Android中的FlexboxLayout——Stack的自动布局可以再次改变整个局面。

Sketch用户终于可以在不用CSS的情况下，直接使用Flexbox的排版技术。

我们相信，推动设计生态前进的关键在于，创造出强大的设计概念。

Flexbox已经彻底改变了局面，它出现已有好几年了。但要使用它，你得在浏览器中使用CSS来设计，因此对于多数设计师可望不可及。

Stack是另一种形式的Flexbox，它更直观，但能力丝毫不减。它能使设计师以列、行、网格的思维来思考设计——使设计更加一致。

Stack是什么？

Stack是一种特殊的组，定义了其内部图层的布局方式。

Stack组的图标是一种特殊的蓝色，上面还有图标来表示方向。

要使图层变为Stack模式，在Auto-Layout面板中点击Stack按钮。

小提示：

Stacks能产生一致性。

一致性使设计清晰。

Stacks能使设计清晰。

一个Stack组有3个属性：

Stack可以嵌套使用！

90%的设计师第一次都会理解错！

下图由多少个Stack组构成：

正确答案是：3。

Stack组的图标是一种特殊的蓝色，上面还有图标来表示方向。

Alan Roy，我们产品内测小组的一位多产的成员，用Stack创造出了Flex网格系统。

他写了一篇详细解释，并且附带一段10分钟的视频。我们强烈建议阅读和观看这组教程。让人脑洞大开。【译者注：需科学上网】

改善设计体系，便于缩放和统一。

我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具，让设计师定义和构建UI与UX设计中所有零零碎碎的元素，并且最终能自动生成本地代码，1:1还原设计。这就使设计师不依赖团队的其他部分，比如开发人员的优先关注点就与设计团队不同。

作者信息：Anima App Empowering designers to own their design.