查看原文
其他

FigmaCode 专栏已上线

Hal9000 codesigner 2022-08-04

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

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

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

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

来自 Figma Schema

具体来说,就是 Figma 对于代码实现的模拟,比如 Frame、自动布局、组件等,让你更高效快捷地做出动态的、响应式、系统化的设计。但是通过观察,我发现很少有设计师在设计时充分利用了 Figma 这些特性,这样也就不能发挥出它的威力,自己的设计效率也就不能提高。

所以,作为一个具备开发和设计双重经验的跨界设计师,我写了这个专栏《FigmaCode》,想从代码的视角教你如何结构化地完成设计,如何构建设计系统。我还会结合自己过往的成功案例,教你如何使用 Figma 的 API 和插件能力来自动化一些流程,提升设计效率。

在本专栏中你可以学到:

  • 让设计过程更高效的技巧

  • 如何从零开始搭建一个组件库

  • 如何系统化地设计一个产品

  • 如何做出对开发更友好的设计

  • 如何把一部分工作自动化


购买后你将得到:

  • 随时阅读,不限时间

  • 设计稿源文件

  • 组件库源文件


需要注意的是,本专栏不是一般讲设计的专栏,它不适合:

  • 没有 Figma 使用经验的朋友(至少半年以上经验,还不熟悉请先看 https://b23.tv/adf9XOr);

  • 想要学习视觉技巧的朋友(本专栏更多地探讨如何系统化地设计,不怎么涉及视觉技巧)


目前该专栏已完成 11 篇,预计 17 篇,现已上架。专栏总价 ¥166,在前5月10日24点之前给大家 7 折优惠,也就是 ¥116.2。如有需要可以点击阅读原文购买,或者复制下面的链接去微信打开。


https://figmacode.com/


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存