logo

FigmaCode 专栏

像写代码一样做设计

购买阅读全部

前言

用户界面(UI)设计工具变化飞快,从 Photoshop 到 Sketch,再从 Sketch 到 Figma,工具的变化体现的是设计师需求的变化。以前我们需要 Photoshop 是因为它方便做拟物化的设计,而 Sketch 取而代之的原因是扁平化的崛起,那么,现在 Figma 逐渐取代 Sketch 的原因又是什么呢?

我认为是因为 Figma 缩短了创意设计和开发实现之间的距离。 设计师的世界充满自由而创意的探索,而工程师的世界却必须包含清晰而严谨的逻辑。看起来截然相反的两种角色,却要一起协作,把想法变为现实。

Figma 一直试图缩小这两者之间的距离,帮助设计师和工程师更好地协作。Figma 的很多功能,比如组件和自动布局,都借鉴于开发实现的原理或习惯,同时也保持了对设计师的友好。如果我们能充分利用这些功能特性,做出的设计会更加接近开发实现,也就会在最终落地时更接近最初的设计。也就是说,设计和开发之间存在的差异越小,最终开发还原的效果就越好。

正如下图,重叠的部分是我们和工程师共有的部分,当我们共有的信息越多,我们之间信息传达的损耗就越少,最终的还原也就越接近设计。而 Figma 可以很好地帮我们拉近两个圆的距离,让我们拥有更多共同话语。

来自 Figma Schema

具体来说,就是 Figma 对于代码实现的模拟,比如 Frame、自动布局、组件等,让你更高效快捷地做出动态的、响应式、系统化的设计。但是通过观察,我发现很少有设计师在设计时充分利用了 Figma 这些特性,这样也就不能发挥出它的威力。所以,我想在这个专栏里通过一个实际的项目案例(一个播客项目 Bodcasts),来讲述 Figma 这些功能特点背后的理念,以及如何更好地利用它们,做出更加易于交付和还原的设计,同时也帮你习得工程化的思考方式

阅读之前

本专栏对阅读对象有一定的要求,内容上也有一定的偏向性,在阅读之前需要知悉。

  • 读者需要具备一定的基础知识,最好已经熟悉 Figma 的基本功能(如果你还不熟悉或第一次使用,推荐观看我在少数派上的专栏 Let's Figma 和 B 站上的基础视频教程 Figma 系列教程);

  • 专栏的内容不会涉及过多的视觉技巧,更偏向于讲解如何「系统化地设计」。

一些约定

为了方便阅读,我们做一些基本的约定:

  • 文中会提到很多快捷键,为了行文方便后面只会写 MacOS 下的快捷键,Windows 用户可以自行将 Cmd ⌘ 换为 Ctrl,将 Option ⌥ 换成 Alt 键,如果有不能直接替换的我会特别说明(你也可以在这里查询所有快捷键)。

  • 一些章节末尾会附上设计稿当前的版本,你可以点击顶部下拉菜单中的复制到你的草稿(Duplicate to your drafts)菜单复制一个出去研究。

下一节开始,就让我们一起步入 Figma 的神奇世界吧。