欢迎来到用户体验设计师的生活，当涉及到最好的用户体验（UX）和用户界面（UI）设计软件时，你有很多选择。选择一个像 Figma 与 Adobe XD是一件大事，因为它影响到工作流程、整体体验以及与客户的合作--它是用户体验设计师工作中最重要的工具。
如果您是UX/UI专业人士，请继续阅读，以了解更多关于Figma与Adobe XD的工作原理、它们的特点，以及哪一个可能是最适合您提供顶级产品的。
目录
什么是Figma？
➤Figma 用来做什么？
什么是 Adobe XD？
➤Adobe XD 用来做什么？
Figma 与 Adobe XD：主要区别
➤支持的平台
➤协作和共享
➤设计
➤ 原型制作
➤交接
Figma 比 Adobe XD 好吗？
结论
什么是 Figma？
Figma 是一个界面、矢量设计和基于云的软件，在浏览器中运行。它被许多设计师认为是支持基于团队的协作设计项目的最佳应用程序。Figma 为您提供了创建成熟的网页设计、原型设计和代码生成交接所需的所有工具和元素。
Figma 用来做什么？
虽然 Figma 看起来很像其他的原型设计工具，但它的关键区别在于能够与团队一起工作。但简单地说，Figma：
- 是一个在线UI 设计工具，支持**产品设计过程**
- 允许您免费创建图标、社交媒体图形、演示文稿和更多内容。
- 访问数以百计的字体、形状和颜色来创建动态的视觉效果。
- 创建响应式的模拟图，以获得更多基于现实生活的草稿。
- 允许你创建自己的内容库或使用其他创作者的免费库。
- 用强大的功能****定制你的图形设计资产。
- 直接在浏览器中设计，因为一切都在网上，而且是免费的。
- 您可以在同一文件中与您的团队共同编辑。
因此，Figma被认为是：
一个原型设计工具
- 允许您在同一个工具中进行设计、制作原型和展示。
- 对设计的所有更新都会立即反映在原型中，而不需要同步或导出。
- 你只需分享一个链接，就可以得到你的团队的反馈。
- 你能够在手机上运行原型，进行更可靠的用户测试。
- 它最近开始了智能动画。
- 现在有一个原型系列，有不同的屏幕尺寸，为苹果手表优化。
一个用于交接的代码生成器
- 开发人员可以直接从设计文件中检查、复制和导出CSS，并使其适应iOS和Android。
- 他们可以使用 "实时设备预览 "在移动端镜像设计。
- 他们还可以调整框架的大小，以测试布局将如何适应不同的屏幕尺寸。
值得一提的是，Figma得到了一个由设计师和开发人员 组成的大型社区的支持，他们提供插件以改善功能和简化工作流程。欢迎大家贡献和分享。
什么是 Adobe XD
Adobe XD是一个基于矢量的UI/UX设计工具，使你能够设计从智能手表应用程序到完全成熟的网站的任何东西。Adobe XD承诺为那些仍在使用Photoshop或Illustrator进行UI设计的专业人士带来新鲜的空气，它是唯一允许进行原型设计的Adobe工具。
Adobe XD的用途是什么？
Adobe XD是在考虑到移动和网络体验的情况下开发的，设计团队正在利用它的功能进行全面的体验设计过程。
从应用上看，Adobe XD被用于：
-
网站设计- 网站设计和Adobe XD一起工作很好，从信息架构到布局和原型设计。概念和想法被轻松地汇集在一起，使用像Stacks、Padding和Repeat Grid这样的生产力功能，为你的网站定义导航模式、滚动，以及更多。
-
应用设计--为手机、桌面应用、甚至网络应用设计应用，需要动态互动、多种导航模式和各种屏幕尺寸，包括不太常见的屏幕尺寸，如数字Mupi。Adobe XD通过响应式调整大小、为常见设备预建的艺术板尺寸以及自动动画和拖动触发器等原型功能，使创建应用体验变得简单。
-
游戏设计--你可以直接在Adobe XD中绘制和测试游戏菜单、设置和其他界面组件，只需插入一个支持的蓝牙游戏控制器。
-
语音助手设计--由于Adobe XD强大的语音命令和与亚马逊Alexa和谷歌助手的连接，使你能够创建虚拟助手的原型，使你能够测试体验。
从功能上看，Adobe XD有许多与Figma相似的功能：
-
UI设计--通过与Creative Cloud应用程序（如Photoshop和Illustrator）的集成，你可以轻松地拉入资产，并能使用所有必要的工具来完成你的最佳工作。
-
用户体验设计--您可以快速迭代，测试交互和流程，并更真实地了解摩擦点，这样您就能在发现问题后立即解决它们。
-
线框设计--UI工具包使你能够轻松地创建交互式线框，以测试你的设计并通过用户流。
-
原型设计- Adobe XD的先进功能，如自动动画和语音，使其更容易建立一个消费者可以探索和参与的原型设计 - 导致更好的用户体验。
-
开发者交接- Adobe XD的共享模式使你从一开始就能与开发团队合作。 无论你是使用配音录音来走一遍你的设计，还是分享开发细节，XD都能让你随时保持联系。
-
团队协作- 实时共同编辑和云文件使你的团队内部的协作更加容易。
Figma 与 Adobe XD：主要区别
自2016年Adobe XD问世以来，Figma与Adobe XD一直在相互竞争。最初的竞争并不激烈，XD的早期版本缺乏几个关键的功能，但近年来这种情况已经有所改善。现在，这两个软件之间的竞争已经加剧，要挑选哪一个最适合您和您的项目变得更加困难。
Figma 与 Adobe XD 的主要区别在于价格。Figma对个人用户是免费的，只有当你想使用协同工作等功能时才需要付费，而对于Adobe XD，你必须在使用前付费。下面，我们将介绍各自的优势所在，以及哪一个更适合你的具体情况。
支持的平台
菲格玛
- 桌面- Windows、Mac、Linux（Figma-linux应用程序提供支持）。
- 桌面浏览器- 可以在任何支持WebGL的浏览器中进行编辑 - 基于ChromeOS、Linux和Berkeley Software Distribution（BSD）的系统。客户还可以在桌面浏览器中预览草稿。
- 移动设备浏览器--iOS和安卓系统可采用纯视图模式；此外，Figma还支持Safari、Chrome和Firefox。
- 移动应用程序- iOS 和 Android 有模拟移动设备的 Figma Mirrow 应用程序。
Adobe XD
- 桌面- Windows 和 Mac。
- 桌面和移动浏览器- XD在浏览器中生成设计预览，以便客户提供反馈。
- 移动应用程序- iOS 和 Android 有 Adobe XD 应用程序，可进行实时预览。
菲格玛
- 多人游戏- 任何数量的用户都可以登录并同时编辑一个文档。
- 观察模式- 你能够镜像你的队友的屏幕，这样你就能看到他们在文档或草稿中的移动。如果你想观察客户对原型的操作，看看是否有任何缺陷，这很有用。
- 团队库--你可以为自己的工作建立设计系统，包括可重复使用的组件、配色方案和字体风格，也可以将这些设计系统提供给整个团队使用，以便每个人都在使用相同的元素。
- 自动保存和同步--对文档和设计系统的任何修改都会被立即保存和同步。如果有队友在共享项目上工作时发生了变化，他们将得到通知，确保所有团队成员随时都是最新的。将不需要文件的上传、下载或手动合并。
Adobe XD
- 共同编辑 - 截至2019年11月，有一个协作的 "共同编辑 "设计测试功能，其工作原理类似于Figma的 "多人 "功能。两者之间目前唯一可见的区别是，在Adobe XD上，你看不到其他设计师在文档上工作的实时光标。
- 链接资产--当一个文档被保存到云端时，它的组件和样式可以通过链接访问。
- Creative Cloud库--你可以通过CC库来组织和访问资产；这可能类似于Figma的团队库，但在XD中促进协作的功能没有那么好。
菲格玛
- 使用框架，作为代表视口和设计子元素的容器，如按钮、内容部分、导航元素等等。框架具有以下艺术板所具有的所有功能，而且它们还可以为这些元素带来额外的功能，如网格和自动布局。
Adobe XD
- 使用的艺术板也作为容器，代表只容纳设计的视口--例如，手机屏幕与笔记本屏幕。在进行原型设计时，你可以把这些艺术板连接起来，以模拟用户在网站或应用程序中的移动。虽然框架可以做艺术板的一切，但 XD 的艺术板不能做 Figma 的框架所能做的一切。
原型设计
Figma和Adobe XD都可用于原型设计，但XD略胜一筹，因为它有一系列的触发器，可以促进更多类型的UI设计。让我们来看看。
菲格玛
允许你每个元素有多个互动，只要它们是不同的。
触发器
- 点击时
- 拖动时
- 悬停时
- 按下时
- 鼠标进入
- 鼠标离开
- 鼠标向下
- 鼠标向上
- 延迟后
行动
- 导航到（框架--用于在艺术板类型的框架之间移动）打开叠加（框架）
- 与（框架）交换 - 用于交换备用组件类型的框架，如按钮，更多信息见下一节）。
- 返回
- 关闭覆盖层
- 打开URL
转场
- 瞬间
- 溶解
- 智能动画（见下一节后）。
- 移入
- 移出
- 推进
- 滑入
- 滑出
缓和
- 缓进
- 缓进缓出
- 缓进和缓出
- 线性
Adobe XD
允许你对每个项目进行多种互动，如悬停互动和点击互动。
触发器
- 轻敲
- 拖动
- 悬停
- 时间
- 语音
- 按键
- 游戏手柄
行动
- 转场
- 自动动画
- 叠加
- 语音播放
- 以前的艺术板
- 状态改变
转场
- 右边
- 上
- 向下
- 溶解
- 向左滑动
- 向右滑动
- 向上滑动
- 向下滑动
- 向左推
缓和
- 无（又称线性）
- 缓出
- 缓进
- 缓进-缓出
- 捕捉
- 上风
- 弹跳
我们可以得出结论，Adobe XD允许每个元素有一个以上的交互，允许你创建具有更接近人们在浏览器中的行为的功能的原型。
移交
费格玛
如前所述，Figma 可以生成 CSS、iOS 的 Swift 和 Android 的 XML。它还可以让您直接复制 CSS 或 SVG。另外，如果文档有变化，代码会自动重新生成。
Adobe XD
XD能生成CSS代码，但你必须先生成一个开发者链接，然后在浏览器中打开该链接。与 Figma 不同的是，如果这里的文档发生了变化，您需要重新生成链接并刷新它。
Figma 比 Adobe XD 好吗？
简短的回答：是的。Figma 一直是--可以说是--设计团队选择的一个设计工具，因为它具有惊人的团队协作功能。它简化了设计过程，有效地帮助设计师和团队更有效地合作，因为你能够与你的队友进行现场协作。另外，设计师和团队高度受益于Figma，因为：
- 它是免费的，你无需下载应用程序就可以访问它。
- 它可以在任何平台上使用。
- 协作简单而熟悉。
- 共享不复杂且灵活。
- 嵌入式文件提供实时更新。
- 原型设计是直接和直观的。
- 开发人员的交接很容易。
- 团队库是设计系统的理想选择，允许任何有权限的人使用最新版本。
总结
Figma与Adobe XD之间的争斗将继续下去，他们无疑在相互推动，以改善和加强他们的游戏。现在，我们经常看到其中一个产品的专属功能出现在另一个产品中，这使得设计师更难决定选择哪一个产品来创建一个高质量的产品。
但是，如果合作对您和您的团队很重要，Figma就是您的最佳选择。它是自下而上设计的，考虑到了团队合作，因此，没有其他软件能够在短时间内与它竞争。它在框架与艺术板、自动布局、响应性和图形设计/UI设计方面也比Adobe XD更胜一筹。
另一方面，如果你已经习惯了Adobe的生态系统和Creative Cloud，你就有更好的机会使用Adobe XD。另外，Adobe XD在自动动画和语音方面的原型设计略胜一筹，有利于其准确性。
