上传设计稿

将原型导入设计协作工具

墨刀支持将账号的当前所在空间内原型项目页面导入设计协作工具中,能够轻松表达流程与逻辑,演示评审更省心省力。

选择【导入原型页面】后,在弹出的窗口中可以选择要导入的项目,并勾选需要导入的页面,点击确定后即可开始导入。



您所选中的原型页面会以图片形式呈现在画布中,不支持进行标注。





如何上传图片至设计协作工具

墨刀支持上传JPG、PNG、GIF格式的图片,上传后不支持标注。

本地图片上传到墨刀设计协作工具有两种方法:

1.点击编辑区顶部的小加号,选择由本地上传。



2.将本地图片直接拖拽至画布内即可。





sketch设计稿上传步骤

在上传sketch设计资源前,你需要先安装并完成登录sketch插件

「Sketch 插件」暂时仅支持 macOS 系统

安装并登录sketch插件后,通过以下步骤即可完成上传。

1.在sketch界面,点击顶部工具栏中的【插件】选项,选择墨刀插件后,点击【上传画板】。



2.在插件面板中,选择设计图的相关信息,如设计图的画板(选中的画板or当前页面的全部画板or当前文件的全部页面)、设计稿尺寸、上传至哪个项目、上传至个人/企业空间(团队)。

其中智能上传可以同步画板所在的sketch页面与分组,普通上传则可以手动选择分组。







3.当出现下图提示时,则说明已经上传完成。此时可以选择快速分享或者前往查看设计稿。





由XD插件上传

墨刀XD插件现支持XDv37及以上版本。



一、下载XD插件

在上传XD设计资源前,你需要先下载墨刀XD插件。共有两处下载入口。

1.下拉弹窗下载

单击顶部工具栏的【加号】按钮,在弹窗中点击XD插件【下载】;

2.画布中下载

在当前页面为空时,画布视图中会显示上传设计稿方式,单击【获取插件】即可下载插件。



二、上传XD文件

1.在Adobe XD界面,点击顶部工具栏中的【插件】选项,选择【墨刀】,并登录墨刀账号。



2.在插件的上传页面,可以进行具体上传设置。

如所处个人/企业空间(团队)、设计稿的画板(选中的画板or全部画板)、设计尺寸、上传至具体的项目、页面、分组、等,也可以点击右上角【加号】创建新的项目或页面。

设置完成后,点击【上传】即可。





3.当出现下图提示时,则说明已经上传完成。此时可以选择快速分享或者前往查看设计稿,也可以直接通知项目成员。





三、xd 插件使用帮助

如您在使用Adobe XD 插件时遇到上传问题,请参考以下步骤进行操作。

1、xd插件无法安装

如果您的xd插件无法正常安装,可参考视频中的步骤进行操作解决。




2、xd插件显示网络异常

当您在登录 XD 插件提示【网络异常】,请您关闭网络代理或者 VPN,之后可以正常使用。

  • Mac:【系统偏好设置】-【网络】-【高级】-【代理】,关闭代理。


  • Win10:【网络和Internet设置】-【代理】,关闭代理。




3、xd切图相关问题

1.上传文件图标尺寸与设计稿不一致

在 XD 中,图标的下方加上透明底图,使用剪切蒙版的方式确保图标大小与墨刀网页端导出的大小一致。


2.无法导出切图以及画板缩略图

如果你是macOS 系统,可以点击【系统偏好设置】-【安全性与隐私】-【隐私】-【完全磁盘访问权限】。

点击【加号】,手动把 Adobe XD 添加进去,重启 XD 即可导出切图和画板。





由PS插件上传

墨刀PS插件现支持Photoshop CC 2021 及以上版本。

Mac(适配 M1 芯片)、Windows 均可下载。

在使用墨刀PS插件前,请先确认已经安装了 Creative Cloud(点击这里下载) ,并且登录 Adobe 账号。



1、下载PS插件

在上传PS设计资源前,你需要先下载墨刀PS插件。共有两处下载入口。

1.下拉弹窗下载

单击顶部工具栏的【加号】按钮,在弹窗中点击PS插件【下载】;

2.画布中下载

在当前页面为空时,画布视图中会显示上传设计稿方式,单击【获取插件】即可下载插件。



2、安装PS插件

你需要安装并登录了 Creative Cloud,并且 PS 版本是2021及其以上

如果 PS 版本低于 2021,将会出现下图:



下载好墨刀PS插件后,双击文件打开:



双击后会自动打开 Creative Cloud,点击【本地安装】:





出现下图状态,代表安装成功:



接着打开 2021 或以上版本的 PS ,即显示墨刀PS插件登陆页面。

输入万兴/墨刀账号及密码即可登录。



3、智能标记切图

选中】需要切图的图层或编组,点击【智能标记切图】。



当图层或编组名称前增加【**-s-】,【智能标记切图】变为【取消切图标记**】,此时切图操作便完成了。



4、上传PS文件

1.在Adobe PS界面,是否已经出现墨刀PS插件,若未出现,点击顶部工具栏中的【增效工具】选项,选择【墨刀】,并登录墨刀账号。



2.在插件的上传页面,可以进行具体上传设置。

如所处个人/企业空间(团队)、设计稿的画板(选中的画板or全部画板)、设计尺寸、上传至具体的项目、页面、分组等,也可以点击右上角【加号】创建新的项目或页面。

设置完成后,点击【上传】即可。





3.当出现下图提示时,则说明已经上传完成。此时可以选择快速分享或者前往查看设计稿,也可以直接通知项目成员。





##插件上传小贴士

1、设备说明:

iPhone、iPad、Apple Watch这三种设备界面设计属于ios;

安卓系统界面设计属于Android;

网页类型的界面设计属于web。



2、 尺寸与倍数关系的说明:

iOS 类型的倍数:375 x 667 属于 iOS 1x;750 x 1334 属于 iOS 2x;1242 x 2208 属于 iOS 3x。

1920 x 1080 尺寸的手机界面建议选 Android-xxhdpi;网页选 Web-1x。

Web 类型的倍数:1x 为网页常用尺寸;2x 为特定屏幕尺寸,如 4k 屏,通常该尺寸会是正常网页的 2 倍。

这篇文章帮助到你了吗?