前端说Figma开发模式很鸡肋，是真的吗？
2021-07-08 12:13:43
Figma开发模式是否鸡肋不能一概而论，其作用取决于设计方案的完成度，若方案完整度高则开发模式很有用，若方案只有视觉外壳则开发模式较鸡肋。 具体如下：
- 方案只有视觉外壳，缺乏其他信息时，开发模式较鸡肋
只能查看基础参数：此时开发模式仅能显示尺寸、间距和颜色等基础参数，前端直接查看设计稿也能获取这些信息，用处不大。例如，在一个简单的设计方案中，开发模式可能只显示某个元素的宽度、高度和颜色代码，前端通过查看设计稿也能轻松得到这些数据。
缺乏布局信息：前端写代码时最烦心的样式是布局，但此时开发模式几乎没有提供布局相关的信息。例如，一个页面中的元素排列方式、自适应规则等，在开发模式中可能无法体现，前端需要自己思考和实现，增加了工作难度。
代码存在局限性：开发模式提供的代码可能存在字体不兼容和代码冗余等问题。例如，代码里写的字体可能在某些设备上无效，因为这些设备没有该字体；同时，为了兼容性可能需要列出多个备选字体，但如果每个文字元素都这样做，会导致代码冗长，而开发模式无法考虑这些因素，只是简单粗暴地把所有样式参数写出来。
- 方案包含组件、样式管理和自动布局等信息时，开发模式很有用
组件信息提醒：开发模式可以显示组件信息，提醒前端别从零开始写，去翻翻之前的代码，看看有没有现成的组件。例如，一个页面中的某个按钮组件，开发模式会显示该组件的快照和状态，前端可以直接使用或参考，提高开发效率。
- 提高方案完整度主要目的是为了设计本身
组件和样式提高设计效率：一个产品可能页面众多，很多组件其实是重复的。如果做成组件，就可以方便使用，统一修改起来也更轻松。例如，在一个电商网站中，商品列表页、商品详情页等页面中都有商品展示组件，通过做成组件，可以在不同页面中重复使用，并且修改时只需修改组件即可，提高了设计效率。
自动布局提高设计品质：不管是手机还是浏览器，页面容器的尺寸根本是不确定的。如果方案只有一个固定尺寸的图，就无法确定页面尺寸发生变化时的适配规则，前端只好自由发挥，效果肯定无法保障。而自动布局可以根据不同的屏幕尺寸自动调整元素的排列和大小，提高设计品质。例如，一个响应式网站在不同设备上的显示效果，通过自动布局可以实现良好的适配，保证用户体验。
热门标签
