header_v0.7.32

效率提升!Craft For Sketch 强火力插件入门

1年前发布

原创文章 / UI / 教程
ericplan 原创,如需商业用途或转载请与ericplan联系,谢谢配合。

Craft是一套面向Sketch和Photoshop的插件组,帮助你简化设计流程中的自动化填充,提升工作流效率,将注意力集中在设计本身。

Update:我看到下面留言区很多朋友在安装时遇到了一些问题,所以今天更新了一段视频录像来说明安装和使用Craft,请查看下面视频:(打开超清模式哦)



----------------------------------------宝宝是华丽丽的分割线----------------------------------------


e61a57712dbd0000012e7ee67df2.jpg



Craft简介


Craft是一套面向Sketch和Photoshop的插件组,帮助你简化设计流程中的自动化填充,提升工作流效率,将注意力集中在设计本身。作为一个工具套件,Craft包含下列工具:


·批量复制:快速复制重复图层,并方便调节间距、数量等。

·样式库:在Sketch中生成一个Style Guide。它使一个新的页面有不同的调色板,字体,文本样式和自定义元素,您可以建立自己。与你的团队分享和同步整个库。

·智能图库:支持Dropbox,unsplash,本地文件夹,或Web页面上调取图片到Sketch画板中。

·数据:带来真正的文本,图像,JSON等内容到你的Sketch,无需花费时间进行模拟数据。



文本填充


Craft提供了丰富的文本填充模板,可以填充英文类字符串。包括姓名,大标题,文章,日期,电邮,城市,地址,国家,货币等。同时支持访问网址方式将Web内容直接导入到Sketch中。





图片填充


图片填充模块支持导入Dropbox,Unsplash,本地文件夹或Web页面上的图片,来迅速生成真实不重复的图片。


    1. 从本地文件夹导入图片(3.8.3版本Sketch中存在BUG,可以使用Content Generator替代)

    2. 从Dropbox导入图片

    3. 从Unsplash(一个图像网站)中导入图片

    4. 从内置Web浏览器中访问网页获取图片





智能复制


在前段时间发布的Adobe Experience Design CC中我们看到了重复元素的自动填充功能,但是Adobe Experience Design现在尚不稳定,今天sketch也有了类似功能,这是Craft插件最吸引人的地方,Craft的复制功能的最大好处是,它会自动完成上述所有的功能外,还自动替换图像和文本。完全不需要手动处理,就能实现完全的高保真界面。 真的太酷了!





Style Guide 生成器


在团队合作中我们往往需要制定一个Style Guide来规范一款App的设计风格,使其色板、字体、样式、间距等获得一致的表现。在以往的设计中,制定Style Guide往往费时费力,现在通过Craft 只需要轻轻点击就可以生成一份完整的Style Guide了,是不是很神奇?!


ddb0577226e80000018c1b288ad8.jpg




library 库


与Style Guide对应的是Library(库)这个功能,我曾经使用Adobe Photoshop CC 2015的库功能来管理大量重复元素,例如App里经常重复出现的底部Tab、按钮、标题栏等。通过Craft插件,Sketch也拥有了库功能,可以将设计团队资源以库的形式统一起来,将设计规范、高效化。


95f55772265b0000012e7e849065.jpg



终极大杀器: PROTOTYPE (轻量级移动应用原型设计)


然而不要激动,还没有正式推出 (好汉请把刀收起来!)

先放毒:


在去年我注意到SilverFlow推出了一个重磅视频,使Sketch可以直接添加页面交互,而不需要再导入墨刀、Flinto等软件中模拟了。后来silver加入了Invision(Craft的母公司),因此相信在不久之后我们就可以体验到Sketch中直接进行高保真交互设计了(有没有很期待?)。



Craft 下载与安装:

下载地址:https://www.invisionapp.com/craft  

安装方式:下载Craft Manager,开启Sketch / Photoshop 支持后,可以在Sketch 与 PS中找到Craft 面板,Enjoy it!




109
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功