微信设计团队量身打造,最强Sketch插件合集!


一个强大的 Sketch 插件合集,由微信设计团队量身打造,让设计师和开发者更佳高效的使用 Sketch。

  • 更高效的团队协作,如:UI Kit 同步、色板同步等。

  • 更快捷的交互设计,如:图标库、自动连线、标记注释、全局替换文字、字体、颜色。

  • 更精准的前端还原,如:补齐宽高导出图片、导出 CSS 代码(支持小程序)等。

  • 下载 & 安装    

  • 下载 Zip 安装包 解压缩。 (支持 Sketch v44 以上版本)  

  • 打开 wesketch.sketchplugin 安装使用

  • 界面预览    

    菜单栏

    工具栏


    功能 & 教程    

    1.管理Ui Kit

    本功能用于团队输出 UIKit 设计标准,并用于团队成员快速协同。


    1. 新建一个 Sketch 画板,选择 WeSketch => 管理 UIKit => 同步 UIKit,本插件为您提供了三个可使用的示例。

    2. 选择 WeUI 或其它,点击确定,你所打开的画板,会下载已经在放在 http 服务器的 UIKit 并导入到你现在的画板。


    2.管理色板

    本功能用于团队约定一套颜色标准,并用于团队成员快速协同。


    1. 新建一个 Sketch 画板,选择 WeSketch => 管理色板 => 同步色板,本插件为您提供了一个可使用的示例。

    2. 选择 WeUI 点击确定,你所打开的画板,会下载已经在放在 http 服务器的色板并导入到你现在的画板。

    3. 在你颜色设置的 Document Colors 面板可以看到已经同步的颜色标准库。



    3.批量替换文本、字体、颜色

    本功能用于快速解决产品经理的反复无常的脑洞 (我们再改一下下,再改一下下,算了,换回第一版吧)


  • 文字

  • 字体

  • 颜色

  • 由于本功能十分简单打开就能用,所以说明主要用于调侃产品经理:)


    4.交互连线

    本工具用于快速标注 UI 设计中的页面关系。本功能与市面上已有的连线工具最大的不同是,可以自动绕过障碍,连线不会重合选中页面中任何两个元素,点击交互连线。即可完成两者之间的连接。



    5.注释标记

    本工具用于快速标注设计中对元素进行注解。选中页面中任何一个元素,点击标记注释,即可按选择顺序生成从1开始排列的序号。


    十分建议记下功能快捷键,初始快捷键为 command+shift+2。若想自定义快捷键,可以打开 WeSketch => 快捷键设置,进行自定义快捷键。


    本功能只有一个功能键,即交互连线按钮。但依然有很多细节。

  • 选择一个元素,若此元素没有添加过标记,按快捷键,即可添加一个在右边的标记。

  • 选择一个已有在右边的标记,按快捷键,会删除右边的标记,生成左边的标记。

  • 选择一个已有在左边的标记,按快捷键,此时若选中的数字在页面中不为最后一个标记(假如页面中有9,删除第8个标记),页面中会弹出选项。

  • 选择删除标记并保留排序 (选择此选项会将 8 标记删除,9 标记不动,下次再标记会以 8 开始)

  • 删除标记并重新排序 (选择此选项会将 8 标记删除,之后 9 标记变为 8,如果后续还有会依次类推,下次再标记会以最后一个数的后一个数开始)


  • 6.自定义宽高导出

    本功能用于快速解决一些占位 icon 需要扩大点击区域,或者 icon 需要导出统一尺寸但又不能拉伸的需求。


    选中任意个 icon 点击导出,或使用快捷键 command shift U,弹出窗口填入你统一导出的宽高、倍数、格式,确定之后选中目录,即可获得相对应的图片。



    7.生成代码(支持小程序)

    本功能用于开发 GG 用一个快捷键就能导出各种设计稿中的字体及各种基本块状样式能力。


    选中一个你需要获取对应代码的字体或者图形,使用获取样式的快捷键 command shift d,插件会按照常见 css 写法将样式放入剪贴板中。


    8.快捷取色

    选中一个你需要获取颜色的字体或图形,使用快捷键 command shift c,插件会导出 web 标准色。或带透明度,会使用rgba形式。


    9.图标库

    本功能提供常用 icon,并提供搜索功能,让你在使用 Sketch 完成交互稿的过程中不需要再费心去找 icon 了。


    打开 WeSketch => 图标库,点击图标库中任意 icon 即会出现你的画稿中央,供你设计交互过程中快速使用。


    10.自定义快捷键

    十分建议在了解功能之后首先搭建自己常用功能的快捷键。以此借助此插件你的 design 或者 code 达到比快更快的目标。


    选择一个你需要设置的功能的对应输入框中使用 shift option command 三个功能键一个及以上,搭配字母或数字键,同时按住,输入框中出现你想要的组合键,点击确定后尝试使用。


    插件下载地址:

    https://github.com/weixin/WeSketch/blob/master/README-zhCN.md


    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 204,445评论 6 478
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 85,889评论 2 381
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 151,047评论 0 337
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 54,760评论 1 276
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 63,745评论 5 367
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 48,638评论 1 281
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 38,011评论 3 398
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 36,669评论 0 258
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 40,923评论 1 299
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 35,655评论 2 321
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 37,740评论 1 330
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 33,406评论 4 320
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 38,995评论 3 307
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 29,961评论 0 19
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 31,197评论 1 260
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 45,023评论 2 350
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 42,483评论 2 342

    推荐阅读更多精彩内容