Figma 教程 | 文字工具

  • 经验类型教程原作者:Figma

  • 经验属性自译外文
  • 经验版权署名-非商业性使用-禁止演绎
12053 1 8 2019-04-20

在这个教学视频中,我们将一起学习 Figma 文字工具和字体的基本使用。

想看更多 Figma 教程、资源请访问 Figma 中文网:https://figmacn.com

视频请直接看这里:https://www.bilibili.com/video/av49879755


欢迎来到 Figma 教程。在这个教学视频中,我们将一起学习文字工具和字体的基本使用。


在设计中文字样式是十分重要的,你选择的字体字号决定了你的设计的可读性和独特吸引力。你所设置的文字颜色、尺寸、间隔、宽度,都会向你的用户传达一些产品信息。


Image title


Figma 预先加载了很多谷歌字体,因此你可以直接快速开始设计。你可以前往 font.google.com 去预览你喜欢的字体效果和样式,或者通过筛选去发现一些新字体。


当然,你也可以使用本地字体进行设计。不过如果你是用在线版的,则需要先下载并安装 Figma 字体安装器。你可以在个人设置页面找到下载链接,这样 Figma 就能识别到你本地所有字体了。


如果你用的是本地客户端,就不需要下载字体安装器了,可以直接使用本地字体。如果你在和别人一起协作时使用了本地字体,那么其他人也需要在本地安装了这些字体,这样才能使用那些字体。


Image title


还好有谷歌字体,那让我们直接开始吧。我们可以在顶部的工具栏点击文字工具,或者按下 T 来进入文字输入模式。当你处于文字输入模式时,有两种方式来创建文字图层。


Image title


你可以在画布中点击并直接输入,这样就创建了一个宽度自适应的文字图层,你的文字图层宽度会随着文字内容而变化。


Image title


第二种方式是点击后拖动,这样可以创建一个固定尺寸的文字图层。由于我们指定了尺寸,所以这种方式创建的文字图层是固定大小的。当你输入的文字过长时,它会在到达边界时自动换行。如果文字向下超出了区域,它也不会自动扩大尺寸。


Image title


想要编辑已创建的文字图层,双击它就可以了。你可以改变它的自适应行为,比如设置为高度自动,这样再增加文字时它的高度会自动增长,这些操作都可以在文字面板的高级菜单中找到。


Image title


我们还可以在文字面板对文字进行其它的一些属性控制。首先我们可以点击这个下拉菜单来切换字体,我们还可以点击这块区域直接输入字体名称。让我们选择 sans 字体,在下边还有两个选项:选择文字字号或者设置文字加粗或斜体样式。


Tips:如果输入的是中文,字体一定要选中文字体才会显示


Image title


让我们把字号从 10 改为 8,选中字体框并按两次向下键 ↓,或者按住 Alt 并在字号上拖动鼠标。你还可以使用快捷键来更改文字样式,按下 command+B 可以给文字加粗,按下 command+I 可以让文字变斜体,按下 command+U 可以给文字加下划线。


Image title


接下来我们设置行高,来调节每行文字之间的距离。它的默认值是 100%,等于当前字体的默认行高,按住 Shift 同时按方向下(或上)键,我们可以以 10 为基本单位改变行高。


Image title


在行高右边是字体间距设置,它改变的是文字之间的空间大小。如果我们要调整某几个字符间距,可以选中它们进行调整。字间距的单位默认是 0%,但我们可以在里面输入 px(像素),让我们把它改为 2 px。


Image title


现在我们来看看段落间距和段落缩进。段落间距改变的是段落之间的距离,也就是文字图层中由回车分隔的段落间距,让我们把它设置为 10px。段落缩进是指每段首字母往后缩进,让我们把它改为 5px。


Image title


我们还可以调整文字的水平和垂直对齐,来决定文字该如何排列。我们的水平对齐选项包括居右、居中、居左和两边对齐,垂直对齐选项有靠上、居中和靠下对齐。


Image title


你还可以使用文字面板以外的属性来调节文字。如果你想调节文字的颜色、描边和效果,可以直接点击右边的填充、描边和效果属性。让我们把这个文字改为红色,并且给它添加一像素的黑色描边。最后,我们点击效果给文字添加阴影。


Image title


最最后,让我们再回顾一下:

  • 前往 font.google.com 去查找或发现字体
  • 如果你使用在线版本请先下载字体安装器来使用本地字体
  • 文字自适应有三个选项:宽度、高度和固定大小
  • 输入数字加 px 来更改行高和字符间距
  • 调整文字的水平或垂直对齐方式

想看更多 Figma 教程、资源请访问 Figma 中文网:https://figmacn.com


Image title



全部评论:1

  • 阿里o

    2020-06-08 16:48

    为啥没有字体下载的连接呢,也就是这篇文章的第二张图的红框

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票