• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 免费高效!用 Paddy 让你的 Sketch 学会自动排版!

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

作者:徐小马 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含sketch,sketch插件,工作效率,效率工具,教程,经验分享,表格设计等相关知识,徐小马希望在学习及工作中可以帮助到您

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

一、阅读准备和核心流程

  • 插件官网:GitHub – 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 技巧与插件」

  • 《简单实用!七步学会用 Sketch 搭建复杂表格》
  • 《学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!》
  • 《6个能大幅度提升 UI 设计效率的 Sketch 插件》
  • 《用了这9个最强大的Sketch插件,工作效率提高了一倍!》

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

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

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

优设大课堂

您可能想查找下面的文章:

  • 高手进阶技巧!全方位深入理解 Sketch 库(上)
  • 高手进阶技巧!全方位深入理解 Sketch 库(中)
  • 大公司如何做设计系统?24 个 Sketch 组件库源文件合集下载
  • 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里
  • 免费高效!用 Paddy 让你的 Sketch 学会自动排版!
  • 学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 两分钟认识一款把 Sketch 变成 Principle 的插件:Diya
  • Sketch 49 的交互原型新功能怎么用?来看这篇教程!
  • 简单实用!七步学会用 Sketch 搭建复杂表格
  • 新鲜出炉!五个超方便的Sketch 48 新功能介绍

相关文章

  • 2017-08-06关于遇到的浏览器兼容问题及应对方法(推荐)
  • 2018-08-23一开始我连交互是什么都不知道,最后薪水却涨了6k….
  • 2018-08-23一个针对女性用户的照片编辑软件,要如何设计UI?
  • 2018-08-23UI新手排版入门!最容易上手的6个排版套路
  • 2018-08-23未来的趋势!好的 AI 对话体验应该是怎样的?
  • 2018-08-23六篇文章彻底掌握直方图:通道直方图
  • 2017-08-06设置网页图片热点链接以及坐标值示例代码
  • 2018-08-23淘宝刚发布的新版本,可能会引领2017年的UI设计风格
  • 2018-08-23超长篇干货!如何从交互维度量化用户体验?
  • 2018-08-23为什么你的用户测试是无效的? 来看高手的方法!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 从零开始设计一款APP之视觉还原+上线准备
    • 高手的设计流程!滴滴车主端5.0全新升级背后的设计思考
    • node调接口拉数据
    • 那些很熟悉但又叫不出名字的设计法则:系列位置效应
    • IndentationError: unindent does not match any outer indentation level
    • 3 步提升文案转化率,写出叫好又叫座的文案
    • 如何从0到1建立设计规范?来看腾讯设计师的总结!
    • 这个教程看完就会!如何为一个图表设计色彩?
    • 用这个方法临摹作品,你的UI自学才最有效!
    • 像做产品一样对Design System进行前期规划

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有