Figma 是2012年发布的面向 UI 设计的“云端”、“矢量”绘图工具，也是目前最主流使用最广泛的 UI 设计软件。 随着时间的发展，Figma 的功能不断扩张，不再只是个 UI 设计工具，还增加了不同的产品线和设计服务，致力于打造一个综合性设计平台。主要的功能和服务可以在官网导航中的 Prod...

Figma作为一款SaaS工具，需要注册才能使用，所以我们首先要进入官网注册。 以下是官网地址： www.figma.com 点击创建账户按钮并根据提示完成后续的操作即可完成账号的创建，并进入Figma的资源管理界面。 虽然在网页端完成注册已经可以直接开始使用了，但是网页端需要安装相关的字体插件，才...

Figma不是一个免费软件，会对新注册的免费账号做出大量的限制，免费账号的主要权限 只能创建x 个团队 每个团队内只能创建x个文件 不能使用开发模式等 …… 免费版足够学习基础功能的使用，如果想要获得完整的Figma设计功能，就需要开通Figma的会员。Figma提供了三种付费类型，专业版 Prof...

学习 Figma 需要先了解它的主要界面和结构，我们可以简单分为三个部分： 资源管理 官方社区 操作页面 资源管理 资源管理的主页是登录账户后展示的默认页面，主要用于连接 Figma 的不同功能、页面，以及管理团队和项目资源。 客户端中顶部是页面标签栏（浏览器版没有），第一个选项即资源管理页面，后面...

Figma 中的工具栏包含7个工具选项和绘图/设计/开发模式开关。多数工具选项旁边有个展开图标，点击可以展开查看隐藏的工具选项。 每个选项旁边的英文字母就是它的键盘快捷键，可以通过该字母快速进行选择，下面我们轮流来解释每个工具选项的功能。 选项1： Move（快捷键V）：选择工具，将鼠标切换成点击可...

Figma Design 的设计过程需要创建和置入不同的元素（如文本、图标、图片等），并对它们进行设置实现最终的设计效果。而这些元素，它们都会在左侧资源面板中映射出一个对应的“图层 Layer”，且不同的元素类型会用不同的图标标识。 理解图层相关知识是 Figma 前期学习过程中最重要的知识点之一，...

在Figma中，包含不同的图层和视觉元素，每个元素都会有相应的属性和参数。比如一个矩形，它有长和宽的属性，且它们有各自的参数值。 因为不同元素包含的属性不同，所以选中不同元素展示的属性面板并不是相同的，会有一定的差异。 属性面板中的属性被划分成了不同的模块分类，便于用户区分和适用，下面依次来解释最常...

Figma 的字体模块是属性面板内设置属性最多的一个模块，而它的设置和传统的办公软件 Word、WPS 等有很大的不同。 UI 设计软件为了确保设计稿能落地，会等同前端编程中的字体设置属性来创建对应的设置。所以了解这些设置，就需要理解字体的相关知识点，可以查看我们分享的UI 字体认识： uxbaik...

在UI设计中，会应用大量图片，包括头像、商品图、摄影图、广告图等等，它们都是位图。而Figma作为一个矢量工具并不擅长制作位图，它只是位图的搬运工。 图片的置入 位图引入是一个高频操作，在图层列表中也有一个独立的图标示意。但Figma对图片的引入逻辑和其它软件并不相同，它的位图应用本质上是： &#8...

Figma有一个重要的基础操作 —— “蒙版 Mask”。 蒙版是一种口语简化，原意是”蒙在图像上的板子”。正常蒙在图像上的板子会遮挡下方的图像，但如果在板子上镂空一个区域出来，那么图像就可以通过这个区域被部分显示出来。但是Figma中，蒙版功能的实现...

Figma的资源社区提供了大量的设计素材和插件，我们可以通过社区来快速获取iOS、Android官方组件库、项目案例源文件、设计提效插件等内容。 通过在资源管理页面中点击社区按钮进入对应页面： 社区页面上方罗列了不同资源类型的选项，可以点击后进入对应分类列表中。 除了根据分类筛选资源外，也可以直接在...

掌握前面的基础知识，以及使用适当的图片、图标素材，就可以完成市面上90%以上的界面设计了。 自动布局、样式库、组件、变体、变量等进阶功能，只是为设计提供更高的效率，但不会对我们能做出什么设计产生直接的影响。 使用 Figma完成界面的设计包含以下的要点： 要点1：创建设备画布/ Frame 创建画布...

Figma中最核心的功能之一 —— 自动布局 Autolayout，是实现元素布局自动化的功能，可以极大的提高UI界面设计的效率和灵活性。 它的主要作用： 快速调节并列元素的排列方向和间距 让上下级元素的尺寸根据一定的规则自动适配 自动布局得应用逻辑 创建一个用于管理下级图层排列和适配的自动布局编组...

自动布局最重要的特性之一，就是自适应的应用。而Figma中的自适应包含下面两个概念： 布局编组跟随子元素适应 Hug Contents 子元素跟随父级编组适应 Fill Container 布局编组跟随子元素适应 Hug，即父级的子元素的尺寸变动后父级的尺寸也自动做出调整。比如创建一个具有自动布局的...

点击观看课程视频 练习内容： 根据提供的宜家主页截图，使用Figma的课程操作演示，完成该页的临摹练习。如果完成第一页后还有时间，也可以继续完成 “卷王” 文件夹内提供的其它界面截图的临摹。 练习目标： 提升对Figma软件的熟练度 适应UI界面操作和设计的基本流程 了解真实线上应用的设计参数和属性...

点击观看课程视频 练习内容： 根据提供的网页主页截图，以及Figma的课程操作演示，完成该页的临摹练习（使用1440宽的画布即可）。如果完成第一页后还有时间，也可以继续完成 “卷王” 文件夹内提供的其它主页截图的临摹。 练习目标： 提升对Figma软件的熟练度 学习网页设计的基本结构和参数应用 额外...

因为不少同学觉得临摹难度太低太简单，所以这次的周练上上强度，完成对下面案例的改版。 练习内容： 页面有两个，优先改左侧的主页，如果有时间可以改右侧的详情页。 练习要求： 使用402宽画布，根据自己对界面问题的理解进行优化，组件、功能、字段不做删减只优化样式。图片和图标要自己替换，可以使用外部素材，没...

新的周练将分为两个部分，一个是临摹练习一个是改版练习。如果才刚开始学习软件就依旧从临摹起步，如果已经对临摹驾轻就熟就迎接新的改版挑战。 临摹练习 改版练习 练习要求： 临摹练习要求：适应UI界面操作和设计的基本流程，了解真实线上应用的设计参数和属性，案例内使用的图片、图标不提供素材，需要自己找，也是...