Sketch 插件合集Miaow使用方法教程

下面给大家带来一款Sketch 插件合集,这款合集是由微信设计团队打造,拥有UIkit 同步管理,批量替换文本、字体、颜色,交互连线等多种强大的功能!喜欢这款Sketch插件合集吗?

1、语言设置

执行 Miaow > Settings,在弹出的对话框语言设置项选择 简体中文(zhCN) 并保存

2、管理 UI Kit

UIkit 同步管理

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

快速开始

新建一个 Sketch 画板,执行 WeSketch > 管理 UIKit > 同步 UIKit,插件提供了三个可使用的示例

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

如何设置

打开 WeSketch > 同步源设置,界面中出现如上界面,按照示例新增一个你已经制作好的并上传到网络的 UIKit 地址配置到界面中的输入框中

有些团队可能使用 DropBox 同步团队 UIKit 到本地,插件也提供了选择本地文件同步的能力,点击文件夹 Logo 即可选择

特别注意:若同时配置 UIKit 及颜色库地址到一个项目中,同步 UIKit 同时会同步颜色库内容,但单独同步颜色库不会同步 UIKit 库

如何制作自己的 UIkit

导出 UIKit

UIKit 是通过 Sketch 的 Symbols 功能,达到一次制作 Symbols 多处使用。将你制作好的 UIKit 文件通过本插件的导出 UIKit 功能导出成 Sketch 文档

注意:由于此同步工具是通过元素名称判断是否同步的内容与原画板内容是否相同来做同步操作的,所以尽量避免画板中的 Symbol 没有相同命名,通过本插件的导出 UIKit 功能,会自动将重名的元素重命名(原名后加数字)

3、管理色板

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

快速开始

新建一个 Sketch 画板,执行 WeSketch > 管理色板 > 同步色板,插件提供了一个可使用的示例

选择 WeUI 点击确定,所打开的画板会下载已经在放在 http 服务器的色板并导入到现在的画板,在颜色设置的 Document Colors 面板可以看到已经同步的颜色标准库

如何设置

打开 WeSketch > 管理色板 > 同步源设置,设置方法同 UI Kit

如何制作自己的颜色库

导出色板

先将需要制作的颜色添加到 Document Colors 中,然后点击导出色板,插件会将颜色内容导出成 JSON 文件,将此文件存放在 http 服务器或使用 DropBox 等工具进行同步即可

4、批量替换文本、字体、颜色

本功能用于快速解决产品反复无常的脑洞

文字

字体

颜色

功能说明

当要修改一个全局颜色的时候,最快方法就是先选中有这个颜色的元素,再打开全局替换颜色功能,你会发现选中的元素颜色已经出现在替换面板中。(全文文字替换也是这样)

字体批量替换用于解决 iOS 大版本升级后,原设计稿中文字字体不再适应新的版本的问题

5、交互连线

本工具用于快速标注 UI 设计中的页面关系

快速开始

本功能与市面上已有的连线工具最大的不同是,可以自动绕过障碍,连线不会重合

选中页面中任何两个元素,点击交互连线。即可完成两者之间的连接

使用方法

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

本功能只有一个功能键,即交互连线按钮,但在不选择元素选择一个元素,选择两个元素点击功能键时,效果各不相同。可能会吐槽为什么一个键要集合这么多功能,但是当用快捷键完成操作之后,你会发现非常顺手

1、当没有选择元素按下快捷键时,画板中的线会自动重绘,用于如果将页面元素进行了调整之后,重新调整画布中的连线的功能

2、当选择一个元素按下快捷键时,若此元素有从它出发的连线,那么会自动删除此条连线。并重新调整画布中的连线

3、当选择两个元素按下快捷键时,会按照从先选到后选的顺序,绕过 Artboard 元素,生成连线

设置颜色及细度粗细

进入交互设置即可调整连线的颜色及粗细

6、注释标记

本工具用于快速标注设计中对元素进行注解

使用方法

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

本功能只有一个功能键,即注释标记。但依然有很多细节

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

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

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

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

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

7、自定义宽高导出

导出 icon 补齐统一宽高

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

快速开始

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

功能说明

同时文件名称也会放入你的剪贴板,用于快速完成代码需求

8、导出代码(含小程序版)

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

快速开始

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

功能说明

本功能重点解决当拿到不同尺寸设计稿时,例如宽 320 375 414 750 1242,需要人脑换算输出成统一的尺寸问题。所以本插件对需要获取样式的父 Artboard 尺寸敏感,若父 Artboard 尺寸非标准,或无父 Artboard 会默认为 2 倍图

本功能提供设置功能,除了导出标准 Web 样式,还可以导出以 rpx 为单位的小程序代码。点击获取代码设置,可以将获取的代码更换成 rpx 标准。rpx 的设计标准是以 750 宽度为标准设计,所以非 750 宽度的设计稿,会按照小程序尺寸换算

9、快捷取色

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

10、图标库

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

快速开始

打开 WeSketch > 图标库,点击图标库中任意 icon 即会出现在 Artboard 中央供设计交互过程中快速使用

11、自定义快捷键

十分建议在了解功能之后首先搭建自己常用功能的快捷键

快速开始

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

注意

由于 macOS 系统和 Sketch 本身有大量的默认快捷键,所以设置的快捷键容易产生冲突,如发现设置的快捷键无法使用请尝试更换快捷键使用

以上就是小编为大家带来的精彩内容,关注macdown小编,阅读更多精彩内容,分享更多破解软件!

原文地址:https://www.cnblogs.com/macai/p/10906946.html

时间: 2024-12-18 11:17:22

Sketch 插件合集Miaow使用方法教程的相关文章

Atom插件合集

1. 通用插件 2. HTML开发插件install 3. CSS插件 4. JS开发插件 5. Git插件 参考链接 "Atom是由GitHub开发的自由及开放源代码的文字与代码编辑器,支持macOS.Windows和Linux操作系统,本文收集常用的Atom插件." 1. 通用插件 sync-settings last-cursor-position platformio-ide-terminal bracket-matcher duplicate-line-or-selectio

插件合集

一.一款鼠标移上去显示详情的插件 MyTips.js 效果:下载地址:https://github.com/yfjl/myTips 大专栏  插件合集历插件 Calendar.js">二.自定义的一款日历插件 Calendar.js 效果:下载地址:https://github.com/yfjl/Calendar 三.微信小程序大转盘效果:下载地址:https://github.com/yfjl/WeChat-big-wheel 四.微信小程序生成名片 五.bt.js类似于datatabl

跟我一起学习VIM - vim插件合集

2016-06-14 15:04 13333人阅读 评论(0) 收藏 举报 分类: Linux(104)  目录(?)[+]  前两天同事让我在小组内部分享一下VIM,于是我花了一点时间写了个简短的教程.虽然准备有限,但分享过程中大家大多带着一种惊叹的表情,原来编辑器可以这样强大,这算是对我多年来使用VIM的最大鼓舞吧.所以分享结束之后,将这篇简短教程整理一下作为我2014年的第一篇Blog. 目录写在前面:Life Changing Editor什么是VIM为什么选VIM为什么选其它为什么犹豫

sublime常用快捷键和插件合集

前言 代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 如果说"神器"是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号.sublime text 2(以下简称ST2)小巧绿色且速度非常快,跨平台支持Win/Mac/Linux,支持32与64位,支持各种流行编程语言的语法高亮.代码补全等,但 ST2有着很多其他编辑器没有的超酷的特性

前端插件合集

前端天气 234天气预报 Json Json解析 原文地址:https://www.cnblogs.com/YZM97/p/12596500.html

sketch插件---WeSketch

WeSketch 是一个强大的 Sketch 插件合集,由微信设计团队量身打造,让设计师和开发者可以更加高效的使用 Sketch. 下载地址 Github:WeSketch 百度网盘: https://pan.baidu.com/s/1o8SGuyI  密码:5nbm WeSketch 官方介绍 更高效的团队协作,如:UI Kit 同步.色板同步等. 更快捷的交互设计,如:图标库.自动连线.标记注释.全局替换文字.字体.颜色. 更精准的前端还原,如:补齐宽高导出图片.导出 CSS 代码(支持小程

PROTEASER第1-第10套完整电影文字片头合集

fcpx插件ProTeaser mac版是非常实用的文字片头插件合集,能够轻松的制作酷炫的文字片头效果,超级震撼,内置多种效果预设,大片级别效果不在话下!ProTeaser下载支持自定义快速修改,支持中文/英文文字输入和修改,能对文字属性进行修改,简单几步即可完成文字片头制作.当然你还可以对插件进行手动操作,以达到更完美的效果,FCPX电影片头插件操控和使用都极为简单,希望能给你的影片增添不一样的震撼和绚丽效果,为你的工作提高效率! FCPX插件推荐:点击进入 ProTeaser下载安装教程 f

前端资源教程合集

综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书

MMD入门进阶&PmxEditor改模&Toolbag3&C4D&MD7联动渲染&Metasequoia水杉建模教程合集

————————MMD零基础入门教程————————1.[MMD从零入门教程]RC手把手带你入门MMD2.『MMD从基础到进阶』十周年汉化版本与规范使用教程3.MMD新手保姆向教程 ————————MMD新手进阶教程————————1.[MMD教程]快速从零入门Ray渲染 {Ray1.5.0}2.[MMD教程]新手进阶1-背景虚化|体积光|模型绑定|描绘顺序系统介绍3.[MMD教程]新手进阶2-相机绑定|光晕|地面反射4.[MMD教程]新手进阶3-水面|自发光|阳光照射5.[MMD教程]新手进阶