使用InVision的Craft来简化团队合作 _InVision

本文概述

I.安装Craft以便与Cloud进行素描和同步
二。为你的团队建立样式库和共享资产
总结

当你(半途中)意识到团队中的几个成员正在使用旧的过时的样式指南时, 你是否曾经参加过一次远程会议来讨论设计变更？标题字体不同, 按钮颜色错误, 最新的设计将购物篮图标替换为购物车。对话脱轨了, 而不是讨论新的登录流程, 你正在花费宝贵的时间试图将人们引导到正确的文件：app_screens_final-Final-FINAL-noreally-v4.sketch。

文章图片
我们不能继续这样生活。
与团队(尤其是远程团队)进行协作会带来独特的挑战。让多个设计人员, 开发人员, 经理和利益相关者位于同一页面上, 并查看相同版本的Sketch文件是一项艰巨的工作。而且, 如果你要更改设计中的一种字体样式, 那么请确保每个人都同时更新是很麻烦的。
InVision LABS的Craft是适用于Sketch和Photoshop的功能强大的插件套件, 可简化工作流程以及与设计和开发团队的协作。 Craft使你可以轻松地构建和维护通用的资产和样式库, 实时注释和标记设计, 立即上传到InVision以及在云上同步更新。
I.安装Craft以便与Cloud进行素描和同步让我们开始安装Craft。尽管Craft是一套功能强大的插件, 可用于Adobe Photoshop和Sketch, 但在本文中, 我们将重点介绍如何将其与Sketch一起使用。首先, 检查以确保你的Sketch版本已更新到最新版本并安装在Finder的Applications文件夹中。然后, 转到https://www.invisionapp.com/craft下载Craft插件管理器。

文章图片
Craft是一套功能强大的插件, 可简化你团队的工作流程。
打开文件, 然后按照提示安装Craft Plugin Manager。成功后, Craft图标应出现在操作系统标题中的快速启动图标中。单击它, 然后选择为Sketch平台安装每个插件。 Craft将进行检查以确保你的Sketch版本是最新版本, 并为你提供了一个选项, 可以在你激活所需插件后快速重新启动程序。

文章图片
Craft Manger将出现在计算机的标题中。
Craft的主要吸引力之一是, 团队可以在Dropbox, Google Drive和Box等流行的云平台上同步共享样式和资产, 以确保每个人都在使用同一个库。
你和你的团队将需要在InVisionApp上拥有帐户。通过登录InVision网站, 导航到你的用户个人资料并打开” 同步” 标签来设置同步。在这里, 你可以选择团队共享文件的首选云平台。按照提示进行操作并授予InVision权限, 以在你团队的云上进行同步。

文章图片
现在, 你已经使用共享云安装并设置了Craft, 接下来就可以开始为团队建立共享样式了。
在Sketch中打开一个文档, 并查看在检查器面板旁边显示的新Craft面板。在这里, 你会找到在Craft Manager中激活的已安装插件：同步, 库, 数据, 重复项, 手绘和库存。就团队协作而言, 我们主要关注Sync, Library和Freehand。

文章图片
Craft的插件将显示在检查器旁边的面板中。
二。为你的团队建立样式库和共享资产我最喜欢Craft的东西之一是它的Library插件, 它使你可以从设计中生成样式指南, 并与团队共享样式和资产。当有很多团队成员在各自的文件上工作时, 确保同时将更改更新到每个人的工作环境中可能会很麻烦。库使此过程变得无缝。
一键式指南创建样式指南是许多设计师尽可能长时间推迟的设计和开发过程中的必要步骤之一。根据设计的复杂性, 对象和文本样式的数量以及设计更改的速度, 这项任务可能令人生畏。 Craft的一键式样式指南功能只需按一下按钮即可从你的文档生成文本样式和颜色, 甚至将其保存在自己的符号页中, 为你找借口。
首先单击” 库” 插件, 然后导航到” 文档” 选项卡。在那里, 你将看到从文档中存在的样式生成样式指南页面的选项。

文章图片
一键生成样式指南。
Voilà—Craft通过一个简单的操作就为你生成了样式指南, 将它们添加到文档的文本样式和颜色中, 甚至创建了一个页面, 将它们整齐地组织起来以交付给开发人员！多么活着的时间！
快速浏览一下, 看看是否有你想重新标记的内容, 然后轻拍一下自己, 以节省大量时间来创建样式指南。你或你的团队需要进行的任何更改都可以推送并立即与共享云同步。

文章图片
就像魔术一样, 你可以在云上共享简洁明了的样式指南和文档样式。
资产图书馆作为一名设计师, 我大力维护可重复使用组件的模式库, 此外还提供样式指南, 以加快设计过程并最大程度地减少不一致之处。 Craft Library插件使将页眉, 页脚, 导航菜单, 图标, 按钮和其他符号添加到全局资产库变得如此简单。更改为一个, 将其推送到你的团队, 每个人都在使用同一组符号。对于有型思维的人来说, Craft是一种启示！
在” 库插件” 面板中, 切换到” 共享” , 你将在其中找到导入库或创建新库的选项。创建至少一个库之后, 你会看到一个可用类别的下拉列表, 以及添加自己的库的功能。我建议为图标和按钮创建单独的类别, 为页眉/页脚创建一个类别, 为用户头像等重用资产创建一个类别。
组织到位后, 请选择文档中的任何符号(例如图标), 然后单击面板中的[+]空格将其添加到库中。

文章图片
组织诸如标题, 图标和按钮之类的全局资产, 然后将更新推送到共享库。
当你和你的团队迭代设计时, 你可能会更改这些共享资产。更新资产后, 只需单击” 推送更改” , 团队中的每个链接的人都会收到有关更新的即时通知, 并提示你” 更改” 。

文章图片
当图书馆资产更新时, Craft会向你发出警报, 以便每个成员都可以进行更改并保持同步。
三, 使用同步和徒手分享设计并获取反馈
即时将画板同步到InVision 通过电子邮件发送PDF文档的无止境的日子已经一去不复返了-InVision使创建可单击的原型并与你的整个团队共享它们变得容易。 InVision的标准工作流程是从设计中导出图像文件并将其上传到站点上的原型。 Craft套件中的Sync插件消除了大多数这些步骤。
借助Sync, 你可以将画板直接添加和更新到团队帐户中的原型。只需导航至” 工艺” 面板中的” 同步” 功能, 然后选择屏幕的目标即可。你甚至可以从这里开始一个新的原型, 并与你的团队分享以征求意见。

文章图片
同步使你可以轻松地使InVision原型保持最新状态。
通过邀请或共享链接共享原型, 你的队友可以轻松点击可点击的原型并添加评论。开发人员可以使用” 检查” 模式探索布局细节, 从而节省了数小时的规范工作, 并且无需在设计变更时更新文件。

文章图片
检查模式使队友可以轻松查看设计中的样式, 甚至获取CSS。
邀请你的团队对你的设计进行评论, 注释和绘图对于那些没有足够的时间在白板上开会的远程协作团队, Craft解决了另一个痛苦点。使用Freehand, 设计师可以捕获部分或全部设计文档, 并立即同步到InVision上的可共享项目, 团队中的每个人都可以注释, 评论甚至绘图。
在文档中, 导航到” 手绘” 面板, 然后选择从文档或选定的画板创建手绘项目。

文章图片
创建自由空间以进行自由形式的协作。
插件生成自由空间后, 你可以与任何人共享链接并开始协作。这些工具非常简单, Freehand跟踪谁说了什么, 从而使无缝协作变得容易。更新设计时, 可以使用面板立即更新手绘空间。现在, 没有人对老板正在谈论的那十五个图标感到困惑。

文章图片
几乎就像在那儿一样。
IV。自己的工作流程的额外功能
虽然我对Craft团队合作的潜力感到最兴奋, 但该套件还附带了其他插件, 这些插件同样可简化单个设计工作流程。
从Web快速添加虚拟内容只需要几个例子：” 等等, lorem ipsum文本是什么意思？” 在会议之前, 你必须承认在最终的模型中需要使用真实的内容。但是, 谁想要在互联网上搜寻照片, 标题, 帖子和其他虚拟内容, 以融入其设计和屏幕模型中呢？在使用第三个或第四个名称之后, 可能很难凭自己的想象来弥补假冒用户。
数据是Craft套件中的一个令人愉悦的插件, 可轻松隐藏内容。在设计中选择一个形状, 然后导航到” 数据” 插件, 你可以在其中插入自己文件夹中的照片, 也可以立即从任何类别的Unsplash中添加随机图像。你甚至可以创建自己的自定义查询以供再次使用。

文章图片
立即获取虚拟内容并将其放入设计中, 而无需离开Sketch。
添加标题和正文等文本非常容易, 只需选择所需的文本框, 然后从” 类型” 选项卡下的许??多类别中进行选择。我的团队特别喜欢将” 动机” 类别的标题用作占位符内容。

文章图片
Craft将为你的生活带来更多意义。
数据还可以让你从任何网站添加内容, 以防你需要较少的随机性。该过程本质上是相同的, 并且可以立即让你的设计充满相关的真实数据。
生成内容的等距行和列你现在需要Craft的另一个原因是, 它可以将对象和对象组快速复制到顺序完美, 均匀间隔的行和列中。忘记繁琐的复制粘贴操作。只需选择一个对象或组, 然后指定列数和行数以及间距即可。

文章图片
指定每个方向上的对象数以及间??距。
它与Data插件集成的方式让我特别着迷-复制Data生成的虚拟内容将为你提供每一帧中新生成的新鲜内容。是否需要一个充满用户照片的巨大网格？做完了布置文章页面的内容列表, 其中包含照片, 标题和预览副本？没问题。

文章图片
从数据中删除一些虚拟内容后, 立即创建一个完整列表。
直接从iStock和Getty Images添加文件你是否已超出填充内容阶段, 并需要高质量的英雄形象进行模拟？ Craft Suite的最新添加是Stock插件, 它使你可以将Sketch中的设计直接链接到使用iStock或Getty Images的帐户。一键式搜索面板中的相关图像并将其添加到你的设计中。减少你的设计工作流程！

文章图片
无需打开网络浏览器, 即可将高分辨率图片从你的帐户添加到你的设计中。
总结 【使用InVision的Craft来简化团队合作】设计团队一直在寻找改善协作工作流程并保持所有人同步的方法。 Sketch和InVision改变了交互设计师的视野。 Craft可以为你的团队增强这些工具的潜力, 无论距离有多远, 都可以简化和联系每个人的流程。使用适用于Sketch的Craft插件套件, 你可以节省设计工作量。