恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
神奇的sketch布局插件:Auto-Layout
0.0°
2017-02-24 自译外文 教程 原作者: Anima App 举报 15362 49 33 1

开放的sketch 插件很大程度提高了设计工作者的效率,而这次要介绍的插件,更是设计工作者的福音。



sketch自动布局插件Auto-Layout的Stacks-Flexbox功能介绍

Stack(堆栈)改变你所知道在Sketch中的一切布局方式



Image title

就像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图层 - 选择它们,然后单击自动布局面板中的堆栈按钮。


Stack有3个属性:

1.方向:定义子图层的堆叠是水平还是垂直。

Image title

方向

2.对齐:可以是顶部/中部/底部/扩展

Image title

对齐

3.间距:定义每个子图层之间的间距。

Image title

间距

Stacks可以嵌套!

嵌套

嵌套的stacks


关于Stacks的一些有趣的运用:

Stack是定义兄弟层之间的布局约束的好方法。

在Stack中添加或删除图层会重新对齐其子图层。

Image title

添加或删除图层会重新对齐其子图层


当文字图层被扩展时,兄弟图层会被推开并保持固定的间距。

Image title


通过拖放重新排列子图层的顺序。

Image title


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上的一项(嘻嘻)而且是真的很喜欢这个插件。希望大家喜欢(鞠躬)



更新:2017-02-24

下载
收藏

49人已收藏

nanala

右眼有颗痣

  • 34

    作品

  • 70

    粉丝

  • 37

    关注

  • sketch 58 新功能layout详解
  • 个人插画
  • 交互动效
  • peaceful moment with you

    猜你喜欢

      2017-02-24 自译外文 教程 原作者: Anima App 举报 15362 49 33 1

      神奇的sketch布局插件:Auto-Layout

      0.0°

      你确定要举报神奇的sketch布局插件:Auto-Layout

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年02月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      33
      49
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录