结构

Figma 的字都会有一个 wrapper 控制 width. 虽然它是看不见的. 但是你要知道它有那个概念存在.

按 T 键, 然后鼠标点击或拉就可以做出一个 text 了.

基本配置

我顺着 Z 字形往下列出来

Roboto 是选字体 (它会链接电脑任何有安装的字, 如果是 web 版本的话要安装插件, 后面会讲到)

Regular 是选 weight, 比如 Light, Medium, Bold

100 = Thin 　　

200 = Extra Light

300 = Light

400 = Regular

500 = Medium

600 = SemiBold

700 = Bold

800 = ExtraBold

900 = Black

16 是 font size

是 line-height

是 letter spacing

是 paragraph spacing (我不知道啥时候会用这个)

 分别是 auto width, auto height, fixed-width 这个就是字外部的框, 利用这个就可以实现 word-break 效果

text-align 左中右, 上中下, 右边的 ... 是打开更多配置

更多配置

它有很多, 我比较有用到的是

 下划线, 删除线,

 表示 list item 的时候, 点或者号码

case style

安装字体

Figma 会直接链接电脑上的字体, 所以并不需要特意安装给 Figma

Windows 10 的安装字体方法如下:

1. 到 https://freefontsfamily.com 搜索字体 (到哪里搜索下载都可以)

Windows 10 的要求是 .otf 或 .ttf 的 file

2. 双击 .ttf 然后安装,

如果要删除的话 start -> Font settings -> search -> click into -> uninstall

Web Figma 使用电脑字体

参考: Access local fonts on your computer

到这里下载安装

Copy-paste 字体

copy paste 字体默认都会携带它的 style 如果我们不希望这样那么在 paste 的时候就得 Ctrl + Shift + V

用字体做 Icon

除了可以用 Plugin 来做 material icon, Figma 还可以用字体来做 icon.

去 fontawesome.com select 想要的 icon, 然后 copy

paste 到 figma 里, 然后选择 icon 的字体

 

这样就可以了

Figma 学习笔记 – Text的更多相关文章

  1. 【转】Pro Android学习笔记（十四）：用户界面和控制（2）：Text类控制

    目录(?)[-] TextView 例子1在XML中设置autoLink属性 例子2在代码中设置autoLink属性 EditText AutoCompleteTextView MultiAutoCo ...

  2. $\text {FWT}$学习笔记

    \(\text {FWT}\) 学习笔记 正常项的\(\text {FWT}\) 在\(\text {OI}\)中,我们经常会碰到这种问题: 给出一个长度为\(n\)的序列\(a_{1,2,...,n ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  6. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  7. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  8. 【原】Learning Spark (Python版) 学习笔记(三)----工作原理、调优与Spark SQL

    周末的任务是更新Learning Spark系列第三篇,以为自己写不完了,但为了改正拖延症,还是得完成给自己定的任务啊 = =.这三章主要讲Spark的运行过程(本地+集群),性能调优以及Spark ...

  9. WeX5学习笔记

    目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计 ...

  10. JSP学习笔记

    JSP学习笔记 Jsp网页主要分为Elements与Template Data两部分. Template Data:JSP Container不处理的部分,例如HTML内容 Elements:必须经由 ...

随机推荐

  1. 关于c++出现的易错问题

    比如我一个对象,经常操作用的指针ptr,原生指针比如ClassA* ca =; 但是我要保存ca,在另一个地方操作,比如: cb =ca; 这样子是不行的,因为我要操作的是ca,而不是ca的值,为什么 ...

  2. jwt redis，微信登陆知识复习 uniapp 请求封装，统一异常处理 相关， HutoolDemo工具介绍）

    第三节   后台布局搭建,代码可以人工智能来写,但是环境初步搭建需要我们先建起来,所以以下记录快带搭建的过程, 思路: 后台首页的搭建 第一   用到了element--UI 自带的页面布局组件,它就 ...

  3. FFmpeg开发笔记（四十一）结合OBS与MediaMTX实现SRT直播推流

    ​<FFmpeg开发实战:从零基础到短视频上线>一书的"10.2  FFmpeg推流和拉流"提到直播行业存在RTSP和RTMP两种常见的流媒体协议.除此以外,还有于20 ...

  4. java中的Context

    在java编程中,上下文(Context)是指程序运行时的环境和状态的集合.包括了类对象变量方法等运行时的相关数据 在类中,我们可以通过this获取当前类的变量.方法的上下文, 例如getset方法: ...

  5. 记一次seata启动错误日志ErrMsg:failed to req API:/nacos/v1/ns/instance after all servers....

    错误日志如下: java.lang.RuntimeException: ErrCode:500, ErrMsg:failed to req API:/nacos/v1/ns/instance afte ...

  6. Kotlin 字符串教程：深入理解与使用技巧

    Kotlin 字符串 字符串用于存储文本. 字符串包含由双引号包围的字符集合: 示例 var greeting = "Hello" 与 Java 不同,您不必指定变量是字符串.Ko ...

  7. 【POI】Excel数据导入

    Postman请求方式: Controller接口代码: /** * /partImport/part/importUpload * @param importFile * @return */ @P ...

  8. 【Mybatis + Spring】 Mybatis - Spring 结合

    环境搭建 EvBuild 软件环境准备 - MySQL 5.0 + - IDEA 2018 + - JDK1.8 + 依赖包相关 - Junit单元测试 - JDBC驱动 - Mybatis 组件 - ...

  9. 【ECharts】04 数据交互

    ECharts 异步加载数据 ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项 ...

  10. 【Mybatis-Plus】06 代码生成器 CodeGenerator

    导入生成器需要的依赖坐标: <dependency> <groupId>com.baomidou</groupId> <artifactId>mybat ...