23顶级Sketch插件

草图是首选用户界面网页设计工具在设计行业工作的许多人的选择。你可能不知道的是,有一个多元化和强大的社区人员通过构建自定义插件来扩展Sketch的功能和特性。在本文中,我们将分享一些最好的Sketch插件。

好消息是,Sketch插件的管理现在变得更加容易。插件自动更新,过时的插件被禁用,还有一系列其他小但非常直观的改进。

使插件生态系统更加有用草图云,任何人都可以注册的文件共享服务,您可以在其中查看,下载和评论已公开共享的Sketch文档,或者直接从Sketch中共享。

让我们来看看最好的Sketch插件 - 那些可以彻底改变我们设计用户界面的方式。一旦你发现了一个你想要的,请阅读如何安装素描插件

+$01. React Sketch.app

react sketch plugin

此Sketch插件可帮助您管理设计系统

  • 价钱:自由
  • 摘要:将React组件渲染到Sketch

在Sketch中管理设计资产可能很困难。这个方便的Sketch插件提供了一种更简单,更可靠的资产管理方式。在代码中将您的设计实现为React组件,然后使用此插件将它们渲染为草图。它还可以更轻松地将实际数据提取并实现到Sketch文件中。

React Sketch.app由Airbnb开发,用于其设计系统,旨在帮助缩小设计人员和开发人员之间的差距。

+$02. Git Sketch Plugin

  • 价钱:自由
  • 摘要:一个内置于Sketch中的Git客户端

此插件旨在将版本控制引入Sketch。它的工作原理是为设计的每个部分导出图像,然后生成漂亮的差异,以便清楚地进行了哪些更改。通过记录设计过程的每个步骤,团队中的每个人都可以看到设计的进展情况。

Git Sketch插件是由创建的Mathieu Dutour从那以后,他开始创建一个更全面的付费版本控制系统Kactus

+$03. Auto Layout

  • 价钱:自由
  • 摘要:Sketch的响应式设计

“组调整大小”是一种本机“草图”功能,使您可以在调整画板或父组的大小时更改对象的反应方式。自动布局,由AnimaApp,将此功能更进一步。

组大小调整允许您创建流体元素并将对象固定到角落(请考虑::固定在CSS中定位),自动布局还允许您按一定数量的像素偏移元素,定义元素的最小和最大尺寸(想想:Min-:和max-:在CSS中)并且可以执行Group Resizing允许您执行的所有操作,但使用的UI更少。

+$04. Launchpad

launchpad sketch plugin

Launchpad是将.sketch设计转换为静态HTML网站的有效方式

  • 价钱:自由
  • 摘要:将设计转换为静态HTML网页

发射台提供了一种将.sketch设计转换为静态HTML网页的超简单方法。它来自创建自动布局的人,实际上您可以将这两个Sketch插件组合在一起,将响应式.sketch设计导出为HTML。

LaunchPad不会导出“完成”设计 - 您仍然需要微调加载时间,调整代码以确保您的设计能够正确响应不同的屏幕大小,并优化代码输出以确保网站快速加载并运行顺利。

但是,它确实为您提供了一些非常可靠的基础。在使用几个低保真模型尝试Launchpad之后,我可以看到输出相对简单,因此无需担心膨胀的代码。

+$05. ImageOptim

ImageOptim Sketch plugin

ImageOptim带来了复杂的图像优化工作流程

  • 价钱:自由
  • 摘要:Sketch中的图像优化

虽然Sketch提供了自己的为了优化SVG文件,没有用于压缩JPG和PNG图像的选项范围。以来ImageOptim多年来一直提供可靠的服务,它将这个功能带到Sketch是有道理的。

任何关心加载时间和图像优化(应该是所有设计师)的设计师都应该将ImageOptim添加到他们的工具箱中。请注意,除了插件,您还需要核心ImageOptim应用程序(免费)安装在您的macOS系统上,您仍然需要在Sketch中将图层标记为可导出(导航到“导出和优化所有资产”以开始)。

+$06. Magic Mirror

  • 价钱:每月4美元起
  • 摘要:图像透视转换工具

如果你想要制作令人印象深刻的产品样机但是必须继续跳进Photoshop来处理棘手的事情,Magic Mirror可以为你节省生命。它是一个图像透视变换工具,使您无需离开Sketch即可创建透视模型和其他扭曲效果。

+$07. Export More

Export More

使用“导出更多”制作支持Mac的图标和动画GIF
  • 价钱:自由
  • 摘要:导出与Mac兼容的图标和GIF

以前有两种不同的插件 - 生成ICNS和生成GIF - Nathan Rutzky出口更多将它们集中在一个包中,解决了Sketch的导出选项中的几个明显漏洞。有了它,您可以将图标设计导出为与Mac兼容的ICNS文件,并创建可以导出为GIF的简单动画,而无需离开Sketch工作流程。

这个Sketch插件非常适合拥抱新的热情GIF格式- 虽然你可以使用Photoshop CC为或After Effects CC对于您的GIF设计,您不一定需要功能齐全的Adobe应用程序,尤其是在创建相对简单的动画时。

Export More将每个画板视为一个单独的框架并将它们组合在一起。然后,您可以选择是让GIF播放一次还是连续播放。导航到插件>导出更多>画板到GIF,选择所需的播放方法(默认或循环),然后选择所需的帧速率。

+$08. Sketch Style Inventory

Sketch Style Inventory

将所有设计拉成单一样式以统治它们

  • 价钱:自由
  • 摘要:轻松管理您的风格

设计可以是自由形态探索和精心构造的过程的独特组合,而Sketch Style Inventory可以帮助您将两者结合起来:它概述了您使用过的所有样式,然后帮助您将类似图层的样式合并为一个,使您能够从所有各种实验中确定最终样式。

+$09. Day Player

Day Player

喜欢Bill Murray作为占位符形象吗?

  • 价钱:自由
  • 摘要:自动生成占位符图像

将占位符图像添加到设计中是原型设计的必要部分,但找到实际图像可能会很痛苦。所以不要浪费任何时间在它上面,把它全部留给Day Player。这允许您从许多不同的占位符图像服务向任何Sketch文档添加自定义占位符图像,因此您必须做出的最大决定是您是否要使用Bill Murray,Nicolas Cage或kittens。

+$10. Marketch

Marketch sketch plugins

使用Marketch将您的设计变成可爱的CSS
  • 价钱:自由
  • 摘要:将Sketch画板转换为HTML和CSS

如果你想从Sketch设计中检索CSS样式,那么像Marketch这样的插件绝对必不可少。它使您可以将Sketch画板导出为一个包含HTML文档的zip文件,然后您可以将其提取出来,以便提供足够的CSS,随时可用。

+$11. Sync Sketch Plugin

Sync Sketch Plugin

为您的设计团队提供方便的同步
  • 价钱:自由
  • 摘要:通过Google表格分享风格

通过此插件可以使您的设计团队保持同步,该插件可以在Google表格中保存文本样式,图层样式和调色板。当您运行插件时,它会查看电子表格并将草图样式和颜色更改为存储在其中的内容。立即分享您的风格的好方法。

+$12. Segmented Circles

segmented circles plugin

分段圆图
  • 价钱:自由
  • 摘要:创建精确的圆形图形

这是为图表和图表制作分段圆的快速方法。该插件可以生成各种样式的圆形图,包括虚线和刻度圆,厚度通过简单的逗号分隔值列表控制。

+$13. Sketch Runner

sketch runner plugin

Sketch Runner是macOS的Spotlight等效于Sketch

  • 价钱:自由
  • 摘要:Spotlight For Search

Sketch因其简约的键盘工作流程而备受青睐。话虽这么说,总有两三个键盘快捷键,你似乎总是忘记或混淆另一个设计应用程序,如Photoshop - 让我们不要忘记那些不常用的工具和功能,没有键盘快捷键,深藏在素描菜单。

Sketch Runner以macOS用户熟悉的方式解决了这些问题 - Sketch Runner是macOS Spotlight,但是对于Sketch。

+$14. Icon Font

Icon fonts in Sketch

Sketch中的图标字体

  • 价钱:自由
  • 摘要:管理图标字体

图标字体是在网页设计中使用图标的高效方式,无需导出和优化大量图像资源。通常我们引用图标字体HTML网页的一部分,就像我们使用CSS和JavaScript一样。但是,在Sketch中使用它们有点复杂。值得庆幸的是,Icon Font让它变得简单。

下载并安装Sketch IconFont后,下载SVG字体文件或下载字体包,其中包括FontAwesome,Material Design Icons,Ion Icons和Simple Line Icons的字体文件。完成后,导航到插件>图标字体>安装字体包,从打开文件对话框中选择下载的字体,然后导航到插件>图标字体>网格插入> [您想要的图标字体]以便插入一个图标。

即使您打算为您的设计设计自定义图标集,也可以使用现成的图标来帮助您在设计的早期阶段进行快速原型设计,为您的低保真模型添加更多的清晰度/保真度。

+$15. Find And Replace

  • 价钱:自由
  • 摘要:查找并替换所选图层中的文本

文本编辑器不是您需要查找和替换的唯一位置 - 它在Sketch中也很有用。此插件有许多高级选项,它使您能够在所选图层(以及其中包含的所有内容)中的文本中搜索特定单词或短语的实例,然后轻松替换它。

下一页:更省时的Sketch插件



翻译字数超限