来源：Medium网站

作者：SigneRoswall

翻译：奥创

阅读时长：10min

再见，Adobe。

你好，菲格玛！

我与Adobe的关系始于十年前，作为一个不安全，参差不齐的少年，我发现了Photoshop和克隆工具的神奇奇迹。

后来，Photoshop成为我创建我的第一个网站设计的地方之前，辛苦地转移到Illustrator。我甚至与Dreamweaver有过一段短暂的恋情，我在其中写了一些我的第一个代码。虽然与整个生命周期相比，十年似乎并不是很多，但它仍然是一个巨大变化的时期- 也在设计领域内。因此，随着Adobes发布的体验设计，也被称为“XD”（我仍然读作笑笑）我很高兴并且很高兴继续使用Adobe套件。

但是那一天，大约一周前，当我打开Figma时。

首先是一个显而易见的问题：Sketch怎么样？

我几乎可以听到那里所有素描人员说的话; “那么你为什么不使用Sketch？草图很棒。“ 是的，我同意。

在我之前的工作中，我被要求使用Sketch而不是XD，这本来是我自己的偏好。但是，尽管我必须学习一个全新的设计工具，同时仍然提供坚实，优质的设计，但实际上我很喜欢Sketch 。我使用符号来更快，更容易地设计具有响应调整大小等功能的新界面和插件。我还有一个值得信赖的内容生成器，它可能每天节省我大约半小时。但最重要的是，我可以构建我的设计，所以我只需要在一个地方进行更改，这种逻辑正是我非常喜欢使用Sass作为前端。

但Sketch有一个巨大的缺点：它不适用于Windows。

此时，所有其他Mac设计师都在吐出一口咖啡：“什么？！你在用PC吗？！“

虽然我仍然在家里为我的PC发誓玩游戏，但我确实使用Mac 来做我的工作。

但实际情况是，大多数开发人员和我的新团队中的其他设计师都在PC上 - 将Sketch作为一种选择。因此，当我的两个新同事独立地提到Figma时，我决定检查一下。

Figma 在他们网站的标语中设定了相当 高的期望“更好的设计方式”  - 特别是在考虑他们没有特别与其他任何设计工具进行比较时。虽然从用于UI设计的Photoshop中切换到Figma可能肯定是一种更好的方式来设计什么时候你来自Sketch或Adobe XD？

我从新工作开始就回到了XD，但很快就发现自己渴望得到Sketch的舒适，特别是当我们的第一个项目投入生产时，我们团队的XD挑战变得非常明确：

开发人员对切换不满意。概述不直观，只允许放大到某个点，并且需要额外点击每个单独的屏幕才能检查它。

我们还发现， 我们无法阅读彼此对模型的评论，只有我们自己的评论，这打破了整个评论点。

当在XD中目前无法在所有文件之间共享调色板和文本样式这些必要的东西时，我也很难确保简化设计。

原型即使是带有链接的任何人的付费版本也是公开的。使其成为私有的唯一方法是在其上设置密码，我们都知道为什么服务试图摆脱密码：他们很糟糕。

最后，不支持像库一样简单的东西，但使用XD的符号功能（因此，基于组件的设计）完全没有意义。除非从Photoshop或Illustrator等其他程序执行此操作，否则设计文件无法维护和更新。

我决定要求订阅一个月试用Figma，经过一周的测试后，整体印象非常好 - 这就是原因。

更好的概述

有一百万种方法来构建设计文件，没有正确或错误的方法 - 只有适合你和团队的方式。虽然交接和合作很重要，但实际上我有点担心Figma如何与我自己的结构一起工作 -  或者我的缺乏。

我经常有非常混乱的工作文件，充满了半生不熟的UI，想法，甚至整个，完成像素完美的模型 - 换句话说：一个完整 的，彻底的混乱。但我确信我的同事们会更喜欢一个漂亮，干净的概述，而在Figma中我们都会看到完全相同的界面和文件 - 就像在Google Docs中一样。

但是，如果设计产品教会了我任何东西，那么结构的混乱和粗心的倾向有时仅仅是由于缺乏（正确的）选择。这就是为什么我很高兴Figma不仅仅有一两个，而是四个级别的结构选项来帮助我清理文件：

团队下边栏中的项目标签

每个项目中的文件（您在下面看到的卡片）

网页内的每个文件

每个页面内的框架（这是画板）

我们目前仍在使用基于项目的（而不是sprint），它与侧边栏中的Figma项目选项卡非常吻合。我也尝试将平台中的每个“区域”作为具有Frames作为页面的单个文件，因此我可以使用文件内的页面用于桌面，移动和平板电脑版本：

一个更好的组件系统

我喜欢开始新的UI设计，创建一些看起来像模型的坏蛋，然后，像一只猫一个人留下一卷卫生纸，将所有东西分成小块。

每一张卫生纸......嗯......废话......不，不是真正的垃圾，我只是...真的后悔现在正用猫和卫生纸的比喻。我应该完全放弃Legos的普遍例子。*叹*

好吧，让我们试着用它来卷马桶：

每一块破碎的卫生纸都有颜色，排版，图标等样式，如果再次结合......通过......时间的扭转......或者是一个非常细致的胶水作业，也许？...整张卫生纸将制作出布局卡片，标题和导航等组件。最终我将要制作很多完整的卫生纸...卫生纸卷......如菜单甚至整个页面布局......

底线，FIGMA中的组件很酷，好吗？

作为默认情况下，Figma第一次登录时，我已经决定保留侧边菜单中的Design System项目。我喜欢它总是在侧面菜单中提醒我们所有我们现在有一个风格指南yaayyyyy！

我们的设计系统本身基于Bootstrap 4 UI。

虽然我没有使用Bootstrap任何狂热的胎儿，但我更喜欢使用前端框架作为我的UI设计的基础，因为我知道我正在设计的东西是开发人员可以以接近99％的准确度再现的东西。此外，框架是许多不同开发团队用于许多不同平台的常见问题，并且它们经常重用具有良好可用性的常见，已建立的接口模式。它还使我不必再为像桌面视图这样简单（无聊）的东西重新发明轮子 - 让我有更多的时间专注于设计一个kick-ass，自定义内容创建流程。

使用所有Bootstrap 4选项在Figma中设置设计系统是一项漫长而繁琐的任务，但一旦完成，它绝对令人惊叹！例如，在我的设计系统项目的Buttons文件中，我有两个页面，一个叫做Buttons，另一个叫做Master（不要编辑）。

主文件是我构建我的“核心”按钮组件的地方，它们有三种尺寸变体，有不同的选项：仅文本，图标和文本，仅图标。

但是每个按钮还有两种样式 - 实心和轮廓，这就是我开始创建所有按钮颜色作为单独组件的原因：

然后我使用这些颜色组件作为主按钮组件中的背景，以轻松更改颜色 - 从字面上只是从下拉列表中选择：

在创建我们将在设计时使用的所有常规按钮组件时，这极大地帮助了我：

我还确保禁用团队库中的所有主按钮组件，使它们仅对Buttons文件是私有的。但是通过这样的设置，整个设计的变化变得像捕捉手指一样简单（快速）。您是否决定了按钮的新字体样式，大小甚至是系列？没问题：

在我们的设计系统项目中，我还有一个名为“ Prefabs ”的文件，其中我将一些卫生纸（再次，对于那个比喻很抱歉）组合在一起，例如菜单项和标签，以创建整个预制菜单布局。然后可以通过单次拖放将这些预制件添加到新项目或页面中，希望这将是保持平台中的体系结构一致的简单方法。组件仍然是我正在玩的东西 - 但我已经对它们的工作方式非常满意。

分享的更好方式

在分享设计方面，我觉得Figma在他们的团队结构方面是光明的。创建团队并邀请人员加入该团队将使他们可以作为编辑者（可以编辑的人）或仅查看。在Figma中，我们都在看同样的事情 - 有时甚至是在同一时间 - 因此很容易达成共识。如果我想与不在我们团队中的人分享设计，我会用他们的电子邮件来做。

......还有私人空间

开发人员拥有自己的帐户，只能查看所有团队文件，交换公共链接和隐秘密码，没有人记得我们整个团队的私人安全空间。这也意味着不再担心链接的共享位置，他们可以访问的版本，是否更新，或者网络空间某处存在安全风险。

更好的优先顺序

总的来说，XD和Figma对我来说最大的区别 - 我不喜欢这样说，因为我知道尝试创造出令人敬畏的产品的时间，精力和努力 - 是Figma似乎更加关注需求现代产品团队及其设计流程。至少就像我们这样一支超级敏捷，“创业”团队的感觉。但我也碰巧知道设计和开发产品 - 优质产品 - 都是基于用户和客户需求确定优先级并做出正确选择。

当然，XD有一些新的语音原型功能（？），但没有像我可以在文件中定义和重复使用我的样式指南的库那样重要- 我错过了我的设计的整个基础。

 来源网络

我还没有测试原型制作部分并向利益相关者展示，但我希望Figma会继续让我感到惊讶，最好以积极的方式。

一种更好的设计方法

自从第一次打开Photoshop以来已经过去了十年。现在我慢慢意识到，一旦我将所有设计迁移到Figma，我的工作计算机上甚至都没有一个Adobe程序。感觉非常明确。

我生命的一个时代已经正式结束。

但是当我回顾我与Adobe之间的整个关系时 - 我已经知道Wooohoo Happy Times和Hell on Earth之间的频谱无处不在，我现在知道告别它是为了更好。

为了更好的设计方式。

谢谢你的阅读！

为了清楚，Figma没有付钱给我写他们的产品 - 我是按照自己的意愿做的。这是他们的产品有多好，去看看吧。

喜欢请点赞加关注哦~~

也可以关注奥创公众号哦~看图文更方便~