TCC推荐：各位朋友，我是聿彤。在相当长的一段时间里，我们的应用始终是用户体验设计师们的首选工具。然而，近一两年间，市场上涌现出了众多新的竞争者，它们正在争夺市场份额。在这些竞争者中，Figma和Adobe XD的表现尤为突出。国内众多团队已纷纷转投Figma怀抱。在本文中，作者将分享其团队完成这一转变过程中所遭遇的常见误区，旨在为大家提供有益的借鉴。

经过数月的精心准备，我们最终确定将设计稿件全面转移至Figma平台，包括Craft以及其它相关工具。在全部迁移工作告一段落之后，我们齐聚会议室，兴奋之情溢满每个人的脸上。然而，当我们逐一导入每个项目的草图文件时，不禁发现：哎呀，我们的设计系统似乎无法再像以往那样顺畅地操作了。

在我看来，Figma 在当前市场上无疑是性价比极高的设计软件。然而，将设计项目迁移至Figma的过程，并不如某些文章所描述的那般简单流畅。

尽管我们的设计迁移过程充满挑战，遭遇了多次失败，犯了不少错误，所幸最终圆满完成，并积累了丰富的经验。在此，我希望通过本文的总结，向大家揭示软件迁移过程中可能遇到的问题，明确指出哪些是应当执行的，哪些则应避免，以便助力其他团队更高效地将他们的系统迁移至Figma。

一、从「新」开始

无法点击人物图标

若你手中握有一个完善的设计体系，其中囊括了众多按钮、输入框、图标乃至插图，你或许会萌生将其直接迁移至新系统的念头，并打算亲自修补导入过程中出现的问题。然而，请相信我，这样的做法潜藏着重大的风险，极有可能导致事与愿违，效果远不如预期。

务必要保留原有文档，同时另建一个新文档。由于设计系统无法完全无缝迁移至 Figma 平台，组件的样式可能会出现混乱sketch修改画板颜色，因此必须依照 Figma 的规范来设定组件的属性和样式。我的建议是，先从你熟悉的部分开始，对组件进行更新，然后再逐步尝试其他部分。

以构建按钮组件为例，在操作过程中，我们通常会对整体组件内部的形状进行编辑，以此来改变按钮的轮廓；而在 Figma 平台上，用户无需单独制作按钮形状的组件，能够随心所欲地调整任意组件或实例的圆角大小。

和 Figma 中更改组件形状的方法差异

您可继续运用设计系统内的过往元件。然而，在此之前，您必须先将这些元件拆分，对其进行整理，并重新进行归类，同时依照 figma 的规范进行相应的调整。这一过程正是我要提及的下一环节。

二、顺其自然，一步步来

组件层级

初涉Figma或稍作使用后，你会发现它虽与某些软件相仿，却隐藏着诸多不为人知的特性。在构建设计系统的命名体系方面，你可能感到力不从心，这是因为Figma与那些软件在文件组织逻辑上存在差异。举例来说，在创建带有阴影样式的按钮时，Figma的流程与这些软件有所不同，它允许将色彩与阴影独立设置为一个样式，而后者则不具备这一功能。

组件构成方式的区别

在设计中，我们习惯于用“/”符号对组件进行层级划分，以此明确它们之间的隶属关系。Figma同样采用“/”符号实现快速分组，但其文件系统相对不够细致，使用起来可能会感到繁琐。若想模仿其操作方式，建议维持较为简单的层级结构（即较少的层级）。这种深层文件夹结构仅适用于那些不常被访问的内容。

你或许会疑问：“若在Figma上未曾妥善规划文件架构，我该如何是好？”实际上，Figma具备卓越的管理功能，对文件的更名与删除操作都极为简便。你无需急于先进行文件整理，待所有元素创建完毕后，再进行整理同样轻松自如。这极大地有助于我们重新构建或调整设计体系，例如针对“按钮+图标”这类基础模块，你将发现它们存在两种布局：图标置于按钮的右边以及图标置于按钮的左边。因此，我们必须考虑基本模块的种类，并思考如何界定它们的层级关系。

实际上，进行大规模文件迁移是优化设计系统的一个绝佳时机，它促使你进行以下选择之一：对设计系统进行改进，亦或是调整你的文件组织结构。

非常简单、轻巧

为确保准确性并节省大量时间重新调整配色与文本格式，我们应当优先构建工具包的核心部分——即图层与文本样式。初始阶段，可从颜色、文本样式等细节入手，逐步扩展至按钮与输入框等元素。随后，持续对组件进行细分、命名及重组。在处理文件夹与子文件夹时，无需过分纠结，因为您可根据需求随时调整文件夹结构，以实现最佳使用体验。

图标库

三、使用全局和本地组件

Pages 全局系统页面

我们经常强调在设计体系中保持复杂性均衡。这实际上意味着：应将整体设计模块视为构成设计的诸多要素，诸如图标、字体风格、色彩、按钮、头像等。对于像“用户头像”或“搜索过滤器”这样的模块，若仅在一个产品中应用，则不宜将其纳入全局设计体系之中。

黄金法则规定，若某一组件被多个产品共用，应将其置于全局设计组件文件之中。若该组件仅属于特定产品，则应存放在本地组件文件里。待该组件在全局范围内得到应用后，方可将其转移至全局设计系统。

我们的全局设计模块被命名为 Core，其中仅囊括了构建我们设计体系的核心要素sketch修改画板颜色，您可以将之视为一套通用的基础模块。若他人希冀在别处项目应用这套模块，仅需将其引入即可；若需将本地模块并入公共基础模块，只需进行迁移操作即可。各类业务项目均配备独立的业务组件库，采纳此做法的初衷在于实现组件维护权限的明确划分，即各项目团队的设计师各自负责特定组件的维护工作，使得管理更加清晰直观。

四、使用这个绝妙的技巧

图标探测器 9000

我偶然发现了这项功能，操作便捷至极，简直让人联想到黑客的高手风范！在替换设计系统中的每一个图标时，我必须弄清楚哪些图片已被替换，哪些尚未。难道就没有什么快捷的方法吗？实际上操作起来十分简便，在调整图标尺寸的过程中，我借助了网格线这一工具，以此保证每个图标的大小与位置都恰到好处。这种做法效果显著——就如同圣诞树般，清晰地标示出我项目中所有已更新的图标。这样一来，我能够迅速识别出哪些图标已被替换，真是令人欣喜不已！

五、善用插件

批量重命名

Figma的非凡之处之一便在于其丰富的插件库，其中不少插件让我感到十分惊喜。在此次设计迁移过程中，你可能会遇到诸多挑战，诸如“如何将所有画板批量从CRM系统中的XX-XX重命名为XX-XX？”等问题，幸运的是，总有相应的插件能够助你一臂之力。

网上分享了非常多好用的插件，我简单的整理了一下：

实例查找器（ ）

重命名（ It）-- 可以解决上文提到的重命名的问题

图像跟踪器（Image ）

拼写检查器（）

请记牢快捷键Shift + Cmd + P，这个组合键可以帮你重新启动之前使用过的插件。它真的非常实用。

请注意，掌握快捷键Cmd + K，该键可以用来在组内新建组件，这在某些情况下极为实用。

六、整个团队来负责迁移

设计师们对变革的态度各异，有的热衷于追求，而有的则显得较为抗拒。若你的团队是那种对学习充满热情、乐于接纳新事物的团队，那么他们对于 Figma 及其独特的功能特性将更易接受，并逐渐适应。

毫无疑问，有人必须承担起引领这一任务的重任，而这很可能正是你的责任。你需向团队成员演示如何运用 Figma 来构建界面，例如移动元素、在全局范围内添加图标等操作。紧接着，团队需要共同完成这一任务，因为设计本质上是一项需要协作的领域，只有当大家齐心协力，统一目标，才能实现更高的工作效率。

从一种工具转换至另一种设计软件的过程并不繁杂，我衷心希望本文能为各位勇于尝试设计迁移的同行带来帮助。此外，我也期待你们在将设计系统迁移至 Figma 的过程中，能比我更加顺畅。Figma 是一款出色的工具，我强烈推荐给所有喜爱团队协作的团队使用！

如有侵权请联系删除！