写给前端的 Figma 教程

前言

哈喽,大家好,我是海怪。最近一周,我都在学习 Figma。

起因是看到一些好看的网页,总想自己实现一遍。但是,为了实现这个网页,又要搞脚手架、又要搜集图片素材、又要调样式,最终出来的效果其实只是个无后端的前端项目。

那这和设计稿有什么区别?然后就想,不如我就学一学 Figma 吧。学会了还能和公司设计师多个话题,何乐而不为呢。

然而,当我真的使用 Figma 后,发现这个软件并不是很符合前端的习惯。但在 Figma 里,需要另一套方法来达到对应的效果,有时还需要用到一些 Hacky 手法。

不开玩笑,Figma 也有体操哦:www.figma.com/community/f…

为了能让大部分前端上手 Figma,这篇文章就抛砖引玉一下。

工具进化史

Figma 作为 2023 年最流行的前端设计软件,我们先来讲讲设计工具的发展史(这是我从公司的设计师里听来的)。

在 jQuery 时代,大家还在用 Adobe 的 PhotoShop 和 Illustrator 来画图。前端每次都要在 PSD 上切图,特别麻烦,或许这就是“前端切图仔”的由来吧。

到了 Vue 和 React 初生的时代,苹果的 Sketch 通过它的轻量化和美观抢占了市场,顺便把设计师和前端开发的电脑都统一成了 Mac。
随着项目团队不断发展,大家意识到协同合作的必要性,最终转向使用了协同效率更高的 Figma。


Figma 支持网页端和桌面端,各端使用体验都非常流畅。我猜大部分前端接触的还是网页端,你也可以通过 这个链接 尝试一下 Figma 的桌面端

写给前端的 Figma 教程

界面初探

写给前端的 Figma 教程

工作区如上图所示,你可以大致把它理解为 Chrome 的元素审查器。

写给前端的 Figma 教程

基础元素

和我们前端开发一样,开发页面需要通过排列布局多个基础组件 / 元素来完成,下面就简单讲讲这些基础元素用法。

Frame

第一个最最最常用的就是 Frame 了,你可以理解为这是前端的 <div> 或小程序/Android/iOS/RN 里的 <view>,一切的 Container, Wrapper, Body, Header 都可以用 Frame一把梭实现。

写给前端的 Figma 教程

点击这个#号的时候,右侧会有一些预览的 Size 供你选择:

写给前端的 Figma 教程

这些 Size 不仅可以帮助你直接创建一个同 Size 的 Frame,同时也可以给以后修改 Frame 的宽度和高度时,作一个参考。

Text

第二重要的就是 Text,名字即定义。可以理解为前端的文本或小程序/Android/iOS/RN 里的 <text>,一切文本都由它来实现。

写给前端的 Figma 教程

写给前端的 Figma 教程

Circle

第三常用的是画圆,主要使用场景是绘制头像。

写给前端的 Figma 教程

写给前端的 Figma 教程

其它

剩下的这些图形等你需要用到自然就会用了。比如你要画一个下拉框,那就是 Retangle + Polygon组合,要画评分组件,那么就用 Star,要画箭头就用 Arrow。

写给前端的 Figma 教程

写给前端的 Figma 教程

看到这,有同学会问:网站组件部分就这么简单?没错,就这么简单!我们平常接触的网页基本上就是由这些几何图形构成的。

布局

布局我们只需要了解 Constraints 布局和 Auto Layout 布局就可以了。

Constraints 布局

这个布局可以理解为 不会导致父元素高度坍塌的绝对定位。

随便创建一父一子两个 Frame(div),会看到右侧会有 Constraints布局:

写给前端的 Figma 教程

上面的 CSS 伪代码为:

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

往往我们对绝对定位的印象是:子元素会浮动,如果父元素没有内容,会导致父元素高度坍塌,类似这样(父元素的高度为文本高度):

写给前端的 Figma 教程

但是!要记住我们是在做设计,不是在写前端。所以在 Figma 的世界里,没有高度坍塌的说法,也不会有 BFC(干,我都快忘了 BFC 是啥了,反正就是你们想的那个 BFC)。

所以,对于一般的场景,Constraints 布局都能满足。诶,那满足不了呢?看下面的 Auto Layout。

Auto Layout 布局

这个其实就是我们前端天天用的 Flex 布局了!flex-direction, align-items, justify-conten等应有尽有!

写给前端的 Figma 教程

创建一个父 Frame,在里面随便加一些元素,在右侧找到 Auto Layout添加一下,会发现所有子元素都会被合理地安放,并会带有对应的上下左右的 Padding 和元素之间的间隔。

如果 Auto Layout 内嵌 Auto Layout,那么就触发了前端最熟悉的 flex嵌flex布局,在宽度/高度这里会有三个选项,分别为:

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

写给前端的 Figma 教程

在 Auto Layout 里的设置里,还有 space-between的配置。没错,就是 flex布局里的space-between

写给前端的 Figma 教程

其它属性

右侧还会有一些属性,分别都有对应的 CSS 属性,比较直观,不再赘述:

写给前端的 Figma 教程

技巧

使用 Figma 一些小技巧能大大提高画页面效率,下面简单分享一些。

快捷键

实际上这些快捷键适用于整个 Mac 系统,比如你在 PhotoShop,日常截图都可以用到。

aspect-ratio: 1

如果你想能画 1 : 1 的正圆和正方形,可以按住 Shift 键 + 拖拽画圆 实现:

写给前端的 Figma 教程

按住 Shift 的意思是:等比例缩放,而默认拉出来的图形是 1 : 1,所以按住 Shift可以 1 : 1 缩放。

transform-origin: center center

普通拖拽画图形默认中心点是: transform-origin: top left,如果需要居中画图形,需要按住 Cmd + 拖拽画圆实现:

写给前端的 Figma 教程

此时可以实现 transform-origin: center center的效果。

选中内部元素

默认只能选中最外层的元素,按住 Cmd键即可选中内部元素。可以理解为默认选中会有 e.stopPropagation效果,而按住 Cmd则会有穿透点击的效果,不会出现 e.stopPropagation

写给前端的 Figma 教程

不过有的时候,我们没有另一个元素 Hover,这时可以 Shift + R打开参考线,然后拖一条参考线下来,再用上面的方法查看距离:

写给前端的 Figma 教程

布局

Width: X% | Height: Y%

Figma 世界中无法实现 width: X%!如果实现类似的效果,需要计算子 Frame 和父 Frame 的比例,然后设置 Constraints 为 topleft and right

写给前端的 Figma 教程

比如上面的红色 Frame 的宽度为白色 Frame 宽度的 50%,且由于有了 Left and right 的制约,无论父 Frame 怎么左右滑动,子 Frame 还是会保持 width: 50%,因此实现 width: 50%效果。

Margin

Figma 没有地方可以设置 Marign。但实际上,你可以理解为两个元素摆放的位置间距即是 Margin-X,通过方向键的 上下左右 来调整,可以最终找到正确的 marign

写给前端的 Figma 教程

Padding

因为我们是在做设计,所以 Marign 和 Padding 呈现的效果是一致的,不用太纠结,先看看是否能用上面的设置的 Marign 取代。

如果强迫症非要用 Padding,那么可以给 Frame 加一个 Auto Layout,使用它的 Padding 来实现:

写给前端的 Figma 教程

Absolute Position

如果你已经在用 Auto Layout,那么所有元素都是 Flex 布局的 Item,要实现浮动效果,可以用右上角的 Absolute Position

写给前端的 Figma 教程

既然要设定绝对定位,那么要记得 Constratins 也要设置好对应的 top 和 right

写给前端的 Figma 教程

这样才会有:

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

Overflow: visible

默认情况下,Frame 都为 overflow: hidden,把 Clip content去掉即可实现 overflow: visible

写给前端的 Figma 教程

颜色变量

一般来说,一个页面中不会有非常多种颜色,大部分的颜色都是可以复用的:

写给前端的 Figma 教程

找到 FillStroke,在右边【四个点】的地方点加号,可以把当前颜色添加为一个 CSS 颜色常量:

写给前端的 Figma 教程

后续复用这个颜色即可。

组件

和我们写前端代码一样,Figma 同样有“组件”的概念,可以参考一下 [Ant Design 组件库的 Figma](www.figma.com/file/treUws…

要实现组件,选中希望创建组件的 Frame,点最上面的 Create Component

写给前端的 Figma 教程

那么这个 Frame 就变成了组件了,会发现左侧的图标也变成了4 个菱形的 Icon,而不是 # 号:

写给前端的 Figma 教程

**Figma 的“组件”和“组件实例(空心菱形)”可以理解为 Java 里的 Class 和 Instance 的关系,“组件”里的属性为类属性(静态属性),修改后所有实例同时生效;“组件实例”里的属性则为实例属性,修改它们只会影响当前实例。
**

写给前端的 Figma 教程

Figma 的组件也有 Props 概念,在 Properties 一栏你可以添加这个组件的 Props

写给前端的 Figma 教程

而且 Figma 会自动识别 Props类型,当使用实例时,可以在右侧更改对应的属性来展现不同组件:

写给前端的 Figma 教程

资源

当然,并不是所有设计内容都要我们手动实现,我们可以站在巨人肩膀上做设计。这里列举一些比较好用的资源位:

  • 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 站的收银台:

写给前端的 Figma 教程

然后参考下 我做的 Figma 设计稿

最后,无论你是想和设计师多一个聊天话题,还是想自己设计网页,又或者想进入设计这个新世界,Figma 是很值得大家学习的。那这期就先到这里吧,我们下期再见!

Happy Design :)

原文链接:https://juejin.cn/post/7218157956335632445 作者:写代码的海怪

(0)
上一篇 2023年4月5日 上午11:07
下一篇 2023年4月5日 下午4:00

相关推荐

发表评论

登录后才能评论