相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3474人学过

UI设计之Figma系列教程

120小节已有22779人学过

Figma怎么添加字体 Figma怎么添加交互
发布时间:2025-01-15 16:35 [ 我要自学网原创 ] 发布人: 快乐小女 阅读: 4294

品牌型号:联想GeekPro 2020

系统:Windows 10 64位专业版

软件版本:Figma入门版


文字元素在UI界面设计中承担着重要的角色,通过应用不同的字体设计,可以让UI界面呈现出独特的风格。在Figma的软件操作中,可通过调整文字的字体、字号、字距、描边、填充等属性,创作出各具特色的文字效果。那么,Figma怎么添加字体?另外,Figma怎么添加交互?本文会对以上两个问题作详细讲解。


一、Figma怎么添加字体

如果要为Figma添加字体,可以先将字体安装在本地系统中,然后再通过调用本地字体库的方式,为Figma添加字体。

大家如果使用的是桌面版的Figma软件,可直接调用本地设备的字体库;如果使用的是在线版(基于浏览器的)的Figma应用,需要先前往Figma官网下载并安装字体安装器,才可以调用本地设备字体库。

如图1所示,打开Figma官网的下载页面(https://www.figma.com/downloads/)后,点击所需系统的字体安装器下载链接,即可开始下载相关插件。

1:字体安装器


完成字体安装器的下载后,双击安装包,如图2所示,即可按照其向导指示开始安装插件。


2:安装插件


完成字体安装器的安装后,如图3所示,点击主页用户名右侧的下拉菜单,在弹出的功能界面中点击“设置”功能。


3:主页设置功能


Figma的设置功能中,如图4所示,字体选项显示“本地字体可用”的字样,即说明字体安装器已经安装成功,可自由使用本地设备的字体库。


4:允许本地字体


确认Figma可调用本地设备的字体库后,可以开始将字体安装到本地字体库中。如图5所示,依次打开系统的控制面板-字体文件夹。


5:系统字体文件夹


在系统的字体文件夹中,如图6所示,将下载好的字体粘贴到文件夹中,即可完成字体的安装。


6:安装字体


将字体安装到本地设备的字体库后,如图7所示,打开Figma的文字设计功能,在其字体排印功能中,可展开字体选项并使用新添加到系统的字体。

7:字体选项


二、Figma怎么添加交互


交互指的是UI界面中的人机交互功能,用户通过鼠标、指头等操作可触发相应的动作事件,以使用网站、软件、应用等功能。接下来,我们一起来看看Figma怎么添加交互。


Figma的交互设计需要通过画框进行,如图8所示,先准备两个素材,分别是包含文字的画框1,以及包含渐变圆形的画框2。在绘制相关素材时,可以先将图形设计好,再添加画框。

8:绘制画框


完成画框的绘制后,如图9所示,将右侧面板切换到“原型”功能,即用于添加交互的功能。大家如果不清楚怎么添加交互,可参考下方的操作提示,其中包括“创建新的连接”以及“启动原型”的操作方法。


9:原型面板


Figma的交互是通过连接两个画框建立的。如动图10所示,选中画框1后,其画框上会出现一个带加号的圆圈,点击该圆圈并将其拖动到画框2上,Figma的交互设置面板会自动弹出,根据所需的交互操作设置相关属性即可。


10:创建连接


比如,如果要创建一个单击画框1后,跳转到画框2的交互,可以按照图11所示进行相关设置。其中触发设置为“单击”,动作设置为“导航至”,目标设置为“画框2”,动画选择“即时”。

11:交互设计


三、小结

以上就是关于Figma怎么添加字体,Figma怎么添加交互的相关内容。通过安装Figma的字体安装器,可以直接调用本地设备的字体库。因此,如需为Figma添加新字体,只要将字体安装到系统即可。Figma的交互设计可通过画框的连接轻松创建,另外,Figma也提供了丰富的交互触发、动作等功能,可供自由创作。

Figma之UIUX项目交互教程
我要自学网商城 ¥40 元
进入购买
文章评论
0 条评论 按热度排序 按时间排序 /350
遵守中华人民共和国的各项道德法规,
承担因您的行为而导致的法律责任,
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。
V
特惠充值
联系客服
APP下载
官方微信
返回顶部
相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3474人学过

UI设计之Figma系列教程

120小节已有22779人学过

分类选择:
电脑办公 平面设计 室内设计 室外设计 机械设计 工业自动化 影视动画 程序开发 网页设计 会计课程 兴趣成长 AIGC