在前一篇中我们提到,Figma 能够脱颖而出的原因,在于它的很多功能都借鉴于开发实现的原理或习惯,拉近了设计和开发之间的距离。

因此在本章中,我们将讨论 Figma 的基本理念,让你对 Figma 本身有更深入的了解。

结构化设计

Figma Schema 大会中,其产品负责人 Sho Kuwamoto 曾说过:界面设计工作包含两部分——自由式设计和结构化设计(Freeform Design and Structured Design),自由式设计指的是设计过程中创意探索的部分,而结构化设计指的就是我们把一些开发的理念运用在设计中,做出结构清晰、易于交付的设计。

来自 Figma Schema 上 Sho Kuwamoto 的演说

这也是 Figma 的基本理念之一——自由式设计和结构化设计同样重要。Figma 既要要帮助设计师在这两种设计模式中取得平衡,让设计师在一个项目的前期能够自由探索创意、不受拘束;也要在项目后期则能够做出逻辑结构清晰、易于扩展和交付的设计。由于职业和性格使然,我相信大部分普通人或设计师都偏重于感性且浪漫的前者「自由式设计」,而不擅长结构化设计。

那么,在这一节就请跟着我顺着这个理念深挖下去,看看 Figma 是如何实践结构化设计模式的。

Frame,是 Figma 中一个不同于 Sketch 和 Photoshop 的概念,也是一个容易被忽视的概念。Frame 类似于 Sketch 和 Photoshop 中的编组(Group),但又远远比它强大。我觉得对 Frame 最好的翻译应该是「容器」,它有点像是开发概念中的容器元素,尺寸由自己本身所决定、也能拥有自己的属性,而不只是一个简单的编组。