前端说Figma开发模式很鸡肋

Figma今年做了，其中面积最大的新增模块就是开发模式（Dev Model）了。

这个功能呢，简而言之，就是方便前端使用的，从里面看参数、复制代码、切图什么的……

总而言之，跟蓝湖类似，但功能更丰富。

之前在群里讨论这个，有人说：“我们公司前端说这个很鸡肋。”

此话一出，在场的设计师都不知如何反应，因为大家确实不懂前端啊。

但去年8月，我们的前端训练营中，还就真的让设计师体验了一把Figma的开发模式——出乎了很多人的意料。

试用感受

当时是让大家写下面这个页面的前端代码，头部那一行自己写CSS样式，并提示可以参考Figma开发模式。

结果不少人就直接把Typography那一堆代码贴到CSS里了。

结果基本都实现了，没啥问题，但我的作业点评：“字体不对，而且代码冗余。”

为何字体不对？

代码里写的 PingFang SC 苹方简体，有何不对？

前端如果把字体设置成苹方简体，对非苹果设备无效的，因为他们系统压根儿没这个字体。

所以前端的字体，必须考虑不同系统的兼容性，直接跟着系统字体走，或者多列几个备选字体。

几乎没哪个设计工具会让你设置备选字体的，所以开发模式自然不能考虑到这个问题。

为何代码冗余？

前面说了，字体要考虑兼容，得多列几个备选。

但如果是这样，是不是要给页面中每个文字元素，都列一堆备选字体？

显然没有必要，这样代码很长很长。

其实大部分页面或产品，从头到尾就一种字体，多半只需开头设定一次，后面全部默认按这个来。

所以Figma开发模式提供的这个代码，根本没必要出现字体参数，应该直接删掉。

而Figma开发模式没法想那么多，只是简单粗暴地把所有样式参数写给你。

所以前端看到这些代码，确实可以复制过来用，但决不可能无脑一锅端，肯定要挑拣修改的。

所以Figma开发模式

有多大用处？

像下面这种，用处确实不大：

也就能看看尺寸、间距和颜色的参数——直接把Figma链接发过去，前端直接看设计稿也差不多。

这些都太基础了，前端写代码时最烦心的样式，其实是布局——然而这一块几乎没有提供啥。

如果看到这里，你觉得Figma的开发模式果然太鸡肋，那就大错特错了。

其实下图，才是Figma开发模式的正确打开方式：

这个方案，表面和之前那个差不多，但开发模式的内容却丰富多了？我们从三大模块来看看，后面的开发模式究竟多了哪些东西。

原本只显示是：这个叫“步骤”，是一个Frame，对前端几乎没有任何帮助。

后面这个显示的是：这个叫“步骤”，是一个组件，还展示了组件快照，并显示该组件处于“选中”状态。

这样就可以提醒前端别从零开始写，去翻翻之前的代码，看看有没有现成的组件。

那个 Open in playground 的按钮点击后，会出现这么个弹窗：

是不是把这个组件的不同状态展示得很清晰？

再往下面看，布局代码原本只有宽度和高度，根本没多大作用：

后面显示了好几条布局代码，而且懂前端的小伙伴可以试试，都是有效的自适应布局。

这样就可以确保，前端做出的自适应效果，和设计师构想的一致。不需要前端自由发挥，费脑筋从零开始想。

再看颜色，原本只是简单地列出16进制编码，这个开发自己用吸色器都能搞到。

后面这个，不但显示了颜色编码，还显示了颜色的名称。

这样的好处是，方便前端管理颜色，知道当前用的颜色是不是常用色里已经用了。

颜色管理对设计师来说无所谓，对前端开始却很重要。否则如果要改颜色，工作量会非常大。

为何这么大的差别？

前面那个方案没有设置组件、自动布局和样式，所以在开发模式也看不到这些信息：

而后面那个方案，虽然表面别无二致，但其实制作了组件、自动布局和样式，所以这些都能在开发模式上看得到：

可见，开发模式的作用，其实取决设计方案的完成度。

如果方案只有视觉外壳，没其他信息量的话，那么开发模式确实鸡肋。

但如果方案还包含组件、样式管理和自动布局等信息话，那么开发模式可以给开发看到这些信息。

到这里，可能有人要问了。

设计师辛辛苦苦把组件、自动布局和样式，就是为了给前端省力气？这不是费力不讨好吗？

确实，要达到第二张截图的完整度，可要多花不少时间。

但提高方案完整度的主要目的，应该不是为了前端，而是为了设计本身。

组件和样式可以提高设计效率

一个产品可能页面众多，很多组件其实是重复的。

如果做成组件，就可以方便使用，统一修改起来也更轻松。

自动布局可以提高设计品质

不管是手机还是浏览器，页面容器的尺寸根本是不确定的。

如果方案只有一个固定尺寸的图，就无法确定页面尺寸发生变化时的适配规则。

这种情况下，前端只好自由发挥，效果肯定无法保障。

总的来说，提高方案完整度的首要目的还是为了设计效率和品质，方便开发知识附带效果罢了。

看到这里，你觉得组件化、样式管理和自动布局，哪种更重要呢？

可以在留言区发表你的看法～

这些设计技巧都不会怎么办？

我们的Figma设计技巧训练营马上就要开始了，每天30分钟的练习，2周后教会你包括组件化、样式管理和自动布局在内的各种实用技巧。

我们去年上一期获得不少好评，这一期又增加了原型交互，干货满满。

如果你有些不放心，想要了解一下Figma大概有哪些技巧，以及听我介绍一下课程，可以预约下周一的这个直播：