跳到主要内容

23顶级Sketch插件

+$Sketch plugins help make Sketch even better. Sketch is the go-to UI web design tool of choice for many, and part of what makes is so good is the community of people working to extend its functionality and features by building custom plugins.

+$The management of your Sketch plugins is now easier than ever. Plugins update automatically and outdated ones are disabled. Making the plugin ecosystem even more useful is草图云,任何人都可以注册的文件共享服务,您可以在其中查看,下载和评论已公开共享的Sketch文档,或者直接从Sketch中共享。

+$So let’s take a look the best Sketch plugins around – the ones that could drastically change the way you design user interfaces. Once you've spotted one you'd like, read up on how to install素描插件+$. And if you love your web tools, don't miss our favourite网页设计工具+$roundup.

+$01. Copy & Paste Guides

Copy & Paste Guides

+$Take all the pain out of using guides with Sketch+$(Image Credit: PixelPillow)
  • 价钱:自由
  • 摘要:+$Copy, paste or remove guides from your artboards

+$Every designer has a love/hate relationship with guides. Sometimes they're absolutely essential, and the rest of the time they're just getting in your way. If you're using guides instead of Sketch's layout option, changing them for multiple artboards can be a nightmare, but with this plugin it's easy to copy, paste and remove guides from all your artboards.

+$02. Sketch Cleaner

  • 价钱:$ 2
  • 摘要:+$Get your design files as clean as a whistle

+$Any Sketch design that's been through a few iterations is bound to pick up a bit of junk along the way, such as hidden layers, inconsistent border positions and unused layer styles.

+$While it's not the end of the world to have a messy Sketch file, it could affect hand-off, and it'll make life easier for anyone who has to make sense of it down the line. Rather than go through everything by hand, use Sketch Cleaner to deal with the all the common problems automatically.

+$03. Anima

  • 价钱:+$Free Upwards
  • 摘要:+$Create responsive, high-fidelity prototypes

+$Previously available as separate free plugins – Auto Layout and Launchpad – Anima is now an all-in-one plugin designed to help you create responsive layouts with pins, stacks and padding, and high-fidelity prototypes that fit all screens. There's still a free version that supports one project; for unlimited projects, pricing starts at $25 per month.

+$04. React Sketch.app

react sketch plugin

此Sketch插件可帮助您管理设计系统
  • 价钱:自由
  • 摘要:将React组件渲染到Sketch

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

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

+$05. Git Sketch Plugin

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

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

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

+$06. ImageOptim

ImageOptim Sketch plugin

ImageOptim带来了复杂的图像优化工作流程
  • 价钱:自由
  • 摘要:Sketch中的图像优化

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

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

+$07. Magic Mirror

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

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

+$08. 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,选择所需的播放方法(默认或循环),然后选择所需的帧速率。

+$09. Sketch Style Inventory

Sketch Style Inventory

将所有设计拉成单一样式以统治它们
  • 价钱:自由
  • 摘要:轻松管理您的风格

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

+$10. Day Player

Day Player

喜欢Bill Murray作为占位符形象吗?
  • 价钱:自由
  • 摘要:自动生成占位符图像

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

+$11. Marketch

Marketch sketch plugins

使用Marketch将您的设计变成可爱的CSS
  • 在这里下载
  • 价钱:自由
  • 摘要:+$Generate html page that can measure and get CSS styles

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

+$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插件



翻译字数超限