零基础 UI 入门｜UI设计师避不开的软件学习

1.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。

1.2 为什么是 FigmaUI 设计软件有非常多，因为开发难度并不大。从最早的 Sketch 开始，到今天有一定用户基数的国内外工具已经接近 10 种。

只要稍微接触下这些软件，就会发现其实它们同质化是非常严重的。因为 UI 所需的功能就那么一点，软件是无法在功能上做出太多文章的。正常情况下，只要我们掌握了其中一款，其它软件就不用再重新学习。而这么多软件中，为什么我没有推荐 Adobe XD 或者知名度更高的 Sketch，也是有原因的。虽然核心功能差不多，但是 Figma 本质是一个 Web App，它是在浏览器中可以直接加载和操作的云端设计软件。云端带来的好处就是支持团队协作，多人实时管理项目文件，共同修改、编辑设计内容，分享设计画布应用入门，而不用像传统的设计软件一样需要将设计文件传来传去。

除此以外，Figma 的另一个隐藏优势就是图形渲染效率和性能优化。当一个画布中置入大量页面和位图以后，能以远超同类工具的速度完成渲染，并且对 CPU、内存的占用可以控制在合理的范围，远胜于 Sketch 这种内存黑洞。这两个优势是新手很难感知到的，但它们对项目产生的实际影响却意义重大，这才是越来越多大厂团队选择 Figma 的原因，而不是单单因为 Figma 的自动布局、线上社区、在线插件等特色功能。并且 Figma 目前对于个人用户学习和使用基本都是免费的，我们无需破解或是一开始学习就支付高昂的软件费用，远比 XD 或者 Sketch 友好。当然，Figma 也不是只有优点。目前 Figma 最大的使用阻力就是必须要联网来使用，断网就无法登录。根据反馈，可能部分非电信宽带的用户可能很难流畅登录，需要使用 VPN 进行加速。

2.1 Figma的软件安装Figma 的安装使用和其它工具有点不太一样，还是需要简单说明一下。Figma 包含了两种使用场景，网页和客户端。

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

Figma 官方没有中文版本，如果想要汉化，那么就要使用国内第三方制作的中文版本了，可以到下面链接中下载（不是太建议）。

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

安装好 Figma 并打开应用能加载完整的界面，就证明安装成功，可以开始后续操作学习了。

2.2 Figma 的主要功能Figma 是一个非常简单的软件，不要报太大的压力来接触。我将 Figma 的主要功能拆分成下面几类，方便大家理解：

文件管理系统

界面设计功能

布局响应功能

样式组件功能

连线交互功能

团队协作功能

只要你们把功能拆开来学习，掌握起来是特别快的，它甚至还没有 Word 和 Powerpoint 复杂。下面我们对每个模块做一个简单的介绍。

2.2.1 文件管理系统Figma 的文件管理系统，主要包含个人文件和团队文件管理两个模块。个人文件基本都会存放在界面列表中的 Crafts 文件夹内，所有创建的设计文件都会自动进行保存。而每个创建的设计文件中，还包含若干的 Page 分页，可以理解成一个设计文件下包含多个画板可以快速进行切换。

然后，才是具体的页面、分组、图层结构。在 Figma 中，一个 Page 是可以包含多个页面的。也就是正常文件层级是：Craft - 文件 - Page - 画板 - 分组 - 图层而团队文件管理，则是在创建团队以后的文件系统，每个团队下还可以包含不同的项目，它的层级为：团队 - 项目 - 文件 - Page - 画板 - 分组 - 图层免费版本中，只允许用户创建一个团队，一个团队下包含一个项目，一个项目中最多三个文件，每个文件内最多三个 Page。付费版本则允许在一个团队内创建没有数量限制的项目、文件和 Page。

2.2.2 界面设计功能然后，就是界面设计功能了，如何把一个界面正常做出来的相关功能。Figma 设计页面的逻辑其实非常非常简单：置入元素 - 调整属性 - 完成排版说通俗点，就是把元素丢进画板中，改下颜色尺寸样式，再移动到合适的位置……置入元素就 Figma 上方工具栏中的几个图标，包含置入画板、切片、图片、矢量元素。

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

最后完成排版，就是调整元素的位置了。Figma 位置布局的调节中最重要的就是间距的标识，移动图层会显示它和其它同级元素的边距，以此确定自身的位置。

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

以上这几样功能，可以帮助你实现所有扁平化设计的页面，后续的所有其它内容，只是增加设计的效率，对于设计的样式本身没有任何影响。

2.2.3 布局响应功能UI 中包含了大量重复、类似的元素，而 Figma 提供了一个神器 —— Auto layout 自动布局功能。这部分的功能，是专门针对排版的进阶功能。该功能可以帮助我们实现背景随内容调整、列表项目任意移动、列表间距快速调整等需求。

UI 和平面不同的是，我们设计的很多元素的尺寸在真实项目环境中不是固定的，而是会变动的。即我们所谓的页面响应、适配，将一个画布的设计应用到不同尺寸中去。适配不是等比的缩放，有不同的对齐和放大原则，Figma 也可以很好的对元素进行响应式的设置，来满足画面或组件的尺寸变更效果。

虽然其它软件也有类似功能，但 Figma 是完成度最高，且体验最好的。这些功能极大改善了项目设计的效率，让元素繁杂的页面调整起来更得心应手。

2.2.4 样式组件功能在一个专业项目中，会包含一些固定的色彩、字体、控件、组件。我们虽然可以通过规范设计的参数并背下来，完成内容设计。但是，这种做法效率太低。Figma 允许我们对色彩、字体、效果进行预设，然后让页面的元素绑定这些预设好的效果，修改预设的参数，所有绑定元素也会同时修改。

换句话说，你定了一个价格字体是 24 号，大红色，绑定了快 200 个价格元素。下个需求改版要改成20 号的橙色，你只需要修改样式预设，就能统一修改那 200 个价格元素，不用手动调整。而组件 Component，则是把整个元素、编组做成预设。比如上面看到的列表，虽然它们的图标、文字不一样，但本质上它们是同一种东西。只要我们创建一个组件，然后批量复制出来，你就可以通过修改原始组件控制其它组件的样式。这是 UI 项目规范实践的必备功能，帮助我们管理全局组件样式。

2.2.5 连线交互功能Figma 作为设计软件，也支持一些基本的交互动演示和动画效果实现。我们可以通过连线的功能，来完成页面跳转和功能演示。

虽然 Figma 的交互动画效果比其它设计软件完善，但不要把它想的太复杂或太高级。它仅仅是为了比较直观的帮助我们作出页面跳转的示意，但不是创建出精巧有趣的动画细节。创建好的演示，可以比较轻松的分享出去，让其它人通过链接快速查看跳转演示，了解项目内容。

2.2.6 团队协作功能最后，就是团队协作功能了。因为这基本是一个付费功能，所以只简单介绍下。Figma 在创建团队后可以邀请其他成员加入，共同编辑项目内容。除此之外，蓝湖（没听过的可以忽略）有的功能基本上我们都可以通过 Figma 的协作功能实现，包括页面标记、留言，参数参看，切图导出，代码查询等等。

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

Figma 是一个上手难度极低的工具，前两个知识点，是一天内就能掌握完的，有 PS、AI 基础甚至一两个小时就能掌握的。而后面的功能，则是需要在具体项目实践中才有使用价值的。目前我们录制了一套新的 Figma 教学，已上传到 B 站，可以帮助大家快速入门：（也可以点击文末的阅读原文跳转到B站观看）建议的学习路径如下：首先看完上方的教学，完成课程演示案例，对 Figma 整体操作、功能有一个初步的认识完成 10-20 个线上案例的临摹，熟练掌握基础功能和相关快捷键的应用开始学习 UI 项目设计的实操，用基础功能完成 2-3 套的界面，并总结用自己做的项目，去创建响应式布局、样式组件、连线交互，总结功能实战用法在工作实战中，再根据项目推进效率研究和团队协作有关的功能上面是我站在实用性角度上给的建议，对于新手，很多功能在短期内是没有实用性的，尤其是关于样式、组件相关的功能。尤其是变体 Variants、团队库 Libraries 这类复杂功能，咋一看很高级很厉害，但是要有效应用进项目中是有一定门槛的。如果不具备模块化设计和项目规范应用意识，强行使用只会成为实践过程的累赘。

再说通俗一点，就是学习 UI 的前期，你只要用懂 Figma 基础功能，做的出界面就可以了。进阶功能应用，必须建立在一定数量的项目实践基础上，不然毫无价值。最后一点，就是对于 Figma 插件的态度了。不要把插件想得太万能，插件是用来辅助我们解决特定问题的，不是为了使用插件而使用插件。除了头像插件外，不建议前期学习过多关注插件，徒增烦恼。

只要理解 Figma 相关功能模块，和学习流程的步骤原因，就完全不会把软件变成学习 UI 的阻力。不用担心工作实际场景中使用哪款界面设计工具，只要掌握 Figma，那么其它 Sketch、XD、Js Design 等工具也就可以一看就懂，一用就会。除了软件课程中准备的案例外，也从简单到难准备了 10 张临摹的素材，图标、图片、文字要大家自己查找和置入（学习的一部分）。

想要获取免费素材，在超人的电话亭公众号中回复 “Figma临摹” 即可。

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!