教程 > 摹客规范 > 和设计同步 > 和设计工具同步

和设计工具同步

Sketch插件

使用「摹客设计规范」Sketch 插件,你可以轻松、快速地将各类资源上传到摹客资源库中。

点击这里下载「摹客设计规范」Sketch 插件并安装。

在Sketch上方菜单栏找到Plugin「插件」->「Mockplus」->「设计系统」->「设计素材」,点击即可使用。

添加资源到设计规范

添加颜色

在颜色分类下新建一个分组。在设计稿上选中一个颜色图层,点击分组名称右侧的”+“,即可添加颜色资源到摹客设计规范。

添加文字

在设计稿上选中一个文字图层,切换到文字分类下,点击分组名称右侧的”+“,即可添加文字资源到摹客设计规范。

添加图层样式

在图层样式分类下新建一个分组。在设计稿上选中一个带有图层样式的图层(如带有阴影、模糊等),点击分组名称右侧的”+“,即可添加图层样式到摹客设计规范。

如果添加了相同的样式,摹客插件会提示是否要覆盖上传。

添加组件

在组件分类下新建一个分组。在设计稿上选中一个组件(如按钮),点击分组名称右侧的”+“,即可添加组件到摹客设计规范。

添加图标

在图标分类下新建一个分组。在设计稿上选中一个图标,点击分组名称右侧的”+“,即可添加图标到摹客设计规范。

添加图片

在图片分类下新建一个分组。在设计稿上选中一个图片,点击分组名称右侧的”+“,即可添加图片到摹客设计规范。

应用资源到Sketch

除了可以添加资源到摹客设计规范,你也可以使用「摹客设计规范」Sketch插件将资源应用到Sketch设计稿中。

应用颜色

在Sketch上选中图层,点击Sketch插件中“颜色”分类的任意颜色,即可将该颜色快速应用到图层上。

切换颜色模式

鼠标hover在色块上,会出现颜色模式“HEX”和一个向右的箭头,点击箭头即可切换颜色模式。现有HEX、AHEX、HEXA、HSLA、RGBA五种模式。

复制颜色色值

点击颜色模式下方的色值名称,即可一键复制色值。

应用图层样式

在Sketch上选中图层,点击Sketch插件中“图层样式”分类的任意样式,即可将该样式快速应用到图层上。

应用组件

直接将Sketch插件“组件”分类中的组件拖拽,即可将该组件快速应用到图层上。

应用图标

直接将Sketch插件“图标”分类中的组件拖拽,即可将该组件快速应用到图层上。

应用图片

直接将Sketch插件“图片”分类中的组件拖拽,即可将该组件快速应用到图层上。

下一章节 编辑资源