开始使用:从 Sketch 到 Motiff 妙多

你大约需要花费 10 分钟时间通读这篇文档,便于你和你的团队高效地从 Sketch 升级到 Motiff 妙多。

文档中有一些拓展链接,这些内容会帮助你更详细的理解和学习 Motiff 妙多的专业功能。你不必在最初就阅读完所有拓展,而是在遇到具体场景时再查阅。

初识 Motiff 妙多—— AI 时代设计工具

欢迎来到 Motiff 妙多,使用这款 AI 时代设计工具提升你的设计生产力。相较于 Sketch,Motiff 妙多将从以下方面提升你的工作效率。 '初识motiff.png'

注册和登录

Motiff 妙多暂时只支持在浏览器中使用。

  • 👉🏻访问这里注册。
  • 请使用你的企业邮箱进行注册。
  • 如系统提示「当前仅限内测用户注册」,请联系我们开通权限。

导入 Sketch 文件

你可以在工作台轻松地将 Sketch 文件导入到 Motiff 妙多中。Motiff 妙多支持一次批量导入文件。 '导入sketch文件.png'

Motiff 妙多十分关注 Sketch 文件导入后的还原精准度和可用性问题。但还原度从理论上无法做到「100% 还原」。 主要原因是: 两款工具在部分图形和样式的底层数据结构上有差异,导致无法一一对应。

为了确保导入文件后的字体正常展示,你需要下载并安装 Motiff 妙多本地字体插件。👉🏻点击了解字体插件的安装方法


AI 功能

设计工具不断更迭,Motiff 妙多持续思考与探索 AI 技术如何融入到设计师的工作场景中。

目前已有如下 3 个 AI 功能和大家见面。

AI 设计系统

AI 设计系统能够识别出团队设计文件中可以被提炼的样式和组件,辅助你搭建设计系统。

👉🏻点击了解更多「AI 设计系统」功能

'AI设计系统.png'

AI 布局

AI 布局是一个可以对设计内容进行「结构化调整」的工具。

当你调整图层时,使用 AI 布局可以同步调整受影响的相关图层。例如文本变长时其余图层同步向下移动、快速调整列表的顺序等。

👉🏻点击了解更多「AI 布局」功能

AI 魔法框

AI 魔法框是一种全新的 UI 设计方式,它可以学习你的设计界面,生成一个属于你的「私有模型」,在设计过程中匹配你想要的内容。

AI 魔法框功能暂未正式发布,目前你可以在「AI 魔法框练习场」中体验该功能。

'AI魔法框.png'


云端协作

我们共同经历了从离线编辑文档,到如今各类线上文档处理工作的变迁,云端协作的优势不言而喻。

从 Sketch 升级到 Motiff 妙多,设计也将从「离线」跨越到「协同」。

云端管理团队文件

Motiff 妙多将所有的设计资产直接保存在云端,所有的资产会随着编辑实时更新,因此你不再需要使用一个云盘来专项管理团队的设计资产,甚至也不需要用复杂的文件夹分类管理不同版本的文件。

以下是 Motiff 妙多中文件组织方式的标准结构:

团队 > 项目 > 文件 > 页面

  • 你可以根据团队实际的分工情况来规划「团队」和「项目」的层级结构。
  • 「文件」必须存在于某一个「项目」下,而不能直接存在于「团队」下。
  • 一个「文件」下可以包含多个「页面」,每一个「页面」是一个新的无限画布。

👉🏻点击了解更多「团队管理」

团队、项目和文件的权限管理

权限分三种状态:

  • 无权限:无法访问该团队、项目或文件。
  • 可编辑:可对该团队下的所有文件、该项目下的所有文件或特定文件进行编辑。
  • 可查看:对应「可编辑」,只能查看不能编辑。
  1. 1.团队权限

在团队面板的「成员」中,点击「邀请成员」按钮即可开始邀请其他用户到本团队。Motiff 妙多支持多个邮箱同时录入实现批量邀请。

如果你需要邀请的团队成员很多,但不方便同时收集到所有成员的邮箱(或是邀请时很多成员并未注册 Motiff 妙多),在点击「邀请成员」按钮后,可选择「通过链接邀请」的方式将链接分享给要加入的成员。

  1. 2.项目权限和文件权限

拥有团队权限的成员会继承权限到团队下的所有项目和项目下的所有文件。但你可以单独对某个项目进行权限管理。同理,还可以对单个文件进行权限管理。操作路径如图所示:

'项目权限和文件权限.png'

编辑协作与评论协作

  • 编辑协作:有对应 Motiff 妙多文件编辑权限的多个成员进入到同一文件中,即可同时编辑该文件。
  • 评论协作:在工具栏中选中 '24_toolbar_comment.svg' 图标(或按快捷键 C ),点击对应区域即可发表评论。团队成员会收到和自己相关的通知邮件。

一键分享交付研发

不同于 Sketch 通常要借助第三方工具的帮助,在 Motiff 妙多中,只需将文件的链接进行分享,研发就可以随时查看标注、获取代码和下载切图。

在文件编辑中,点击屏幕右上方的「分享」按钮,即可将当前文件的链接进行分享。还可以对链接的查看和编辑权限等进行设置。

建议对研发只设置「可查看」的权限,这会让研发在选中图层时查看标注更便利。同时也可以避免研发对设计内容进行误编辑的操作。


设计理念与基础功能

Motiff 妙多的设计理念是将设计功能做得简洁、高效,从而让设计师在日常使用工具的时候保持便利和舒适。Motiff 妙多界面设计的理念可以概括为:

  • 简洁易用:所有属性出现的时机恰到好处,而不是将所有信息全部呈现给用户。
  • 效率优先:对用户获取信息做分级定位引导,内容分主次。核心信息重点展示,辅助信息简化/收纳。
  • 内容至上:强内容,弱形式。强化核心内容信息,将控件的形式感降到最低。
  • 一致性:设计表现形式全局统一,追求去形式化后的内在韵律感和规则感。 '设计理念与基础功能.png'

「容器」:「画板」+ 更强大的「组」

「容器」是 Motiff 妙多中的重要基础功能。和传统设计工具中的「画板」类似,「容器」也可以用来包含内容。

值得一提的是,Motiff 妙多中的「容器」功能比传统的「画板」更全面,它更像是强大的「组」或 div。你既可以为「容器」设置属性,也可以通过设置裁剪内容实现「容器」外内容的隐藏,还可以在容器内部嵌套其他容器。

在 Motiff 妙多中,使用快捷键 F 可以创建容器, 此外仍可以使用 Sketch 中的快捷键 A 进行创建。

当你需要设置屏幕尺寸、响应式设计、隐藏超出图层区域的内容等情况时使用「容器」图层更加高效、便捷。

👉🏻探索更多「容器」功能

「约束」

「约束」功能是在使用「容器」后的一个拓展功能。

使用「约束」时,你可以控制一个容器内的图层在调整其所在容器大小时该如何响应。

使用「约束」构建的设计内容,能够灵活地适应不同分辨率和尺寸的屏幕,不需要按多种设备尺寸重新设计。

👉🏻探索更多「约束」功能

「自动布局」

「自动布局」是在使用「容器」后另一个可拓展的强大功能,使用「自动布局」能够让很多的设计工作事半功倍。比如:

  • 随着文本内容响应式变化的按钮。
  • 可以自适应添加、删除、复制的列表。
  • 通过嵌套自动布局容器构建响应式的界面。

👉🏻探索更多「自动布局」功能

「钢笔工具与矢量网络」

Motiff 妙多的矢量网络与大多数工具有所不同。Motiff 妙多的矢量网络可以在不同方向上分叉或连接,无需创建单独的路径图层就可以绘制出复杂的形状。大多数钢笔工具在一次绘制中只能有一条单一方向的路径,并需要重新连接到起点完成闭合。

👉🏻探索更多「钢笔工具与矢量网络」功能

由于基础能力不同,从 Sketch 迁移到 Motiff 妙多,你需要适应新的矢量图形绘制和编辑方式。常规操作和快捷键的习惯也需要进行部分调整。如果你事先学习了 Motiff 妙多中矢量网络的一些绘制和编辑技巧,这个习惯一般在 1-2 周能够完全迁移。

「组件与样式」

组件

Motiff 妙多的「组件」功能与 Sketch 的「控件 symbol」有极大差异,比如在创建组件时不必设置复杂的命名结构(即图标/大/搜索…)来区分状态,只需要将同一类组件创建为「变体组件」,然后给变体批量设置属性,即可实现控制不同状态的目的。

👉🏻点击了解更多「组件」功能

对于使用者来说,无需再记住多层嵌套的名称结构,只需要在资产面板将需要的组件拖出,然后根据自己的需要切换不同状态即可。

样式

在 Motiff 妙多中,你可以将需要重复使用的属性创建为样式,便于后续快速使用、统一调整。

Motiff 妙多的样式包括:「颜色样式」、「文本样式」和「效果样式」。它们可以在本地使用,也可以作为组件库的一部分发布并在其他文件使用。

Sketch 中也有类似的功能,Sketch 支持将一个图层上的所有属性捆绑在一起组成一个「文本样式」或「图层样式」。

👉🏻点击了解更多「样式」功能

'样式.png'

相比之下,Motiff 妙多的样式更加模块化、更加灵活。在 Motiff 妙多中,我们可以用更少的样式来满足更加丰富多变的使用场景。使 Motiff 妙多的样式在创建、维护方面都更加的简单、直观。

我们可以通过下面两个例子,对比 Motiff 妙多和 Sketch 中样式的差异:

  • 在 Motiff 妙多中,可以用 6 个「颜色样式」和 2 个「效果样式」组合出右边 TDesign 中的 12 个「图层样式」。 '图层样式.png'
  • 在 Motiff 妙多中,可以用 6 个「文本样式」和 5 个「颜色样式」组合出右边 Ant Design 中的 18 个「文本样式」。 '文本样式.png'

快捷键指南

从 Sketch 迁移到 Motiff 妙多时,多数快捷键是相同的,但由于部分功能不同,所以有一些快捷键存在差异。

可以在编辑器中点击右下角的问号,选择「快捷键指南」了解 Motiff 妙多的快捷键。