返回

2026Figma学习笔记

#软件学习知识
52%
进度
0/0
知识点
0
笔记
概览
Figma的基本认识
Figma的基本认识
Figma的注册和安装
Figma的会员说明
Figma的软件界面认识
Figma的基本操作
Figma 的工具栏
Figma的图层与编组认识
Figma的属性设置
Figma中的字体设置详解
Figma中的图片设置
Figma中的蒙版设置
Figma官方资源社区
使用Figma设计界面
figma周练
第一周周练
第二周周练
第三周周练
第四周周练

Figma中的字体设置详解

酸梅干超人 编辑于 2026-01-0615人正在学
00

Figma 的字体模块是属性面板内设置属性最多的一个模块,而它的设置和传统的办公软件 Word、WPS 等有很大的不同。

UI 设计软件为了确保设计稿能落地,会等同前端编程中的字体设置属性来创建对应的设置。所以了解这些设置,就需要理解字体的相关知识点,可以查看我们分享的UI 字体认识:

uxbaike字体认识

我们从上到下简单介绍字体模块内的属性:

  • 字体:用于选择本地或 Figma 提供的字体
  • 字重:选择字体包含的不同字重,调节笔画粗细
  • 字号:控制字体图形的大小
  • 行高:单行文本的占用高度
  • 字间距:字符左右的间距设置
  • 水平方式:在文本区域内水平方向的左、中、右对齐
  • 垂直对齐:在文本区域内垂直方向的左、中、右对齐

在这些基础属性设置中,字体选择面板里包含了一个复杂的下拉筛选项:

其中最特殊的就是变量字体 Variable Fonts,因为传统字体每个字重是一个独立的字体文件,安装安装后才能选择,不同字体安装的字重数量不同,就会导致可选字重数不同。

字重选项除了选择字体字重外,斜体、圆体等拓展样式也是用相同的方式安装后在这里进行选择。

Variable Fonts 的逻辑则和前面完全不同,这类字体不用再安装多个字体文件,可以只安装一个字体通过数值来调节它的样式属性。包括字重 Weight、倾斜 Slant、字宽 width、圆角 Round 等。

Variable Fonts 需要安装的字体本身支持,在它的字重设置下除了内置的字重选项外,还会多出个 Variable font axes… 选项,点击就可以进入对应设置面板。

除此之外,文字是置入文本框显示的,而文本框的设置被调整到布局模块内,里面包含的三个选项:

  • 自动宽度:默认模式,文字无限向右延伸扩大文本区域
  • 自动高度:设置一个文本固定宽度,文本自动换行扩大文本区域
  • 固定尺寸:固定文本的长宽,文本会自动换行,超出高度的部分依然会显示,但不包含在文本框的范围内

在文本模块最右下角包含更多选项按钮,点开后的面板包含基础 Basics、细节 Details、变量 Variable(即上面的 Variable font axes…)三个子选项。

在面板中上方的矩形是示例区域,将鼠标悬浮到对应功能上就可以看到相应的效果示例,所以用鼠标轮流悬浮一遍就能大致理解面里面包含的选项有什么作用。

多数设置是英文字体的排版选项,对中文不生效。其中最值得注意的一点,就是 Vertical Trim 用于裁切文本区域最上和最下方的留白,主要也适用于英文字体的特定排版环境(如全屏时钟的数字),不要把它作为移除中文文本区域留白的选项来使用。

点赞
收藏
学会
4480015
下一篇: Figma中的图片设置
在UI设计中,会应用大量图片,包括头像、商品图、摄影图、广告图等等,它们都是位图。而Figma作为一个矢量工具并不擅长制作位图,它只是位图的搬运工。 图片的置入 位图引入是一个高频操作,在图层列表中也有一个独立的图标示意。但Figma对图片的引入逻辑和其它软件并不相同,它的位图应用本质上是: &#8...
笔记 (1)
只看自己
logo
垂髫喆 记录于 1天前
所有自己安装在电脑上的字体,都显示为英文的字体名称嘛?
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞