提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
开放的sketch 插件很大程度提高了设计工作者的效率,而这次要介绍的插件,更是设计工作者的福音。
sketch自动布局插件Auto-Layout的Stacks-Flexbox功能介绍
Stack(堆栈)改变你所知道在Sketch中的一切布局方式
就像CSS中的Flex Box,iOS中的UIStackView和Android中的FlexboxLayout一样,Auto-Layout和其新的Stacks功能再次改变了游戏规则。
第一次,Sketch用户可以直接在Sketch中应用Flexbox技术,而无需使用CSS。
我们相信为设计师提供强大的设计理念是推动设计生态系统的关键。Flexbox改变了游戏,虽然它已经出现了好几年,但使用它你需要在浏览器中使用CSS,因此许多设计师无法应用它。Stack是一个非常简单和直观的Flexbox版本,但是拥有同样强大的功能。它使设计师能够根据列、行和网格进行思考和设计 从而使设计更加一致。
What is a Stack?
Stack是一种特殊类型的组,定义其子图层的布局。
stack组图标具有特殊的蓝色和方向的指示器。
到stack图层 - 选择它们,然后单击自动布局面板中的堆栈按钮。
Stack有3个属性:
1.方向:定义子图层的堆叠是水平还是垂直。
方向
2.对齐:可以是顶部/中部/底部/扩展
对齐
3.间距:定义每个子图层之间的间距。
间距
Stacks可以嵌套!
嵌套的stacks
关于Stacks的一些有趣的运用:
Stack是定义兄弟层之间的布局约束的好方法。
在Stack中添加或删除图层会重新对齐其子图层。
添加或删除图层会重新对齐其子图层
当文字图层被扩展时,兄弟图层会被推开并保持固定的间距。
通过拖放重新排列子图层的顺序。
Auto-Layout 插件下载: https://animaapp.github.io/Auto-Layout/
帮助和指导: https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html
以上摘自 Anima App 的medium文章
以及 Anima App的程序员小哥哥又为这个插件做了一个Flex-Grid文件,配合auto-layout使用效果甚好,啊想歌颂程序员哥哥,他也为此做了一个详细的讲解如何配合auto-layout使用的视频,但是是YouTube的视频地址,翻墙的同学可以看一下,地址:https://youtu.be/g--AD_Yp5lk
在文末我放上了我已经下载好的sketch插件:Auto-Layout插件和Flex-Grid文件,需要的同学,可以自行下载。
第一次写教程类文章(其实是翻译)很紧张,但是算是实现了2017年愿望lists上的一项(嘻嘻)而且是真的很喜欢这个插件。希望大家喜欢(鞠躬)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册