首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Sketch常用插件及操作

Sketch是一款流行的矢量绘图工具,广泛应用于UI设计和产品原型制作。以下是一些常用的Sketch插件和操作:

  1. 插件:
  • Zeplin:用于将设计稿快速导出为开发所需的资源,如CSS样式、图标等。插件地址
  • Sketch Runner:一个快速启动器,可以通过简单的关键字搜索来快速执行各种操作和插件。插件地址
  • Craft by InVision:提供了一系列强大的工具,用于创建和同步设计系统、数据填充、设计库等。插件地址
  • Sketch Measure:用于在设计稿上进行测量和标记,方便开发人员获取准确的尺寸和间距。插件地址
  1. 操作:
  • 界面布局:使用Sketch的布局工具可以轻松创建栅格系统、自适应布局和响应式设计,确保设计在不同设备上的一致性。
  • 高级符号:通过将元素转换为符号,可以快速创建可重用的组件,并在整个设计中进行更新。符号还可以与数据源关联,实现自动填充。
  • 切片和导出:使用切片工具可以快速创建需要导出的图层,并进行批量导出,以生成各种格式的图像资源。
  • 设计库:通过创建设计库并与团队共享,可以提高协作效率和一致性。设计库中的组件可以随时同步更新,确保团队使用的都是最新版本。
  • 原型制作:使用Sketch的原型工具可以创建交互式原型,定义页面间的转场和动画效果,并进行用户测试和验证。
  • 面板定制:通过调整工作区布局、快捷键和面板设置,可以根据个人喜好进行定制,提高工作效率。
  • 插件管理:通过安装和管理各种插件,可以扩展Sketch的功能和效率,满足特定的设计需求。

希望以上信息对您有帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Sketch常用插件操作技巧

SketchI18N 中文化插件 Runner中搜索SketchI18N安装即可 Kitchen(推荐) 阿里团队开发的一款为设计者提升工作效率的 Sketch 工具集。...便捷操作插件。 ? 官网地址:http://www.fancynode.com.cn/flavor 蓝湖设计规范云(推荐) 官网地址:https://lanhuapp.com/dsm?...自动排版的插件 官网地址:https://github.com/DWilliames/paddy-sketch-plugin 相关文章:《三步让你的Sketch 学会自动排版插件:Paddy》 行高修复...这个插件的的目的是去除Sketch上IOS所有文字的多余行高,即 行高 = 平方字体的文字高度 Miaow 一个强大的 Sketch 插件合集,由微信设计团队量身打造,让设计师和开发者更佳高效的使用...操作技巧 尽量用多画板,不要用多页面,除非两批页面的关联性不大 因为所有的插件都没法导出所有的页面,而是导出某页面的所有画板 用画板能够查看页面之间的跳转关系 Cmd+1 整个页面缩放至合适尺寸

1.7K30
  • Sketch 插件开发指南

    背景 先抛个问题,众所周知,Sketch 是 UED 设计工具,大多数 Sketch 插件都是用于提升设计人员工作效率。那么,作为前端研发的我们为什么要学习 Sketch 插件开发呢?...使用脚手架模板创建插件 skpm create --template= 常用的脚手架模板 skpm/skpm (https://github.com...主要包含以下五个模块: // 访问和修改 Sketch 文档 import SketchDom from 'sketch/dom'; // 处理异步操作。...,使内容在整个设计过程中随时可用 import DataSupplier from 'sketch/data-supplier'; // 常用的UI操作,例如:展示 message/alert 提示信息.../test-file/test.sketch,其图层元素结构如下: 通过 DevTools 插件快速查看 sketch 文件的元素结构,直接对元素属性进行操作即可。

    1.7K10

    前端VSCode常用插件安装

    VSCode的功能如此强大,这与它们的插件密密相关,插件的安装起来超级简单,种类繁多,这给我们开发人员提供了很好地的便利。...但是新手学习期间不需要安装许多插件,这里我来给大家介绍一下新手学习前端常用插件吧。...一、常用插件 1、Chinese (Simplified) 汉化   这是一个把英文转换为中文的插件,一般下载软件后我们第一个要安装的插件,方便我们看软件整体的界面。...二、如何安装插件   我以安装第一个插件Chinese (Simplified)为例   1....、点击左侧的一个类似正方形的拓展按钮   2、在搜索栏里找到我们想要的插件,然后选择插件点击安装install   3、安装好后选择restart重启   4、等待重启后插件就安装好了 以上是我个人的分享方法

    46630

    积木Sketch插件进阶开发指南

    平台化的核心其实就是当发生业务线变更时,物料市场中的素材整体同步切换,因此我们需要进行如下几个操作:首先建立全局变量,存储当前用户所述业务方信息鉴权信息;用户选择功能模块后,根据用户所述业务方,拉取对应素材...根本原因是我们的界面是通过WebView展示的,但是对Layer的各种操作是通过Sketch的API实现的,WebView只是一个网页,本身与Sketch并无关系,因此必须使用bridge在两者之间进行数据传递...,插件拉取库文件转化为JSON并在操作面板展示供选取使用;另一个则是采用类似Airbnb开源的React-Sketchapp这样的框架,它可以让你使用React代码来制作和管理视觉稿相关设计资源,官方把它称作...将选中的缩略图拖拽至Sketch的画板时,再将缩略图替换为Library中的真实Symbol即可。 ? 操作体验优化 完成了上述步骤后,就可以完成一款支持多业务方的插件了。...通过Mocha提供的loadFrameworkWithName_inDirectory方法,设置Framework的名称路径即可进行加载。

    1.5K20

    深入浅出 Sketch 插件开发

    还可以定义插件提供的命令,比如显示插件的工具栏,执行某些图层的操作等。Sketch 会在插件被加载时初始化菜单。 下面这个例子就表示用户在菜单栏点击切换工具栏就会显示 TeaMaker 的工具栏。...,下面的文件上传也会基于这个操作来进行,具体到我们插件打包这里,文件名称需要注意下,最好带上插件的版本号。...在 Sketch 插件开发过程中,调试工作是非常重要的一环,特别是涉及到对 Sketch 文件的相关操作以及要用 CocoaScript 来访问内部 Sketch API 和 macOS 框架底层 API...Objective-C 使用方法 Sketch 官方封装了一套 JS API ,但提供的功能很有限,只能够对 Sketch 文档进行一些常规的操作Sketch 中的 Document、Artboard...功能开发 像这样关于数据操作的功能开发,很适合先使用 Sketch 自带的运行脚本的功能来开发核心的功能,核心功能跑通后,再来整合到插件中,来提高插件开发效率。

    1.5K50

    Linux – 常用操作命令

    Linux下常用操作 文件定位 locate filename 有些linux版本会出现 -bash: locate: command not found 错误,安装一下 mlocate 包即可解决...path2  --把path1文件夹移动到path2文件夹下 rm -rf path  --强制删除path文件夹 zip -r wwwroot.zip wwwroot  --把wwwroot下的所有文件文件夹打包到...wwwroot.zip unzip wwwroot.zip  --解压缩wwwroot.zip 清屏 clear:刷新屏幕,本质上只是让终端显示页向后翻了一页,如果向上滚动屏幕还可以看到之前的操作信息。...reset:完全刷新终端屏幕,之前终端输入操作信息将都会被清空,这样虽然比较清爽,但整个命令过程速度有点慢,使用较少。 值得一提的是reset命令在你的终端控制错乱时非常有用。

    77420

    【图文详解】canvas插件安装方法常用插件推荐

    在使用canvas的过程中,插件可以满足许多拓展的功能需求,今天,小九整理了全面的插件安装方法和canvas插件推荐~ Canvas 怎么安装插件?...通过BigBlueButton为例,步骤如下: 登陆 Canvas 站点 通过URL:http://域名/plugins 或 http://服务器公网IP/plugins, 进入插件选择页面 选择您要安装的插件...,点击安装 在插件安装页面,去掉勾选【禁用此插件】,输入相关引导信息,点击【申请】 安装插件前后,页面已经发生变化(课程中追加了BigBlueButton对应的会议功能) 插件推荐 KineticJs...photomosaicjs——图片马赛克插件。 Fabricjs——功能强大的绘图插件。 QRCanvas——优秀的二维码生成插件

    1.7K20

    python 列表特点常用操作

    > b [[1, 2, 3], 10] >>> id(b) 46944392836376 >>> b[0]=5 >>> b [5, 10] >>> id(b) 46944392836376 二、列表的常用操作...:4:1] [1, 2, 3, 4] >>> a[-1:-4:-1] [7, 6, 5] >>> a[1:] [2, 3, 4, 5, 6, 7] >>> a[1::2] [2, 4, 6] 2、添加操作...>>> A = [1,2,3] >>> A[0]='python' >>> print A ['python', 2, 3] 4、删除操作: Del :我们通过索引删除指定位置的元素。...xrange: 它是生成一个xrange对象. xrange的用法: 1、当我们需要操作一个非常大的数据,而且内存比较吃紧的时候,我们可以用xrange来操作省内存。...xrange的数据是取的时候才生成,而range是一次性生成好 2、xrange一般用在循环里面,比如我们只需要操作部分数据的话,而不是返回全部元素来完成操作,推荐用xrange,效率更高。

    81930

    Sublime Text 3安装常用插件安装

    ##三、Sublime3插件配置 1.直接安装 安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->  Browse Packages...5.用Package Control安装插件的方法: 按下Ctrl+Shift+P调出命令面板 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。...方法介绍完了,接下来进入今天正题,一些有用的Sublime Text 3插件: 注意:安装插件时保持网络畅通,避免插件由于网络原因奔溃 1....支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime...JSFormat JS代码格式化插件。 使用方法:使用快捷键ctrl+alt+f 6.

    84210

    Vim编辑器常用操作

    编辑器常用快捷键 Vim 编辑器中设置了 3 种模式—命令模式、末行模式和编辑模式,每种模式分别又支持多种不同的命令快捷键,这大大提高了工作效率,而且用户在习惯之后也会觉得相当顺手。...要想高效地操作文本,就必须先搞清这 3 种模式的操作区别以及模式之间的切换方法。 命令模式:控制光标移动,可对文本进行复制、粘贴、删除和查找等工作。 输入模式:正常的文本录入。...命令模式常用命令 命令 作用 dd 删除(剪切)光标所在整行 5dd 删除(剪切)从光标处开始的 5 行 yy 复制光标所在整行 5yy 复制从光标处开始的 5 行 p 将之前删除(dd)或复制(yy)...过的数据粘贴到光标后面 u 撤销上一步的操作 末行模式常用命令 命令 作用 :w 保存 :wq 保存退出 :q 退出 :q!...可以把 Yum 或 DNF 想象成是一个硕大的软件仓库,里面保存有几乎所有常用的工具,而且只需要说出所需的软件包名称,系统就会自动为您搞定一切。

    95020

    【MongoDB】mongodb安装常用操作命令

    logpath 日志文件路径 --master 指定为主机器 --slave 指定为从机器 --source 指定主机器的IP地址 --pologSize 指定日志文件大小不超过64M.因为resync是非常操作量大且耗时...二、Mongo中常用命令 [root@snails ~]# ps -ef|grep mongod [root@snails ~]# mongo --host=127.0.0.1 --port=27017...> db.help() #显示数据库操作命令,里面有很多的命令 > db.foo.help() #显示集合操作命令,同样有很多的命令,foo指的是当前数据库下,一个叫foo的集合,并非真正意义上的命令...db.version() #当前db版本 > db.getMongo() #查看当前db的链接机器地址 > db.serverStatus() #查看数据库服务器的状态 三、Shell中的基本操作...注意:use操作同时可以创建数据库,如果use+一个不存在的数据库名,则use执行后,MongoDB会创建对应数据库。 4.

    1K21
    领券