网页设计教程：精良的SKETCH插件，你知道有那些？

作者:在线学习平台更新于： 2015-07-07 12:41:30

如果你是一名网页设计师的话，在网页设计制作过程中，对于一些精良的SKETCH插件，你应该不陌生？插件的使用大大提高了工作效率，这样也颇受网页设计师和网站开发者的青睐，所以今天给大家所推荐的一些精良的Sketch 插件，它们都是为网页设计师所准备的，覆盖了不同的设计和开发需求，接下来的网页设计教程中就让我们详细认识一下这些插件吧。

1. Sketch Notebook

Sketch Notebook 是一个非常方便的草图设计插件，安装上之后，工作区域中会多出一个侧边栏，其中包含多种不同的元素，借助这个工具栏，你可以轻松添加或者删除注释、调整位置、管理它们的可见性。

2. CSS Buddy

CSS Buddy 可以让你在你的Sketch 工作区域中为图层添加CSS样式。作为最基本的功能，它可以轻松控制各个元素的宽度、高度、透明度、阴影、边框和背景等属性。

3. Day Player

Day Player 这个插件让你可以在任意Sketch文档中插入一个可定制的图片占位符，其中内置多种可选占位符服务。当你激活控件的时候，还可以设定图片的宽度高度和其他的元素。

4. Material Design Colour Palette Sketch Plugin

看名字就知道这是一个配色方案生成插件，和许多类似工具一样，一键生成，快捷好用，而且直接可以在工作区中调用。另外，配色方案中色相、明度等属性都可以轻松控制，实用方便。

5. Content Generator Sketch Plugin

这个Sketch 插件可以帮你快速生成虚拟数据，诸如用户头像、名称、地理信息等数据，作为内容填充。安装插件之后，你所需要做的就是选择一个图层，然后在菜单中点击 Plugin —Generator ，然后选择 Geo、Persona 或者 Photos 即可。

6. Blade

这款名为Blade 的插件可以将你的设计自动生成HTML代码，将图层分组用标签包起来，将文本用表示。当你使用Blade的时候，可以通过设置图层名称，让这些图层转化为DOM元素。

7. Modulizer

Modulizer 是一个用来控制按钮、模块和区域等视觉元素的内边距（Padding）的插件。如果所选模块有背景，也可以通过调整内边距，轻松替换。

8. Typographic Scale

这个插件能够针对特定的文字图层缩放出一组字体尺寸从小到大的文字图层。如果你选中了多个图层的图层组，其中至少要包含一个文字图层，才能生成成功。

9. Dynamic Button

这是一个动态按钮插件，在Sketch中借助这个插件生成的按钮可以设定包括内容、样式和内外边距等各种属性。安装插件之后，你可以使用Command+J这个快捷键快速将文本快速转换成按钮。设置内边距的时候，可以在文本图层下设置（0:0:0:0）的参数来搞定。

10. Sketch Measure

这是一个测量插件，需要Sketch 3.0.2以上的版本，除了测量各种距离和尺寸之外，它还可以测量图层的各种属性，并且每个功能都有快捷键支持。

11. Sketch Framer

Sketch Framer 可以将Sketch文件导出为FramerJS，制作成可交互的原型。通过矫正Sketch-framer-config.js文档可以定制生成的文档的类型。当然，使用这个插件最常见的操作可能是导入某个库文件，并且应用到你的整个项目中去。

12. Sketch.js

Sketch.js 是一款易用的jQuery插件，这款插件可以生成一个可供访客绘图的画布。

13. Sketch DevTools

Sketch DevTools 是一套实用的开发用的工具和程序，以插件的形式安装到Sketch中。由于Sketch本身偏向与UI设计，在网页开发上有明显的短板，而这套插件就正好弥补了这一缺陷。Sketch 中最大的缺陷是没有Debug工具和各种文档的API，而这套工具中正好解决了这些问题。

14.Sketch Preview

这款Sketch 插件为程序提供了更优秀的预览功能，使用 ⌘P 快捷键可以为选中的画板配置大小等属性(⌘⌥P) ，并且将生成的图像文件在Skala Preview中打开。

15. Sketch Data Parser

这款Sketch 插件能用来分析你的数据并补充你的设计的，下载sketch-data-parser.sketch 这个文档，双击安装即可。

Anyway，如果我们在网页设计培训的学习中能够充分利用这些精良的SKETCH插件，我们在设计制作中会无往不利的，更多网页设计的学习可登录课课家网络学习平台了解详情。