020-29815005
预约专线时间:09:00-23:59

设计系统迁移会遇到的问题?

新闻来源:本站 日期:2021-07-19
大家好,我是优漫动游的小编,很久以来,Sketch已经成为了用户体验设计师的首选应用程序。但近一两年来,我们可以看到很多新的竞争对手正在抢占Sketch的市场份额,而Figma和AdobeXD是一个显著的成果。
    在这篇文章中,也有不少团队已经从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是个很棒的工具,我把它推荐给任何喜欢合作的团队!