所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

Figma常用工具快速上手(二)

在了解了 Figma 的概念和极具吸引力的优势之后,现在就让我们一起走进 Figma 吧。

 

相关文章:Figma软件介绍及基础(一)

 

1. 常用工具

熟悉 Sketch 的同学看到Figma的工具肯定会很欣慰,它们的重合度很高。

 

框架工具(Frame)

在 Figma 中一个自由调整图层的边界就称为框架(Frame),相当于Sketch中的画板。不过在Sketch中组件通常会新开一个子页来整理组件库,Figma 则大都在 Frame 里进行管理。

 

矢量图形工具 (Vector)

矢量图形是在设计进程中最常用的工具之一,在进入Figma 后,你可以在顶部工具栏找到它的身影。

图形工具中包括:矩形,线条,箭头,椭圆,多边形,星形,置入图片几类。可以发现他们的快捷键跟Sketch的也都保持一致。

创建出一个新的图形之后,可以清晰的看到这个图形上所包含的一些控制点,方便进行后续的一些操作,并且各有特色。

这里值得一提的便是椭圆,星形,箭头这几个工具。丰富的形状控制点,极大的方便了设计时的操作。

  • 椭圆

三个控制点分别对应,内圆半径,起点位置,终点位置

  • 星形

三个控制点分别对应尖角圆角,边长度,角数量

  • 箭头

Figma 的箭头工具可以设置两端箭头,并且对于添加转折点极为友好

 

文字工具 (Text)

Figma 当前对于中文字符的支持已经提升了相当大的程度了,不过还是有些不太友好的地方。如果直接在画布中进行汉字输入,大概率有一半的文字是无法正常显示的。

针对这个问题,Figma 官方给出了相应的解决办法:下载 Figma 的 Font Helper。不过讲实话,我在这么操作之后还是存在文字无法显示的问题,所以我又下载了 Better Font Picker 和 Font Expolore 这两款插件,也算是解决了这个难题。

另外,Figma 可以将 emoji 添加到文本内容当中:

 

macOS

  1. 创建一个文本对象
  2. 使用 control + command + 空格来显示表情符号选择器
  3. 输入你喜欢的表情符号的名称,或单击以选中

 

Windows

首先在任务栏中显示触摸键盘图标

  1. 创建一个文本对象
  2. 单击触摸键盘图标
  3. 选择键盘中的表情符号按钮

 

相对于对中文字符的保守,Figma 对英文字符可以说是特别的友好,Figma 支持 Google Web Fonts,并且支持使用 OpenType 功能。OpenType 是可缩放字体的跨平台格式,这样在元素中可以更加自如的控制字体的样式。

 

2. 手册与快捷键

Figma 的操作界面简洁而美观,一个又一个的图标排列的整整齐齐,功能按钮也都隐藏在这些图标之后。刚入手的同学对这样简洁的页面可能会有一些困惑,因为一些深层的操作功能确实需要仔细的探索后才能发现。

当然 Figma 官方也考虑到了这个问题,它详细丰富的官方文档可以一步步教你成为 Figma 大佬。如果不喜欢看英文文档的同学还可以看看Figma的中文网,翻译的非常专业。链接

help.figma.com/hc/en-us

figmachina.com/guide/

这里也将 Figma 的常用快捷键汇总了一下,相信你在熟悉了这些快捷键之后,再配合上 Figma 的组件化流程,设计工作会变得更加轻松~

 

本文简单梳理了一下 Figma 的工具和快捷键,这样在后面进行页面和组件化设计时,可以更清晰的对应起功能。我一直觉得快捷键的使用是一个必要的过程,这样在做复杂且庞大的项目时可以更加专注于项目本身,有助于创造力的发挥,设计本身就是一件在既定框架里进行创造的工作,这个框架的边界便在于设计师自身的积累和天赋。各位加油~

 

原文地址:UI中国

作者:爱笑的Plus

 


 

本页地址:http://www.seeui.net/29459.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 3147141550@qq.com。如果下载失败可提交工单哦。

0
分享海报

站点公告

早鸟限时特价,年会员半价,限量1000份哦

购买地址: https://www.seeui.net/vip
没有账号? 注册  忘记密码?