免费高效!用 Paddy 让你的 Sketch 学会自动排版! - 优设-UISDC

免费高效!用 Paddy 让你的 Sketch 学会自动排版!

2018/04/24 8643评论区

徐小马:很多中后台项目的界面设计涉及大量的表格,每份终稿的输出,都要经历反复的调整间距、边距、对齐,Sketch 自带的排版功能已经远远不够用了。所以推荐给大家一个自动排版的插件:Paddy,合理的使用会提升设计师的时薪。

一、阅读准备和核心流程

掌握三个核心功能即可快速上手,笔者在这里以一张简单表格的制作为例子。

第一步:设置边距

首先我们制作一个上下左右间距为 16px 的单元格。只更改背景图层的名称,在其原有名称后按格式添加参数即可完成边距的自动调整。

快捷键为:Control + Alt + p,边距参数命名规则见下表:

有一点点 CSS 基础的同学可以很快掌握。

第二步:设置间距

我们将错乱的单元格垂直间距调整为0,在原有组名称后面添加参数即可完成垂直或水平方向间距的自动调整。

快捷键为:Control + Alt + Command + p,间距参数命名规则见下表:

注意二者不可同时存在。

第三步:设置对齐

将调整好间距的单元格进行左对齐,在添加间距参数的组名称后面添加对齐参数即可完成组内对象的自动对齐。对齐参数命名规则见下表,其中 l、c、r、t、m、b 分别是 left、center、right、top、middle、bottom 的首字母。

对齐参数既可以和间距参数复合使用,也可以单独使用

当然,Paddy 还有很多其他实用的功能。

二、其他功能

1. 忽略特定项

在边距参数中某项使用「x」可以让 Paddy 忽略对应边的边距自动调整。

在图层或组的名称前面添加「-」可以让 Paddy 在自动调整时忽略该对象。

2. 设置边界

可以在边距参数中使用「>=, >, <, <=, =」来设定边距的最大值、最小值。

3. 支持 Symbol

不得不说这是个异常好用的功能,解决了很多执行时遇到的问题。越来越多的插件开始和 Symbol 挂钩,这才是整个 Sketch 的精髓。

本文来自知乎专栏「非科班设计」,作者徐小马

「提升效率的 Sketch 技巧与插件」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/paddy-lets-sketch-automatically-typeset

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里