设计系统迁移会遇到的问题？-优漫动游

　　在这篇文章中，也有不少团队已经从Sketch转到Figma，讲述了作者带领团队从Sketch转到Figma之后的一些易错之处。

　　在筹划了数月之后，我们最终决定将Sketch,Invision,Craft和Abstract的设计稿全部转移到Figma。大家聚在会议室里之后，大家的情绪都非常激动。在导入每个项目的每个草图文档之后，才会发现：哎，我们的整个设计系统无法像以前一样运作。

　　依我看，Figma是市场上最具性价比的设计工具。但是，将设计项目从Sketch迁移到Figma并不像一些文章描述的那么简单。

　　尽管我们这次的设计迁移非常困难，甚至一连遭遇挫折，经历过许多失败，但也很好地积累了成功，积累了不少经验。通过本文的总结，我希望把软件迁移所遇到的问题告诉大家，明确哪些应该做哪些不应该做，可以帮助其他团队快速地将系统迁移到Figma。

　　一、从“新”开始。

　　不能单击人物图标。

　　如果您有一个成熟的设计系统，并且包含了许多按钮、输入框、图标甚至是插图，您很可能会遇到这种情况。您也许想把它直接导入一个新的设计系统，然后手工修复导入失败的地方，相信我，这是非常危险的，而且很可能会事倍功半。

　　请确保保留原来的文件，然后新建一个。Sketch设计系统在Figma系统中并不完美，组件风格很容易造成混乱，因此需要基于figma的规则创建组件的属性风格。从您将使用的部分开始，执行组件更新，然后再尝试其余部分。

　　例如，创建一个按钮组件，在Sketch中，我们通过整个组件内嵌套形状来修改按钮的形状；在Figma中，完全没有必要制作按钮的形状组件，可以自由控制任意组件或实例的圆角半径。

　　在Sketch和Figma中改变组件形状的方法不同。

　　您还可以在设计系统中使用旧的组件。然而，需要首先解组组件、整理并重新分组，以按照figma的规则修改。接下来我要讲的就是这个问题。

　　二、顺其自然，循序渐进。

　　部件层次。

　　假如你是Figma的新手，或者用过一小段时间，就会发现Figma和Sketch虽然很相似，但是还有很多不懂的特性，并且不能对设计系统的命名架构进行巧妙地安排，因为Figma和Sketch的文件组成逻辑不同，通过创建阴影样式按钮的方式可以看出不同，Sketch会将颜色和阴影作为一个独立的样式，而Figma并不需要。

　　部件组成的差异。

　　在Sketch中，我们使用"/"来对组件进行结构分级，以确定组件之间的依赖关系。Figma也使用“/”来快速分组，但它的文件系统并不十分精细，而且如果你想像Sketch一样使用它的话。最好的方法是保持浅层结构(减少层数)，这种深层次的文件夹只适合那些不常使用的类型。

　　您也许会问，"如果一开始Figma中的文件结构不够规范，该怎么办？"事实上，Figma拥有超强的管理能力，重命名和删除东西都很方便。您不需要对文件进行优先整理，所有元素都被创建后整理也很容易。对于我们重建或者修改设计系统是非常有利的，比如“按钮+图标”这样的基本组件，你会发现它有两种风格：按钮右边的图标和按钮左边的图标。因此，我们需要考虑哪些基本组件以及如何定义它们的层次结构。

　　事实上，大规模的迁移文件是一个更新迭代设计系统的好机会，可以改变您的设计系统，也可以修改您的文件结构。

　　很简单，轻巧。

　　为避免出现错误，并避免花大量时间重新调整颜色和文本样式，因此，首先，您应该创建整个工具包的核心，即层和文本样式。在按钮和输入框之前，从颜色和文本样式这类一些小的方面开始，之后您就一直在分割、重命名和重组组件。不必过多考虑文件夹和子文件夹，因为您可以随时调整文件夹的结构，从而获得最好的体验。

　　设计

　　三、使用全局和局部组件。

　　全局系统页面的全局页面。

　　经常提到在设计系统中平衡复杂度。大概意思就是：可以把全局的设计组件看成是构成设计的各个要素：图标、文本样式、颜色、按钮、头像等等，像“用户头像”或者“搜索过滤器”之类的组件，如果只用于一个产品，那么就不要将其放在全局系统中。

　　金科玉律：如果一个组件跨多个产品被使用，那么将其放到全局设计组件文件中。如果是一个产品特有的，那就把它放在本地组件文件中，直到这个组件具有全局性，然后再将其移到全局设计系统。

　　全球设计组件名为Oxygen|Core，它仅包含了构成我们设计系统的基本元素，您可以将其理解为一组通用基础组件。若某人希望将该组件用于其他项目，则只要将该组件添加到该项目中即可，如果希望将本地组件添加到一个通用基础组件中，移除即可。各个业务项目都有他们自己的业务组件库，我们这样做是因为他们可以对组件进行维护，设计者要对不同的组件进行维护，并且要有明确的维护权限。

　　四、运用这种绝妙的技巧。

　　图像探测器9000。

　　出乎意料的发现了这个功能，非常好用，简直就是黑客！在更换设计系统中的每个图标时，需要知道哪些图片被替换了，哪些还没有。还有什么快捷的方法？实际上很简单，在调整图标大小的时候，我用了网格线来确定每个图标的大小和位置，它有一个很好的效果——更新了我当前项目中所有更新的图标，我马上就能看到在哪里替换了，这真是太棒了！

　　五、使用插件。

　　大规模重命名。

　　Figma最有魅力的地方之一就是您可以使用各种插件，说实话，有些让我感到非常惊讶。这次的设计移植过程中，你会遇到许多问题，例如"我如何将这些画板从CRM-XX-XX批量批量重命名为XX-XX?"等等，可以找到插件来帮助您解决。

　　网络上有很多好用的插件分享，我简单的整理一下：

　　实例查询程序(InstanceFinder)

　　重新命名(RenameIt)--解决了上述重命名问题。

　　影像追踪器(图像追踪器)

　　拼字检查(Spellchecker)

　　p.s.不要忘记快捷键Shift+Cmd+P，它可以重新运行你最后一次运行插件。非常有用。

　　通过Cmd+K学习用于从一个组创建组件的快捷键Cmd+K，有时候非常有用。

　　六、整个团队负责迁移。

　　一些设计师喜欢改变，有些人则拒绝改变。如果你的团队是那种喜欢接受变化，并且喜欢Figma，而且Figma的新特性也更容易被接受和适应。

　　毋庸置疑，一定要有人带头去做这些，当然这个人肯定就是你。您需要向您的团队展示Figma是如何创建界面的，例如允许移动元素，在全球系统中添加图标等等。以后还是要团队一起来做这件事，毕竟设计是协同工种，只有大家统一目标做事才能更有效率。

　　总体而言，从一种工具移植到另一种设计工具并不复杂，我希望这篇文章能对您这些勇敢的设计迁移者有所帮助，同时，我也希望您能比我更顺利地将设计系统移植到Figma。Figma是个很棒的工具，我把它推荐给任何喜欢合作的团队！