logo

_

像写代码一样做设计

像写代码一样使用 Figma,设计效率更高,交付更容易。

立即购买阅读
最近更新:《第二个 Figma 插件》

为什么写这个专栏?

作为一名会写代码的设计师,我很喜欢 Figma,因为它的很多功能借鉴于软件开发,比如组件、变体、自动布局等,目的是为了减小设计和开发之间的距离。但我观察到很多设计师并没有充分利用这些特性,所以想从一种混合了设计与开发的视角出发,写一个专栏来帮助大家充分发挥出 Figma 的威力,提高设计效率,让交付更容易。


* 阅读本专栏需要一定的 Figma 使用基础(半年以上使用经验),如果你对 Figma 还不熟悉,可以先观看我在 B 站的系列教程

内容目录

(实际内容可能会有调整)

Build your foundation

  1. 前言

    免费试读

    前言就是前言。

  2. 准备工作

    免费试读

    磨刀不误砍柴工,先准备准备。

  3. Figma 的基本理念

    Figma=自由式设计+结构化设计。

  4. 万物皆 Frame

    Frame 是 Fimga 的精髓。

  5. 搭建基础样式库

    先为项目确立好基础样式。

Design by code(写作中)

  1. 用代码做设计

    代码也是一支画笔。

  2. 继续用代码做设计

    来点复杂的。

  3. 第一个 Figma 插件

    写一个 Figma 插件。

  4. 第二个 Figma 插件

    使用现代化前端框架再写一个插件。

  5. 样式的自动交付——Design tokens

    和开发保持一致的样式。

  6. 图标的自动化交付

    一步到位地交付图标。

价格

¥166

  • 全部文字教程内容
  • 视频讲解
  • 示例项目设计稿
  • 示例项目组件库
立即购买阅读

关于作者

我叫 Hal,我是一名爱写代码的设计师,很早就接触并使用 Figma 了,在 Figma 的使用和自动化交付方面有很深的研究。

你可以在这里找到我

小伙伴们

Figmacn.com heron.design

Made by Hal with Figma & VSCode | Copyright © 2023 Figmacode.com