hi，如你所见这又是一篇译文，我的第5篇，英文无障碍的同学建议直接阅读原文，部分链接需要科学上网，文末有我下载下来的 Stack 插件，亲测真的很厉害，have fun~
Stacks 改变了一切你所认知的 Sketch 排版
就像 Flex Box 在 CSS 中, UIStackView 在 iOS 中, 和 FlexboxLayout 在 Android 中的表现一样 - Stacks带来了一个全新的自动布局功能，再一次，改变了玩法。
在最早期，Sketch 的用户能在不用 CSS 的情况下直接在软件中使用 Flexbox 技术。
我们相信，创造强大的设计理念是推进设计生态系统的关键。
即便只过了几年 Flexbox 依旧改变了玩法，想要应用它你需要在浏览器中使用 CSS，这让很多设计师与之擦肩而过。
Stacks 是一个很简单和直观的工具并且和 Flexbox 一样强大。它能让设计师根据行、列和网格间来思考和设计——让设计更一致。
什么是 Stack ？
Stack 是 Group 的一种特殊类型，用来定义它下面子图层的排版。
Stack Group 有一个蓝色的 icon 和一个代表排列方向的指示器
Stack 图层——选中它们并在 Auto-Layout 面板中点击 Stack 按钮
💡专业提示：
- 使用 Stacks 能确保一致性。
- 一致性能确保清晰。
-
使用 Stacks 能确保清晰。
（嗯，没毛病）
Stack 有3大性能：
- 方向：可以轻松定义 stack 下的子图层水平或者垂直排列。
方向
- 对齐: 可以在顶部、中间、底部和平铺对齐。
对齐
- 间距: 可以定义每个子图层的间距。
间距
Stack 还能嵌套。
嵌套的 Stack
解决疑惑
🔍🔎10个设计师里面有9个在第一次使用时搞不清楚嵌套的 Stack ！🔍🔎
图片中有几个 Stacks ：
向下滑你就会看到答案
正确答案是 3 ：
Stack Group 有一个蓝色的 icon 和一个代表排列方向的指示器
- 最小的红色的水平方向的 Stack 有两个部分：星星和回复数。
- 中等的蓝色垂直方向的 Stack 有4个部分在里面：App 名称，作者，分类和 Stack Group 1 。
- 最大的绿色水平 Stack 有两个部分在里面：App Icon 和 Stack Group 2 。
👊关于 Stack 的一些有趣的事实：
- 用 Stacks 在兄弟图层中定义布局是一个极好的方法。
- 添加或删除某个 Stack 下的图层会对剩下的子图层进行重新布局。
- 当文字图层扩充时会推动兄弟图层。
- 要重新布局子图层，用拖拽更方便。
视频攻略参见 Pablo Stanley 的教程。
Stack 中使用 Flex 网格
☝️Alan Roy在使用我们的测试版时很积极，他独创了自己的 Flex 网格系统。
他甚至录了10分钟的视频来解释其中的细节。我们强烈推荐你阅读他的教程，绝对会让你大开脑洞。
（我看了这位大神的视频，有25分钟 确实很牛逼啊，虽然没看懂。。。所以贴心的我把他的源文件下载下来了，小伙伴们自取哈23333）
我们的使命是让设计师专注自己的设计。我们正在创造一个能让设计师去定义，说明和构建所有元素和部件的工具，它包含用户界面／体验，而且最后还能自动化生成 1：1 还原设计的本地代码。这能使设计师从团队中独立出来，例如开发们，他们有时会有其他优先要考虑的事情。
自动布局插件下载: https://animaapp.github.io/Auto-Layout/
（我下载下来了，大家自取）
指南 & 文档: https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html
来自你的朋友 Anima App 👋
加入我们来自由地讨论吧 Facebook Group
译者：
我最后再说两句，这个插件（团队）太牛逼了😂，我怎么感觉写界面的前端们很危险呢😂。你们看看人家官网的图：
能想象吗，自己竟然在用前端的思维方式来布局设计稿，这样适配起来多顺滑，多屏幕适配的时候自己动动手指就能看出问题，再也不用和开发小哥们撕：这个怎么和设计稿上的不一样啊？！交流的时候也能挺直腰杆了，颤抖吧人类。
另，我发现创建了 Stack 文件夹之后，再创建 Symbol 就不好使了，所以，你们知道就好～
网友评论