零基础 UI 入门指南（三）：UI 设计软件入门

咱们打算敞开一个新的系列，输出一部完好的 UI 零根底学习攻略。依据 UI 新手体系学习 UI 规划的顺序，连续会输出 12-15 篇不同模块的系列性文章。

往期回顾：

UI规划软件认识

1. 为什么不选 PS 和 AI

在今日，UI 界面规划的主力东西是 Figma、Sketch 或 XD，而不是老牌规划东西 Adobe Photoshop 和 Illustrator。

具有三十几年历史的 PS、AI，不只包括海量的用户根底，也拥有深不见底的功用性。咱们今日规划的扁平化界面，运用 PS、AI 也全都能完结得出来。

可是，为什么这两个巨头在 UI 范畴没有成为咱们的首要挑选？

由于 PS 和 AI 实在太杂乱了……

杂乱不完全是贬义词，是这两个软件功用强大的侧面证明。但相对而言，UI 界面又太简略了……干流的扁平界面在页面完结上没有难度可言。

更详尽点阐明，PS 是一款针对照片调理（修图）、组成、排版的 “位图” 东西，它能够用来完结各种杂乱的平面视觉作用，只有你想不到的，没有它做不到的。

而 AI 和 PS 不同的是，它是一个 “矢量绘图“ 东西。它的首要方针，是用矢量东西来完结杂乱的矢量图形输出，包括插画、字体、纹路图画等。

它们想要做界面相同能够，但关于简略 UI 界面来说，功用就太臃肿了。骑自行车能够代步去家邻近的超市，但明显咱们没必要为此开一辆欧洲重卡……

Figma 等东西的方针，便是专心 UI 界面，供给最最高效、最便捷的功用。它们不只软件装置体积是 PS 的几十分之一，而且体系资源耗费少，读取速度快，功用更有针对性。

在面对一个画布有几十上百个界面的常见需求下，具备 PS、AI 无法比拟的功率。

所以，新手必定要认清，软件是有针对性的。PS、AI 尽管也要学习，但它们处理的东西并不是 UI 界面而是其它关联的规划类型。

需求规划界面的时候，咱们就要从专业 UI 规划软件中挑选，而我首要引荐 —— Figma。

2. 为什么是 Figma

UI 规划软件有十分多，由于开发难度并不大。从最早的 Sketch 开端，到今日有必定用户基数的国内外东西现已挨近 10 种。

只需稍微接触下这些软件，就会发现其实它们同质化是十分严重的。由于 UI 所需的功用就那么一点，软件是无法在功用上做出太多文章的。正常情况下，只需咱们把握了其间一款，其它软件就不必再重新学习。

而这么多软件中，为什么我没有引荐 Adobe XD 或者知名度更高的 Sketch，也是有原因的。

尽管中心功用差不多，可是 Figma 本质是一个 Web App，它是在浏览器中能够直接加载和操作的云端规划软件。

云端带来的好处便是支持团队协作，多人实时办理项目文件，一起修正、编辑规划内容，共享规划画布，而不必像传统的规划软件相同需求将规划文件传来传去。

除此以外，Figma 的另一个躲藏优势便是图形烘托功率和功用优化。当一个画布中置入许多页面和位图今后，能以远超同类东西的速度完结烘托，而且对 CPU、内存的占用能够控制在合理的范围，远胜于 Sketch 这种内存黑洞。

这两个优势是新手很难感知到的，但它们对项目发生的实践影响却意义重大，这才是越来越多大厂团队挑选 Figma 的原因，而不是单单由于 Figma 的主动布局、线上社区、在线插件等特征功用。

而且 Figma 现在关于个人用户学习和运用根本都是免费的，咱们无需破解或是一开端学习就支付高昂的软件费用，远比 XD 或者 Sketch 友好。

当然，Figma 也不是只有长处。现在 Figma 最大的运用阻力便是有必要要联网来运用，断网就无法登录。依据反应，或许部分非电信宽带的用户或许很难流通登录，需求运用 VPN 进行加速。

Figma 的运用介绍

1. Figma 的软件装置

Figma 的装置运用和其它东西有点不太相同，还是需求简略阐明一下。Figma 包括了两种运用场景，网页和客户端。

客户端装置没啥好说的（Figma 专用网页浏览器），登录下面的网址，下载对应体系的客户端再装置并注册登录就行了。

网址：https://www.figma.com/

Figma 官方没有中文版别，假如想要汉化，那么就要运用国内第三方制造的中文版别了。

假如不装客户端，想要用网页版别的，直接在官网注册并登录就行了。但必定要记得在 Figma 下载页面中**装置第三列的桌面字体插件**，这样才能够让网页读取本地的字体库。

装置好 Figma 并翻开运用能加载完好的界面，就证明装置成功，能够开端后续操作学习了。

2. Figma 的首要功用

Figma 是一个十分简略的软件，不要抱着太大的压力来接触。我将 Figma 的首要功用拆分成下面几类，方便咱们了解：

• 文件办理体系
• 界面规划功用
• 布局呼应功用
• 款式组件功用
• 连线交互功用
• 团队协作功用

只需你们把功用拆开来学习，把握起来是特别快的，它甚至还没有 Word 和 Powerpoint 杂乱。下面咱们对每个模块做一个简略的介绍。

文件办理体系

Figma 的文件办理体系，首要包括个人文件和团队文件办理两个模块。

个人文件根本都会存放在界面列表中的 Crafts 文件夹内，一切创立的规划文件都会主动进行保存。而每个创立的规划文件中，还包括若干的 Page 分页，能够了解成一个规划文件下包括多个画板能够快速进行切换。

然后，才是具体的页面、分组、图层结构。在 Figma 中，一个 Page 是能够包括多个页面的。也便是正常文件层级是：

Craft – 文件 – Page – 画板 – 分组 – 图层

而团队文件办理，则是在创立团队今后的文件体系，每个团队下还能够包括不同的项目，它的层级为：

团队 – 项目 – 文件 – Page – 画板 – 分组 – 图层

免费版别中，只答运用户创立一个团队，一个团队下包括一个项目，一个项目中最多三个文件，每个文件内最多三个 Page。付费版别则答应在一个团队内创立没有数量约束的项目、文件和 Page。

界面规划功用

然后，便是界面规划功用了，怎么把一个界面正常做出来的相关功用。Figma 规划页面的逻辑其实十分十分简略：

置入元素 – 调整属性 – 完结排版

说通俗点，便是把元素丢进画板中，改下颜色尺度款式，再移动到适宜的方位……

置入元素就 Figma 上方东西栏中的几个图标，包括置入画板、切片、图片、矢量元素。

调整属性，则是修正这些元素的相关参数，选中后在右侧面板就能看见。包括根本参数、文字设置、图层设置、填充色、描边、作用等设置内容。只需着手尝试下根本都能明白怎么回事，根本没有操作难度。

最终完结排版，便是调整元素的方位了。Figma 方位布局的调理中最重要的便是距离的标识，移动图层会显示它和其它同级元素的边距，以此确定自身的方位。

除了这些以外，还值得注意的功用，就只有蒙版和布尔运算了。蒙版便是创立一个几许区域，将一切元素显示到这个区域的功用，用来裁切图片尺度。布尔，则是完结多个几许图形之间进行合并、相减、相交、去重的功用，首要用在图标上。

以上这几样功用，能够协助你完结一切扁平化规划的页面，后续的一切其它内容，只是增加规划的功率，关于规划的款式本身没有任何影响。

布局呼应功用

UI 中包括了许多重复、相似的元素，而 Figma 供给了一个神器 —— Auto layout主动布局功用。这部分的功用，是专门针对排版的进阶功用。

该功用能够协助咱们完结背景随内容调整、列表项目任意移动、列表距离快速调整等需求，

零根底 UI 入门攻略（三）：UI 规划软件入门

UI 和平面不同的是，咱们规划的许多元素的尺度在实在项目环境中不是固定的，而是会变化的。即咱们所谓的页面呼应、适配，将一个画布的规划运用到不同尺度中去。

适配不是等比的缩放，有不同的对齐和扩大准则，Figma 也能够很好的对元素进行呼应式的设置，来满意画面或组件的尺度改变作用。

尽管其它软件也有相似功用，但 Figma 是完结度最高，且体会最好的。这些功用极大改善了项目规划的功率，让元素繁杂的页面调整起来更称心如意。

款式组件功用

在一个专业项目中，会包括一些固定的颜色、字体、控件、组件。咱们尽管能够经过标准规划的参数并背下来，完结内容规划。可是，这种做法功率太低。

Figma 答应咱们对颜色、字体、作用进行预设，然后让页面的元素绑定这些预设好的作用，修正预设的参数，一切绑定元素也会同时修正。

换句话说，你定了一个价格字体是 24 号，大红色，绑定了快 200 个价格元素。下个需求改版要改成 20 号的橙色，你只需求修正款式预设，就能统一修正那 200 个价格元素，不必手动调整。

而组件 Component，则是把整个元素、编组做成预设。比方上面看到的列表，尽管它们的图标、文字不相同，但本质上它们是同一种东西。

只需咱们创立一个组件，然后批量仿制出来，你就能够经过修正原始组件控制其它组件的款式。这是 UI 项目标准实践的必备功用，协助咱们办理全局组件款式。

连线交互功用

Figma 作为规划软件，也支持一些根本的交互动演示和动画作用完结。咱们能够经过连线的功用，来完结页面跳转和功用演示。

尽管 Figma 的交互动画作用比其它规划软件完善，但不要把它想的太杂乱或太高档。它只是是为了比较直观的协助咱们作出页面跳转的暗示，但不是创立出精巧有趣的动画细节。

创立好的演示，能够比较轻松的共享出去，让其它人经过链接快速检查跳转演示，了解项目内容。

团队协作功用

最终，便是团队协作功用了。由于这根本是一个付费功用，所以只简略介绍下。Figma 在创立团队后能够邀请其他成员加入，一起编辑项目内容。

除此之外，蓝湖（没听过的能够疏忽）有的功用根本上咱们都能够经过 Figma 的协作功用完结，包括页面标记、留言，参数检查，切图导出，代码查询等等。

一般靠谱点的公司都会运用付费功用，一方面正常启用团队协作，另一方面，咱们不必再中心再多一道蓝湖的上传了。

Figma 的学习方法

Figma 是一个上手难度极低的东西，前两个常识点，是一天内就能把握完的，有 PS、AI 根底甚至一两个小时就能把握的。然后面的功用，则是需求在具体项目实践中才有运用价值的。

现在咱们录制了一套新的 Figma 教育，已上传到 B 站，能够协助咱们快速入门：

网址：https://www.bilibili.com/video/BV1fg411G7cs?p=1

主张的学习路径如下：

• 首先看完上方的教育，完结课程演示事例，对 Figma 全体操作、功用有一个开始的认识
• 完结 10-20 个线上事例的临摹，熟练把握根底功用和相关快捷键的运用
• 开端学习 UI 项目规划的实操，用根底功用完结 2-3 套的界面，并总结
• 用自己做的项目，去创立呼应式布局、款式组件、连线交互，总结功用实战用法
• 在作业实战中，再依据项目推进功率研讨和团队协作有关的功用

上面是我站在实用性角度上给的主张，关于新手，许多功用在短期内是没有实用性的，尤其是关于款式、组件相关的功用。

尤其是变体 Variants、团队库 Libraries 这类杂乱功用，咋一看很高档很厉害，可是要有效运用进项目中是有必定门槛的。假如不具备模块化规划和项目标准运用认识，强行运用只会成为实践进程的累赘。

再说通俗一点，便是学习 UI 的前期，你只需用懂 Figma 根底功用，做的出界面就能够了。进阶功用运用，有必要建立在必定数量的项目实践根底上，否则毫无价值。

最终一点，便是关于 Figma 插件的态度了。不要把插件想得太全能，插件是用来辅佐咱们解决特定问题的，不是为了运用插件而运用插件。除了头像插件外，不主张前期学习过多重视插件，徒增烦恼。

结尾

只需了解 Figma 相关功用模块，和学习流程的步骤原因，就完全不会把软件变成学习 UI 的阻力。

不必忧虑作业实践场景中运用哪款界面规划东西，只需把握 Figma，那么其它 Sketch、XD、Js Design 等东西也就能够一看就懂，一用就会。

除了软件课程中准备的事破例，也从简略到难准备了 10 张临摹的素材，图标、图片、文字要咱们自己查找和置入（学习的一部分）。素材在文末和最初都能够下载

欢迎重视作者的微信公众号：「超人的电话亭」