sketch里的ios控件_「插件」五分钟了解微信团队打造的 Sketch 插件 :WeSketch
前言
WeSketch 是一个强大的 Sketch 插件合集,由微信设计团队量身打造,让设计师和开发者更佳高效的使用 Sketch。
whose.design - 发现更多设计工具www.whose.design
- 阅读时间:5分钟
- 流量预估:2.6MB
下载地址
- Github:weixin/WeSketch
- 百度网盘:https://pan.baidu.com/s/1pLVvP3P
WeSketch 官方介绍
- 更高效的团队协作,如:UI Kit 同步、色板同步等。
- 更快捷的交互设计,如:图标库、自动连线、标记注释、全局替换文字、字体、颜色。
- 更精准的前端还原,如:补齐宽高导出图片、导出 CSS 代码(支持小程序)等。
面板功能
对于一个尝鲜者,第一步就是找到插件的工具面板。我们先来试试面板上的十一个功能。
1、连线/Link(command + shift + 1)
众所周知,四娃和五娃是一起出生的,可以把他俩连在一起。
线有点粗哈哈,距离过短不适合使用。线不在 Artboard 上,是锁定在 Page 上的,因此不会跟随 UI 元素的拖动(没有 Omni Graffle 中磁力点的功能)。适合设计师在标注页面间跳转逻辑时使用。
2、标注/Mark(command + shift + 2)
六娃常年隐身,我们需要标注下他的位置。
选中目标后点击可以点击三下,第一下标注在右边出现,第二下会将标注换到左边,第三下则会取消。目前只支持数字序号。这个应该是要配合文本框使用的,在页面上逻辑较复杂处 mark 一下,然后在文本框里打上序号并进行细节描述。
删除中间序号的话,会让你选择是保留序号还是重置序号。
3、Font/字体替换(command + shift + f)
可以替换整个文件或者当前页面的字体。
4、Text/文本替换
四娃擅火,他希望大家叫他火娃。
同样支持全文件以及当前页面的替换,但是用词和 Font 功能中不同,不知道是不是不同的工程师开发的。另外,支持正则表达式,懂行的同学可以慢慢尝试。如果 PM 要求把页面中所有的“手机”替换为“移动设备”,这个功能可以帮上不少忙。
5、Color/颜色替换(command + shift + c)
六娃闪现后继续隐身。
有时候会接到这么一个需求,需要微调下整个产品的主色调。需求虽小,工作量却是非常饱和,先从 symbol 下手,然后还要挨个界面查漏补缺。颜色替换功能则解决了这个设计师头疼的问题,简化了设计稿中全局改色的操作。
6、Icon/图标库
他们发现爷爷没了。
不支持直接拖移导出。支持自定义图标的尺寸和颜色。面板上方有筛选功能,但目前均只有一个选项,应该是还在完善中。每个成熟的设计团队都有自己的一套图标库,有的用文件夹管理,有的全部放在 .psd 里,有的放在 Sketch 文件里。还有些设计师喜欢去阿里的 Icon Font 上找图标素材。这个图标库则是无缝嵌入了设计流程,让设计师的注意力都停留在 Sketch 里,而不用转场。另外安利大家两个应用,Nucleo 和 Icons8,都是非常好用的图标库。
7、UI Kit/同步 UI 库
可以导入仅作演示,并非放出的工具,希望大家制作自己的 Kit。可以将团队的 UI Kit 快速导入,不需要原始的粘贴复制大法了。
8、Palette/同步色板
该功能可将其他 Sketch 文件中的色彩配置导入。笔者手贱,在 Color Set/Settings 中移除了 Project,后来试了很多方法都无法还原。后来打开另一台电脑重新安装后拷贝下了资源链接,放出来备份下(仅作演示,并非放出的工具,希望大家制作自己的 Kit。):
- WeUI_UIKIT: http://tmtdemo.qq.com/sketch/weui.sketch
- WeUI_COLOR: http://tmtdemo.qq.com/wechatcolor.json
- AndroidDesign_UIKIT: http://tmtdemo.qq.com/sketch/android.sketch
- iOSDesign_UIKIT: http://tmtdemo.qq.com/sketch/iOS.sketch
9、Resize/补齐宽高/command + shift + u
大娃成熟了,出山。
这个功能名字叫补齐宽高,其实就是一种高自由度的切图导出方式,比较实用。这个功能用在设计最后环节,可以根据工程师的需求选择格式、分辨率甚至素材在切出图片中的布局。
10、Picker/快捷取色
chickens
11、CSS/生成代码/command + shift + d
ribs
其他功能
在插件菜单中,还有几个的功能可能会用到。
1、标注样式设置
这这里更改连线和标注的颜色和线宽。
2、资源路径设置
在这里添加团队 UI Kit 的存储路径,方便导入。
3、导出图片格式设置(支持小程序)
4、插件设置
可以设置各个功能的快捷键以及是否在工具面板上出现。
whose.design - 发现更多设计工具www.whose.design
总结
WeSketch 在功能和体验上,还有一定的进步空间。但是这种追求高效工作流的意识,值得每个设计团队学习。也许三五次迭代后,WeSketch 会成为诸位 Sketch 中的常驻插件
欢迎私信交流。作为知乎老透明,第一次发声,大家多给意见。
Thanks for your time.
其他文章
- 插件:CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya
- 技法:Library | Colored Text | Symbol | Shared Text | Resizing | 流程图 | 文档 | 表格
- 工具:InVison Studio | Nucleo | Feedly
- 案例:Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe
sketch里的ios控件_「插件」五分钟了解微信团队打造的 Sketch 插件 :WeSketch相关推荐
- sketch里的ios控件_使用Sketch建立Design System
一. 有关Design System 之前的文章<使用Adobe XD建立Design System>中介绍了什么是Design System,它有什么用,在设计的哪个阶段使用以及如何用A ...
- sketch里的ios控件_Sketch效率实现飞跃般的提升?先收下这些Symbol技巧
用Sketch做界面设计也有些年头了,一开始无情的工具能全程手动加复制粘贴,至于速度么,全看手速了.后来学会了一些偷懒的技巧,才真正开始工业化生产页面,其中一项就是Sketch自带的 Symbol 功 ...
- sketch里的ios控件_30个让你眼前一亮的iOS Swift UI控件!
前言 笔者接触 iOS 开发有一段时间了,尤其特别喜欢UI部分,特意收集整理了30个让你惊艳的第三方开源控件(swift),无论是应用到项目中还是用来学习都能让你大呼过瘾,废话不多说,直接上图上链接! ...
- android github 评分控件_「开源」Arcgis for Android测量工具更新至V1.9,新增绘制控件...
开源地址:https://github.com/roomanl/ArcgisTool 封装Arcgis Runtime for Android 100.6.0地图基本操作. 包括:测量工具控件及测量接 ...
- vivado中bit文件怎么没有生成_「超实用」一分钟学会用最小存储空间保存Vivado工程...
在平常调试FPGA的过程中,大家会发现Vivado工程动辄数百兆大小,甚至几个G都很常见.如果调试的版本过多,就连几个T的硬盘也不够用.怎么办呢?其实,Vivado自带了一种使用tcl命令保存viva ...
- ios 控件徽章_一行代码给你的控件加上徽章(Badge)
不废话,先上图 BadgeView 其实在开发众多APP中,可能我们都需要用到这种BadgeView控件,以前可能是在需要的地方加个图标上去,这样每次有这样的需求的时候就需要在布局里写个控件上去,很麻 ...
- 如何设计一个 iOS 控件?(iOS 控件完全解析)
前言 一个控件从外在特征来说,主要是封装这几点: 交互方式 显示样式 数据使用 对外在特征的封装,能让我们在多种环境下达到 PM 对产品的要求,并且提到代码复用率,使维护工作保持在一个相对较小的范围内 ...
- iOS控件之UILabel
原文链接: iOS控件之UILabel 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/Major ...
- Scott Mitchell 的ASP.NET 2.0数据教程之三十九:: 在编辑和插入界面里添加验证控件...
原文 | 下载本教程中的编码例子 | 下载本教程的PDF版 导言 到目前为止的讨论编辑DataList的教程里,没有包含任何验证用户的输入,即使是用户非法输入- 遗漏了product的name或者负的 ...
最新文章
- 解决Linux中使用google chrome浏览器出现:ERR_PROXY_CONNECTION_FAILED 代理错误,导致不能够上网
- idea 怎么快速创建类的快捷键_「快捷键设置」[IDEA]常用快捷键和个人设置 - seo实验室...
- Fragment要点复习
- java 中的finally 语句块执行顺序
- GitHub for windows使用教程(三) 团队协作流程
- C#设计模式(9)——装饰者模式(Decorator Pattern)
- 京东布局消费物联网 聚合产业链共建生态
- 开源阅读_开源如何维持您的阅读习惯
- pycharm搭建spark环境
- 【转】pom.xml详解
- 华为畅享max支持鸿蒙,华为手机怎么升级鸿蒙?华为鸿蒙系统支持手机型号大全...
- python 微信步数修改
- 使用HttpClient4来构建Spring RestTemplate
- Android脱壳工具整理
- 胃病患者饮食结构注意事项
- script type=text/JavaScript是什么
- 闭式系统蒸汽管径推荐速度_暖通设计常用参考数据1
- 现代物流仓储自动化实验系统
- 2018年度区块链安全报告
- 量化交易中,如何使用Python计算「筹码分布」指标【附代码】 [量化小讲堂-64]