协同效率更高！写给前端开发人员的 Figma 教程

工具进化史

Figma 作为 2023 年最流行的前端设计软件，我们先来讲讲设计工具的发展史（这是我从公司的设计师里听来的）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

在 jQuery 时代，大家还在用 Adobe 的 PhotoShop 和 Illustrator 来画图。前端每次都要在 PSD 上切图，特别麻烦，或许这就是“前端切图仔”的由来吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

到了 Vue 和 React 初生的时代，苹果的 Sketch 通过它的轻量化和美观抢占了市场，顺便把设计师和前端开发的电脑都统一成了 Mac。 随着项目团队不断发展，大家意识到协同合作的必要性，最终转向使用了协同效率更高的 Figma。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Figma 支持网页端和桌面端，各端使用体验都非常流畅。我猜大部分前端接触的还是网页端，你也可以通过 这个链接 尝试一下 Figma 的桌面端。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

界面初探

工作区如上图所示，你可以大致把它理解为 Chrome 的元素审查器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

基础元素

和我们前端开发一样，开发页面需要通过排列布局多个基础组件 / 元素来完成，下面就简单讲讲这些基础元素用法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Frame

第一个最最最常用的就是 Frame 了，你可以理解为这是前端的 <div> 或小程序/Android/iOS/RN 里的 <view>，一切的 Container, Wrapper, Body, Header 都可以用 Frame一把梭实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

点击这个#号的时候，右侧会有一些预览的 Size 供你选择：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

这些 Size 不仅可以帮助你直接创建一个同 Size 的 Frame，同时也可以给以后修改 Frame 的宽度和高度时，作一个参考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Text

第二重要的就是 Text，名字即定义。可以理解为前端的文本或小程序/Android/iOS/RN 里的 <text>，一切文本都由它来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Circle

第三常用的是画圆，主要使用场景是绘制头像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

其它

剩下的这些图形等你需要用到自然就会用了。比如你要画一个下拉框，那就是 Retangle + Polygon组合，要画评分组件，那么就用 Star，要画箭头就用 Arrow。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

看到这，有同学会问：网站组件部分就这么简单？没错，就这么简单！我们平常接触的网页基本上就是由这些几何图形构成的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

布局

布局我们只需要了解 Constraints 布局和 Auto Layout 布局就可以了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Constraints 布局

这个布局可以理解为 不会导致父元素高度坍塌的绝对定位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

随便创建一父一子两个 Frame（div），会看到右侧会有 Constraints布局：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

上面的 CSS 伪代码为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

.parent {
  position: relative;
  .child {
    position: absolute;
    top: xxx;
    left: xxx;
  }
}

往往我们对绝对定位的印象是：子元素会浮动，如果父元素没有内容，会导致父元素高度坍塌，类似这样（父元素的高度为文本高度）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

但是！要记住我们是在做设计，不是在写前端。所以在 Figma 的世界里，没有高度坍塌的说法，也不会有 BFC（干，我都快忘了 BFC 是啥了，反正就是你们想的那个 BFC）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

所以，对于一般的场景，Constraints 布局都能满足。诶，那满足不了呢？看下面的 Auto Layout。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Auto Layout 布局

这个其实就是我们前端天天用的 Flex 布局了！flex-direction, align-items, justify-conten等应有尽有！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

创建一个父 Frame，在里面随便加一些元素，在右侧找到 Auto Layout添加一下，会发现所有子元素都会被合理地安放，并会带有对应的上下左右的 Padding 和元素之间的间隔。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

如果 Auto Layout 内嵌 Auto Layout，那么就触发了前端最熟悉的 flex嵌flex布局，在宽度/高度这里会有三个选项，分别为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

• Fixed width: 固定长度，可以理解为 width: 70px
• Hug Contents: 内容长度，可以理解为内联元素 display: inline或者 width: max-content
• Fill Container: 可以理解为 flex-grow: 1，当所有子 item 都为 fill container则为均等宽度

在 Auto Layout 里的设置里，还有 space-between的配置。没错，就是 flex布局里的space-between：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

其它属性

右侧还会有一些属性，分别都有对应的 CSS 属性，比较直观，不再赘述：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

技巧

使用 Figma 一些小技巧能大大提高画页面效率，下面简单分享一些。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

快捷键

实际上这些快捷键适用于整个 Mac 系统，比如你在 PhotoShop，日常截图都可以用到。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

aspect-ratio: 1

如果你想能画 1 : 1 的正圆和正方形，可以按住 Shift 键 + 拖拽画圆 实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

按住 Shift 的意思是：等比例缩放，而默认拉出来的图形是 1 : 1，所以按住 Shift可以 1 : 1 缩放。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

transform-origin: center center

普通拖拽画图形默认中心点是： transform-origin: top left，如果需要居中画图形，需要按住 Cmd + 拖拽画圆实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

此时可以实现 transform-origin: center center的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

选中内部元素

默认只能选中最外层的元素，按住 Cmd键即可选中内部元素。可以理解为默认选中会有 e.stopPropagation效果，而按住 Cmd则会有穿透点击的效果，不会出现 e.stopPropagation。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

不过有的时候，我们没有另一个元素 Hover，这时可以 Shift + R打开参考线，然后拖一条参考线下来，再用上面的方法查看距离：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

布局

Width: X% | Height: Y%

Figma 世界中无法实现 width: X%！如果实现类似的效果，需要计算子 Frame 和父 Frame 的比例，然后设置 Constraints 为 top 和 left and right。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

比如上面的红色 Frame 的宽度为白色 Frame 宽度的 50%，且由于有了 Left and right 的制约，无论父 Frame 怎么左右滑动，子 Frame 还是会保持 width: 50%，因此实现 width: 50%效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Margin

Figma 没有地方可以设置 Marign。但实际上，你可以理解为两个元素摆放的位置间距即是 Margin-X，通过方向键的 上下左右 来调整，可以最终找到正确的 marign：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Padding

因为我们是在做设计，所以 Marign 和 Padding 呈现的效果是一致的，不用太纠结，先看看是否能用上面的设置的 Marign 取代。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

如果强迫症非要用 Padding，那么可以给 Frame 加一个 Auto Layout，使用它的 Padding 来实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Absolute Position

如果你已经在用 Auto Layout，那么所有元素都是 Flex 布局的 Item，要实现浮动效果，可以用右上角的 Absolute Position。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

既然要设定绝对定位，那么要记得 Constratins 也要设置好对应的 top 和 right：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

这样才会有：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

.child {
  top: xxx;
  right: yyy;
}

Overflow: visible

默认情况下，Frame 都为 overflow: hidden，把 Clip content去掉即可实现 overflow: visible。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

颜色变量

一般来说，一个页面中不会有非常多种颜色，大部分的颜色都是可以复用的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

找到 Fill 或 Stroke，在右边【四个点】的地方点加号，可以把当前颜色添加为一个 CSS 颜色常量：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

后续复用这个颜色即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

组件

和我们写前端代码一样，Figma 同样有“组件”的概念，可以参考一下 [Ant Design 组件库的 Figma](https://www.figma.com/file/treUws5aNFI3WbC57ngHCJ/%5BPreview%5D-Ant-Design-System-for-Figma-5.1?t=84cgsAn2NbqPv2id-0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

要实现组件，选中希望创建组件的 Frame，点最上面的 Create Component文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

那么这个 Frame 就变成了组件了，会发现左侧的图标也变成了4 个菱形的 Icon，而不是 # 号：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

**Figma 的“组件”和“组件实例（空心菱形）”可以理解为 Java 里的 Class 和 Instance 的关系，“组件”里的属性为类属性（静态属性），修改后所有实例同时生效；“组件实例”里的属性则为实例属性，修改它们只会影响当前实例。 **文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

Figma 的组件也有 Props 概念，在 Properties 一栏你可以添加这个组件的 Props：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

而且 Figma 会自动识别 Props类型，当使用实例时，可以在右侧更改对应的属性来展现不同组件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

资源

当然，并不是所有设计内容都要我们手动实现，我们可以站在巨人肩膀上做设计。这里列举一些比较好用的资源位：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

• Unsplash Figma 插件：可以直接插入网图，不需要先把图片下载再导入
• Figma Icon 资源：Icon 资源，实际上用 Google 也能搜出很多不同 Icon 资源
• Figma 社区：可以复制现成的 Figma 设计，同时也能看下其他设计师的优秀作品
• ... 如果大家想再深入学习 Figma，推荐直接看 Figma 的 YouTube 官方频道，看下这两个系列就好了：
• New to FIGMA? Get started with "figma for beginners" tutorials
• Tutorials: Explore design features in Figma 这两个系列足以秒杀所有教程，包括这篇文章

最后

好了，你现在已经学会 Figma 的基础使用了，刚开始练手时，我推荐大家抄一两个页面来玩一下，比如我就抄了 B 站的收银台：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

然后参考下 我做的 Figma 设计稿。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html

最后，无论你是想和设计师多一个聊天话题，还是想自己设计网页，又或者想进入设计这个新世界，Figma 是很值得大家学习的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/35123.html