恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Figma 教程 | 文字工具
0.0°
2019-04-20 自译外文 教程 原作者: Figma 举报 11947 4 8 1

在这个教学视频中,我们将一起学习 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



更新:2019-04-20

收藏

4人已收藏

  • 14

    作品

  • 160

    粉丝

  • 1

    关注

  • 为了让更多人用上 Figma,我做了一个设计标注交付工具
  • 设计系统是什么?
  • Figma Handoff 设计标注插件
  • 使用 Figma 完成产品设计工作流

    猜你喜欢

      2019-04-20 自译外文 教程 原作者: Figma 举报 11947 4 8 1

      Figma 教程 | 文字工具

      0.0°

      你确定要举报Figma 教程 | 文字工具

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年04月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      4
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录