Sketch自动布局神器:Flexbox[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组的图标是一种特殊的蓝色,上面还有图标来表示方向。

  1. 最里层横向排列的红色线框Stack组,其中有2个元素:星星和评论数。
  2. 中间层纵向排列的蓝色线框Stack组,其中有4个元素:应用名称、作者、分类、红色Stack组。
  3. 最外层横向排列的绿色线框Stack组,其中有2个元素:应用图标和蓝色Stack组。

Stack的实用诀窍:

  • Stack很适合用于定义同级图层间的排列规则。
  • 在Stack组里增加或删除元素,会重新排列其中图层。

  • 文字图层的伸展会移动相邻图层。

  • 拖拽可以轻松地重新排列子图层。

使用Stack实现Flex网格

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

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

https://www.youtube.com/watch?time_continue=2&v=g–AD_Yp5lk

使用AutoLayout和嵌套组,在Sketch中实现响应式Flex网格

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

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

自动布局插件下载:https://animaapp.github.io/Auto-Layout/

指南与文档:https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html

 

 

转载注明:yunrui
原文地址:colachan

分享到:

常见问题

  • 1、为什么PPT、APP和网页等模版里没有示例图片?
    因为这些素材只是模版,一般不包含里面的示例图片,示例图片是需要另外购买的;
  • 2、百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
  • 3、解压时提示损坏,是什么原因?
    可能没下载完,如果打不开请确定您下载的文件和百度网盘上一模一样大,如果您用的是MAC,下载下来的文件会比网上的大一些,如果文件一样大,还不能打开,请在底部留言;
  • 4、PS动作文件如何安装和使用?
    1.双击安装好所有的笔刷(.abr)、图案(.pat)和动作(.atn)等文件;
    2.选择分辨率在3000PX*3000PX,72dpi左右的高清素材图;
    3.使用英文版的photoshop;
    4.用PS打开素材,并且保证素材在background图层上(将素材合并到background上);
    5.新建空白图层,名为brush;
    6.在brush图层上用画笔覆盖素材主体物(该图层一般命名为brush,少量资源命名为profactions);
    7.在动作面板执行该动作,实现效果;
  • 5、素材更新频率和质量问题
    目前云瑞素材的日更新量增加了不少,所以多了很多不同种类的素材,之所以发这些素材,是为了满足更多人的需求,素材种类多了,就很难保证所有素材每一个人都喜欢,但品质我们还是会精选,也会根据用户数据反馈来调整更新策略;另外,后续也会和今日头条一样,做智能推荐,推荐你喜欢的内容,这样你不点的素材就很难再看到了。
  • 6、素材能商用么?
    素材仅供个人学习使用。

评价交流

返回页顶