1.1 为何说实话 PS 和 AI
在那时，UI 介面结构设计的主力部队辅助工具是 Figma、Sketch 或 XD，而不是新贵结构设计辅助工具 Adobe Photoshop 和 Illustrator。具有三十多年历史的 PS、AI，不但包涵海量数据的使用者此基础，也拥有RocoForex的机能性。他们那时结构设计的集中化介面，使用 PS、AI 也全被能同时实现得出来。但是，为何这三个巨擘在 UI 领域没成为大家的主要就选择？因为 PS 和 AI 真是太繁杂了……繁杂不完全是同义词，是这三个应用软件机能强大的前部断定。但相比之下，UI 介面又太单纯了……非主流的细长介面在网页同时实现上没技术难度可说。更精细点说明，PS 是这款特别针对相片控制（绘图）、制备、排印的 “绘图” 辅助工具，它能用以同时实现各种繁杂的正方形声效，只有你居然的，没它做不到的。1.2 为何是 Figma
UI 结构设计应用软件有非常多，因为开发技术难度并不大。从最早的 Sketch 开始，到那时有一定使用者基数的国内外辅助工具已经接近 10 种。2.1 Figma的应用软件加装
Figma 的加装使用和其它辅助工具有点不太一样，还是需要单纯说明一下。Figma 包涵了两种使用场景，网页和客户端。2.2 Figma 的主要就机能
Figma 是两个非常单纯的应用软件，不要报太大的压力来接触。我将 Figma 的主要就机能拆分成下面几类，方便大家理解：文件管理系统
介面结构设计机能
布局响应机能
样式组件机能
连线交互机能
团队协作机能
只要你们把机能拆开来自学，掌握起来是特别快的，它甚至还没 Word 和 Powerpoint 繁杂。下面他们对每个模块做两个单纯的介绍。2.2.1 文件管理系统
Figma 的文件管理系统，主要就包含个人文件和团队文件管理三个模块。个人文件基本都会存放在介面列表中的 Crafts 文件夹内，所有创建的结构设计文件都会自动进行保存。而每个创建的结构设计文件中，还包涵若干的 Page 分页，能理解成两个设计文件下包涵多个画板能快速进行切换。2.2.2 介面结构设计机能
然后，就是介面设计机能了，如何把两个介面正常做出来的相关机能。Figma 结构设计网页的逻辑其实非常非常单纯：置入元素 – 调整属性 – 完成排印说通俗点，就是把元素丢进画板中，改下颜色尺寸样式，再移动到合适的位置……置入元素就 Figma 上方辅助工具栏中的几个图标，包涵置入画板、切片、图片、向量元素。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E "零基础 UI 入门｜UI设计师避不开的软件学习15")
除了这些以外，还值得注意的机能，就只有蒙版和布尔运算了。蒙版就是创建两个几何区域，将所有元素显示到这个区域的机能，用以裁切图片尺寸。布尔，则是完成多个几何绘图之间进行合并、相减、相交、去重的机能，主要就用在图标上。以上这几样机能，能帮助你同时实现所有集中化结构设计的网页，后续的所有其它内容，只是增加结构设计的工作效率，对于结构设计的样式本身没任何影响。
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 站，能帮助大家快速进阶：建议的自学路径如下：首先看完上方的教学，完成课程演示案例，对 Figma 整体操作、机能有两个初步的认识完成 10-20 个线上案例的临摹，熟练掌握此基础机能和相关快捷键的应用开始自学 UI 项目结构设计的实操，用此基础机能完成 2-3 套的介面，并总结用自己做的项目，去创建响应式布局、样式组件、连线交互，总结机能实战用法在工作实战中，再根据项目推进工作效率研究和团队协作有关的机能上面是我站在实用性角度上给的建议，对于新手，很多机能在短期内是没实用性的，尤其是关于样式、组件相关的机能。尤其是变体 Variants、团队库 Libraries 这类繁杂机能，咋一看很高级很厉害，但是要有效应用进项目中是有一定门槛的。如果不具有模块化结构设计和项目规范应用意识，强行使用只会成为实践过程的累赘。再说通俗一点，就是自学 UI 的前期，你只要用懂 Figma 此基础机能，做的出介面就能了。进阶机能应用，必须建立在一定数量的项目实践此基础上，不然毫无价值。只要理解 Figma 相关机能模块，和自学流程的步骤原因，就完全不会把应用软件变成自学 UI 的阻力。不用担心工作实际场景中使用哪款介面结构设计辅助工具，只要掌握 Figma，那么其它 Sketch、XD、Js Design 等辅助工具也就能一看就懂，一用就会。除了应用软件课程中准备的案例外，也从单纯到难准备了 10 张临摹的素材，图标、图片、文字要大家自己查找和置入（自学的一部分）。“Figma临摹” 即可。有问题能在评论区留言，下篇再见！本系列其他文章传送门：零此基础 UI 进阶｜解析UI结构设计概念和就业形势零此基础 UI 进阶｜UI结构雕塑家的技能要求和学前必备素材自学不系统，或者提升不明显，能看下他们的UI课程，帮助UI新人快速形成正确的知识体系和找准职业提升方向~第5期已经开课，想报名的同学要尽快了~
