我们努力使Sketch成为梦想中的“设计师工具箱”。但是每个人都有不同的需求，也许你需要一个我们还没有实现的功能。不要担心：插件已经可以满足您的需求，或者您可以轻松创建一个插件。 如果您有兴趣扩展Sketch，那么您就位于正确的位置。在这里，我们展示Sketch可扩展性文档的概要以及如何快速构建您的第一个Sketch插件。 如果您只想使用现有的插件，请参阅插件目录。 你可以用插件做什么？ Sketch中的插件可以做任何用户可以做的事情（甚至更多！）。例如： 根据复杂的规则选择文档中的图层 操作图层属性 创建
先抛个问题，众所周知，Sketch 是 UED 设计工具，大多数 Sketch 插件都是用于提升设计人员工作效率。那么，作为前端研发的我们为什么要学习 Sketch 插件开发呢？
本文结合工程化实践，系统介绍要实现一个生产级别的 Sketch 插件所需要的技术知识和解决方案，并以一个真实的业务场景为案例，从0到1来实现一个生产级别的插件开发。 从 Sketch 插件开发的机制，自动打包更新工程化、Sketch 中 Objective-C 的运行机制等方面，分享开发一个生产级插件所需的技术储备。 最终开发一个如下图所示的 MVP插件将文章中讲到的知识串联起来，学以致用，加深对 Sketch 插件开发的理解。 在开发前，为了使开发调试更顺畅，需要做一点配置工作。 一、开发环境配置 崩溃
Sketch，作为一款专为图标和界面设计而打造的优质矢量绘图工具，也是设计师们制作和完善公司企业内部设计规范系统不可或缺的设计工具。
Sketch 是伴随移动应用程序崛起而流行的 UI 设计工具。2014年 Sketch V3 增加 Symbols 功能，在 UI 设计工具领域的优势越来越大。它持续改进和增强功能，不断加强对插件社区的建设，吸引越来越多的开发者进入。
---- 如果您花费了开发Plugins for Sketch的不少重要时间，则可以使用这些首选项对工作流程进行一些改进。 由于并非所有Sketch用户都是插件开发人员，因此在“首选项”面板中为这些首选项设置UI并没有任何意义。您需要使用Terminal.app来启用/禁用它们。 为插件定义一个代码编辑器 有最喜欢的代码编辑器？你可以告诉Sketch使用它来编辑插件。例如，如果你使用Atom，你可以这样做： $ defaults write ~/Library/Preferences/com.bohemi
Sketch插件列在GitHub存储库中。本文档解释了如何在那里发布它以及如何让Sketch接收插件的更新。 第一次发布 Sketch插件列在GitHub存储库中：https://github.com/sketchplugins/plugin-directory。 要将您的插件添加到列表中，请使用关于您的插件的信息打开PR。合并后，您的插件将显示在此处：https://sketchapp.com/extensions/plugins/ 如果您使用skpm，第一次使用插件发布skpm publish，它会自动
本文档将带您创建您的第一个Sketch插件（“Hello World”），并将解释Sketch的基本扩展性概念。 在本演练中，您将向Sketch添加一个新命令，该命令将显示一个简单的“Hello World”消息。在稍后的演练中，您将与Sketch画布交互并查询用户当前选定的图层。 先决条件 您需要安装Node.js并且可以使用它$PATH。Node.js包括npm，Node.js包管理器，它将用于安装Sketch插件开发人员的工具链。 生成一个新的插件 将自己的功能添加到Sketch的最简单方法是通过添加
静电说：各位设计师，你们是不是已经有选择困难症了？现在工具越来越多了，那么究竟用哪个做UI更合适呢？来看看作者的分析吧！在这里提前给大家一些建议，对于Win平台同学，建议先熟悉一下Figma，因为它比XD确实好很多。Mac平台同学，根据需求决定就好。
我这里推荐的是摹客，摹客是设计+协作（All in One）的一站式云平台，为产品开发团队提供高保真设计、设计稿交付、全流程协作和设计规范管理。
多年来，美团外卖一直在高速增长，但整个客户端的UI组件一直没有得到很好的统一。而在开发过程中因UI缺乏同一的标准导致各种问题凸显，积木插件Sketch Plugin应运而生。外卖技术团队将其打造成为UI一致性的抓手，最终帮助团队减少开发成本，提升了交付的质量，并为美团多个业务团队提供了很好的支持服务。
导读：随着Sketch这款设计神器的加速普及，相关插件的需求保持旺盛。本次笔者选出了几款曾经或者当下的热门插件，对它们的核心功能进行了介绍，并给出了实际的使用建议。
Sketch是一款基于Mac的矢量绘图应用。面对着功能复杂繁琐的photoshop，Sketch相比较而言身轻如燕。最近也掀起了用Sketch设计产品原型的热潮，因为用它来画设计稿简直轻而易举，相比于Axure它有更丰富的组件库和更全面的尺寸控制，让我们的原型图更逼真，更有利于交流和前期的展示。 作为目前产品原型设计中的利器，Sketch特别适合移动APP和响应式网页的设计开发。下面我们就来看看Sketch的一些入门指南以及如何利用Mockplus的插件实现交互效果。 一、 Artboard
sketch是一款轻量、易用的矢量设计工具。尽管如此，在使用过程中有些功能还是未能满足，亦或者在设计或开发流程中有些工作还略显繁琐，所幸sketch有提供API供我们开发一些插件来解决使用过程中遇到的问题。本着能用工具解决就用工具解决的懒癌患者原则，我们这个课程就来学习如何开发sketch 插件。
下载地址：https://sketchrunner.com/get/index.html
往期文章索引： 1 / 入门基本概念、page的相关操作 2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作 3 / DIY一个Sketch插件，生成猫猫狗狗的全家福 4 / NSPasteboard 、text 的操作 5/ Shape 的一些操作，主要介绍 line 及 rect 6/ Shape的curve操作 7/ GUI 8/ Cocoa基础 9/ Shape中的oval shadow： “ 本期由 CanisMinor 创作，他是一枚 U
2017年，Adobe高调发布全新的界面+交互设计工具Adobe XD。彼时的Adobe在界面设计领域可谓是节节败退，曾经的明星产品Ai和PS虽然都针对性做了很多功能改进，依然收效甚微。如今3年过去了，今天我们就来扒一扒两者，到底谁才是最适合设计师的扛把子？
---- 插件是一个或多个脚本的集合。每个脚本定义一个或多个以某种方式扩展Sketch的命令。 在磁盘上，插件是具有.sketchplugin文件扩展名的文件夹，包含文件和子文件夹。 严格来说，插件实际上是一个OS X软件包，被安排为OS X软件包。 包是Finder向用户呈现的任何目录，就好像它是单个文件一样（您可以使用Finder中的“ 显示包内容”命令查看内部）。 一个包是一个具有标准化层次结构的目录，该目录包含可执行代码和该代码使用的资源。 Sketch插件不允许本机编译代码，但我们确实使用标准包
随着移动互联网的快速发展，用户的需求也在不断地增大，这对产品经理还有设计师的考验是越来越大。市场环境的变化让我们深信为快不破，但是一个产品的产出需要各个环节的紧密配合，但往往在产品输出过程中，由于分工不明确导致的形形色色的问题，其中的一大痛点就是产品经理，设计师和工程师之间面临着协作难，工作效率低的问题。以前，设计师需要一遍遍的手动切图配合工程师一次次的改图，如今借助着万能的sketch标注插件，提前下班再不是梦！！
开发Sketch插件时，您可能需要一些方法来了解代码运行时发生了什么。 日志 调试JavaScript代码最常用的方法是console.log在关键步骤中添加一堆。不幸的是，JavaScriptCore（Sketch插件运行的上下文）没有提供console。相反，调用的特殊方法log是可用的。 有几个选项可以查看这些日志： 打开Console.app并查找Sketch日志 看看这个文件~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log 运
当Sketch启动时，它会扫描磁盘上的文件夹以查找插件。 ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins （〜这里是你的主文件夹的简写，例如/Users/joe） 您可以轻松访问此插件文件夹Alt，方法是打开插件菜单并选择“显示插件文件夹”。 安装插件 如果您双击.sketchplugin文件，Sketch会将其复制到您的Plugins文件夹中。它实现的任何命令应立即显示在插件菜单中。 或者，您可以通过简单地将它们自己移动到插
Sketch中的插件定义了一个或多个命令，其中Sketch将显示菜单项。 这些命令中的每一个实际上都是作为一个JavaScript函数实现的（我们称之为处理程序），位于该包中的脚本文件中。 每个脚本可以包含尽可能多的处理程序，并且每个命令都可以由不同的处理程序实现，因此，无论您是按照每个命令安排一个脚本，还是将所有命令处理程序放在单个脚本文件中，都由您决定。 因此，要了解如何制作插件，首先需要了解如何编写Sketch脚本。 教你如何编写JavaScript代码超出了这些页面的范围，所以我们假设你已经知道了这
Sketch中的插件系统可让您完全访问应用程序的内部结构和macOS中的核心框架。所以你有一个巨大的力量来构建几乎任何东西。 然而，伟大的力量有很大的责任，所以你需要在每个Sketch版本中留意你的代码。我们会在重构时不时更改Sketch的内部结构，因此您的插件可能会调用一些已重命名或删除的方法。 我们确实意识到这当然不是理想的。这就是为什么我们支持内部和插件之间的JavaScript API。我们希望它覆盖了90％的用例。如果没有，您可以随时进入内部，风险自担。 下面的页面包含插件可以侦听的所有操作的简要
Sketch for Mac是一款专业的矢量图形编辑工具，主要用于UI和UX设计。它提供了丰富的功能和工具，可以帮助设计人员更轻松地创建和编辑各种类型的矢量图形。
Sketch for Mac是一款功能强大、易于学习和使用的矢量图形设计工具，被广泛应用于UI/UX设计、网页设计和移动应用设计等领域。
Sketch是由荷兰公司Bohemian Coding在2009年发布的一款矢量图形编辑工具。这款软件主要面向界面设计师和Web开发人员，并因其简单易用和高效完成了大量的UI设计工作。
SketchTool是一个与Sketch捆绑在一起的命令行实用程序，它允许您使用Sketch文档执行一些操作，例如检查它们或导出资产。它还允许您从命令行控制Sketch以执行一些操作。 安装 SketchTool 与Sketch（和Sketch Beta）捆绑在一起。你可以找到它。 Sketch.app/Contents/Resources/sketchtool/bin/sketchtool 建议您在Sketch中使用它，而不是将其复制到其他位置，以便始终使用最新版本（更新Sketch时更新SketchTo
前段时间，美团外卖技术团队积木Sketch插件“意外走红”。为了帮助更多的设计师小哥哥、小姐姐落地设计规范，提升产研效率，积木Sketch团队开始着手打造一个平台化的产品。本文介绍了积木Sketch插件进阶开发指南。希望通过本篇内容的学习，大家可以知道如何真正实现一款可以与业务强关联且功能可定制的成熟工具。
1.CodeFun是什么 CodeFun是一款UI 设计稿智能生成源代码的工具,支持微信小程序端、移动端H5和混合APP,上传 Sketch、PSD等形式的设计稿，通过智能化技术一键生成可维护的前端代码. 2.学习成本高吗？ 对于前端工程师来说，几乎没有学习成本。 对于用惯了蓝湖/摹客的前端工程师来说，CodeFun使用流程与前者几乎一致：设计师上传完稿件后，工程师打开界面，选择任意需要的 UI 区域拷贝走想要的代码即可，只是从原来看标注变成了直接拷贝代码。 对于设计师来说，完全不需要遵循某些设计规范。 CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范，所以设计师按照原有的流程和设计风格正常输出即可，零新增工作量、零学习成本。
sketch是一款轻量的，易用的矢量设计工具，有了它，可以让你进行更加简单高效的UI设计。
静电说：最近攒了不少小伙伴的Sketch使用问题（也有设计上的问题），各式各样的，大部分我都在SketchChina.com中国社区做了解答。那么这篇文章，咱们就把这些问题汇总一下，看看里边有没有你想知道的。
在Sketch中直接将你的设计稿做成高保真的Mockup，是不是觉得很方便呢？Vectary就是这样一款插件。这款插件内置了多种设备的真实3D模型，包含手机，电脑，显示器，ipad，手表等，只需简单操作，就可以让你的设计稿呈现出高保真的展示效果。
在游戏界面的搭建这一块，行业内有很多成熟的工作流，有像animate.cc和create.js这种完全把界面和交互交给设计的方案，也有像FairyGUI这些面向设计师的跨平台的界面编辑器，有基于引擎界面编辑器的组件化方案，也有利用引擎的插件系统把设计背景图引入作为布局参考的便利方案。从库的开发到封装的界面编辑器，其实我们的游戏界面搭建效率已经很高了，但是从设计稿直出，业内也一直没有停止过尝试，一些比较主流的引擎像laya、unity都有相关的设计稿生成画面的插件，cocosCreator这块的周边还比较少，异名这次就利用sketch的工具链来实现一个sketch2cocos的界面搭建插件。
原型设计的发展历史经历了纸上原型、静态线框设计、到现在的可交互式原型。作为设计过程中最初始的阶段，设计师们对原型设计的要求也越来越高。因此，如今的原型设计工具格局也发生了很大的变化。
它包含一个或多个脚本。每个脚本定义一个或多个以某种方式扩展Sketch的命令。它还可以包含命令用于执行任何操作的任何其他可选资源（如图像）。 插件脚本使用JavaScript编写。 术语 在我们进一步讨论之前，让我们定义一些术语。 插件：一组脚本，命令和其他资源组合在一起作为一个独立单元 Plugin Bundle：磁盘上的文件夹，其中包含组成插件的文件 行动：用户所做的事情（选择菜单或更改文档）触发命令 命令：一个插件可以定义多个命令; 通常每一个都与不同的菜单或键盘快捷键相关联，并导致执行不同
静电说：鉴于大家对Figma的热情，从今天开始，静Design公众号开始不定期连载我的Figma学习日记。作为Sketch的强有力竞争者，Figma最近出现的概率真的很高，其中主要原因，第一肯定是Sketch的不给力，第二，那必须是Figma真的很好用，最重要的是很流畅咯，而且对于个人用户来说，不用花一分钱就可以用起来，真的是设计师的心头好哦。
北京时间2022年6月7日下午2点45分左右，Figma的服务器又崩了，全球范围内使用Figma工作的设计师被迫歇业，只能望着504报错页面佛系摸鱼，经过官方2个多小时的紧急修复，才终于恢复正常。
Sketch for Mac是一款专业的矢量绘图和UI设计软件，由荷兰公司Bohemian Coding开发。它主要用于创建Web和移动应用程序的用户界面（UI）和用户体验（UX）设计。
写在前面 这篇文章我们说一下sketch的插件的介绍和基本使用，sketch本身的功能已经非常的强大了，但是国外的很多大神还是开发了很多插件进行更方便进行UI的设计，今天就带大家看一下怎么安装插件和
Sketch是一款Mac操作系统上的矢量绘图软件，主要用于设计师进行UI界面、网页设计等领域的工作。Sketch提供了丰富的绘图工具和功能，可以轻松创建各种复杂的图形、图标和模式。
继上个月对Sketch的Smart Layout做出的调整后，我们很高兴的推出了Sketch 59（哦~这又是一个大版本），这个版本中包含了一些激动人心的功能，可以帮你对设计中的版式产生重大的影响，那就是--Sketch更好的支持了OpenType功能，以及新的可变字体控制。最重要的是，我们将于Pexels合作，推出新的数据插件，并会对插件开发人员提供新的API接口。
Sketch for mac以简约的设计是基于无限的规模和层次的绘图空间，拥有调色板，面板，菜单，窗口和控件。虽然使用简单，它提供了功能强大的矢量绘图和文字工具。如完美的布尔运算，符号，和强大的标尺，参考线和网格。Sketch92此更新带来了一系列小改进，以提高您在 Sketch 中的工作效率——包括使用 Smart Distribute 更快地整理和交换图层的方法。
Sketch Mac版是一款非常优秀的矢量绘图工具，拥有简约的设计，调色板，面板，菜单，窗口，控件和功能强大的矢量绘图和文字工具；包含针对UI设计的操作和交互模式，让你设计图标、移动手机UI、网站UI等更加简单高效。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
