1.Figam的安装和注册
1.1Figam的安装
首先进入官网
https://www.figma.com/
点击顶部的【Products】，点击【Downloads】
我们可以看到里面有三个产品可以去下载和安装，首先第一个是下载的桌面客户端，选择电脑对应的版本安装即可 ；中间的是移动端app，可以在手机上面去安装一个Figma，它就可以预览你电脑上这个Figma的一些效果图；最右边的是字体安装程序，Figma不是必须去下载和安装它的桌面客户端的，可以在网页里面打开，直接用网页版也是可以的，这个时候可能就会面对一个问题，就是在网页里面去使用Figma的话，如果你想调用本地电脑上的一些字体，这个时候就需要安装这个字体安装程序了，Figamd 桌面客户端已经有了该部分不需要额外安装。
1.2 Figma的注册
点击【Log in】
如果你有谷歌账号的话，可以直接使用谷歌账号来登录，如果没有的话可以去注册一个邮箱，下面用邮箱来给大家演示一下创建Figma账号的过程。
点击【Create one】
点击【Continue with email】,设置初始密码后点击【Create account】,这个时候就会看到一个笑脸提示去查看邮件
我们打开邮箱，可以看到Figma发来的一封认证邮件，点击【Verify email】
输入刚刚设置的密码，点击【Log in】
这一步去设置你在Figma中的名字
选择你的角色，可以随便选一个
你之前有使用过Figma的产品吗？选什么都行，我这里选的是No
这里让你选择一个计划，最左边的Starter，我们可以理解为是一个免费版本，但是部分功能受限制，中间的一个是专业版，一个是组织版。
如果我们只是想进行学习又不想交费，可以直接选择Starter版本，基本够用。如果你是在校学生或者教育工作者，可以去注册一个教育版，教育版的功能和专业版的是一样。
下面是问你想创建哪类项目
- App：移动端 App 界面设计，适合手机 APP UI、移动端原型，预设手机尺寸画布。
- Website（当前选中）：网页设计，制作官网、落地页、网页界面，适配电脑端网页画布。
- Graphic：平面图形设计，海报、封面、社交媒体配图、LOGO、印刷物料等静态视觉。
- Animation：动画 / 短视频动效制作，界面动效、MG 动画、短视频、交互动画。
- **Presentation：**演示幻灯片，类似 PPT，用于演讲汇报、路演课件。
- Whiteboard：在线协同白板，头脑风暴、流程图、用户旅程图、团队讨论、草图梳理。
你现在想做什么？
Design on a canvas（当前已选中）
副标题：Explore freely in Figma Design
也就是大家最熟悉的传统 Figma 画布模式，用来做 UI 界面、原型、图标、组件库、平面设计等，就是经典 Figma 设计工作流。
右侧预览图就是标准的 Figma 设计文件：同时展示桌面端、移动端网页设计稿，支持图层、组件、原型、标注等全套设计工具。
Build a working website
副标题：Create something real in Figma Make
这是 Figma 新推出的 Figma Make 功能，不再只产出 "静态设计稿 / 原型"，可以直接制作能真正运行、可上线发布的交互式网站，支持 AI 生成页面、响应式布局、可交互功能，完成后能直接发布获得公开网址，打通「设计→可访问网页」，缩短设计师到上线的流程
你想以哪种方式开始创作？
Work with the Figma agent（当前选中）
副标题：Describe what you want, then refine it together
Figma AI 智能设计助手，也就是 Figma 原生 AI 设计代理。
你只需要用自然语言描述需求（比如 "做一个花店落地页"），AI 会直接在画布生成完整可编辑的 Figma 设计稿，包含自动布局、组件、适配桌面 / 移动端；之后还能持续对话迭代样式、调整布局、修改内容。
右侧预览图正好演示这个流程：输入文字需求后，AI 直接生成花店网站页面，设计师可以继续和 AI 对话微调。
Use a template
副标题：Start from an existing design
模板启动，从官方 / 社区现成模板开始工作。适合不想从零搭建、快速复用成熟布局、组件规范的场景。
选好后点击【Finish】（上面只是一个开始示例，大家可以选择不同的初始开发方式）
然后就可以开始设计啦
下面简单介绍一下各个部分
1. File（文件 / 图层面板）
核心：管理页面 Pages和图层 Layers
功能：切换多个设计页面、查看画布上所有图层 / 编组、隐藏锁定图层、管理框架；也可以修改文件名、查看版本历史、文件设置
新手最常用！相当于 PS 图层面板
2. Agents（AI 智能助手，Beta）
就是刚才截图里你看到的 Figma 原生 AI 助手
用自然语言直接生成 UI、修改画布上已有界面、生成动画、设计评审、批量改色、生成组件
支持对话记录，可以选中图层直接让 AI 修改设计
3. Assets（资源库 / 组件库）
存放所有可复用组件 Components、样式 Styles（按钮、卡片、图标、色板、文字样式）
可以调用团队共享设计库，直接拖拽组件到画布；改主组件，所有实例自动同步，保障界面统一
4. Tools（工具）
集合各类插件 Plugins、开发工具、代码导出、第三方工具
可以启动插件、安装新插件、管理开发交付工具（切图、导出、代码查看等）
5. Variables（变量）
高级设计系统功能，存储统一数值：颜色、数字（间距 / 圆角）、文字、布尔值
典型场景：统一管理主题色、间距规范；一键切换深色 / 浅色模式；设计规范和前端代码变量对齐
修改一处变量，所有使用该变量的图层全局自动更新
6. 左侧边栏（Agents 面板）
顶部：New chat Shared，相当于 AI 对话会话
欢迎语：Welcome... 介绍 Agent 能力
Create a design
点击 Try it，用文字描述页面，AI 直接生成可编辑 UI（不是图片，是标准 Figma 图层、自动布局组件）
下方功能列表：
- Create an animation：AI 生成交互动画
- Get feedback on work：AI 对你现有设计给出评审建议
- Learn to use Figma：AI 辅助学习 Figma 操作
- 底部输入框：Describe your idea → 输入自然语言指令，让 AI 做设计
7. 中间弹窗：What do you want to make today?
快速新建项目模板选择：
- Website：网页 UI
- Mobile app：移动端 App 界面
- Desktop app：桌面端软件界面
点击任意一个，就可以继续描述需求，AI 生成整套界面框架。
2.认识界面
2.1 Figma首页
我们通过官网链接login后即可进入Figma的首页
首页这里主要分为左侧的侧边栏部分 和右侧的内容区域部分
右侧这部分内容是我们左侧当前定位的这个导航项的具体内容，比如我们左侧选中的是Recents，那么右侧展示的就是最近的内容。如果切换到Drafts草稿箱，那右侧就会展示草稿箱的内容。
2.1.1 头像名字部分
下面我们看一下头像和名字部分，点击后会出现一个浮层
在这里我们可以去设置Figma的主题颜色，包括浅色、深色还有跟随系统
点击settings设置，我们可以看到最上面有4个Tab，分别是账户、社区、通知和安全，后三个没有什么特殊需要的话不用特殊去设置
账户这可以去更改我们的头像、名字、邮箱、语言、系统颜色
Figma的语言选项中没有提供中文版本，所以如果我们想使用中文版的话，就需要通过第三方的插件或者一些第三方的汉化客户端来实现（由于插件或者软件的不同，会有部分翻译不一致的问题，从而容易给大家的学习带来一些困惑，故后续我们仍然使用英文版本的来做示例）
头像名字右边的小铃铛是Figma的通知，当有新的通知时铃铛上面会出现小红点
2.1.2 搜索
可以在这搜索我们Figma里面的一些文件
2.1.3 Recents最近
打开后右侧内容区域部分会展示最近看过的、打开过的一些文件，分享过的文件和分享过的一些项目
右上角我们还可以看到Design、FigJam、Slides、Make等图标，点击后可以去新建一个文件。
作为UI设计师最常用的绘制界面都是就是Design。
FigJam是Figma的一个在线协作的白板工具，主要用于一些团队的头脑风暴或者流程设计等等。
Slides幻灯片，它就是Figma里面的一个幻灯片工具，当做一些汇报或者产品演示的时候可以用，它里面提供了很多的幻灯片模板，可以选择需要的进行应用和编辑
点击more，我们先来看看Buzz，我们可以在里面去创建或者发布一些模板，让团队可以快速的根据这个模板去产出一些社交媒体上面使用的图片或者视频以及一些展示广告、宣传单页等等。这里还提供了不同平台的常用尺寸，左侧还提供了社交、广告和打印品三种类型，如果模板的右上角有一个视频小图标说明该模板是视频格式的。
Site专业版及以上才能使用，点击后会出来一个预设好的一个尺寸，一个桌面端一个移动端，同样里面也提供了很多模板供我们选择，如果我们想做一个简单的网页就可以使用Site，后续Figma可能还会拓展出更强大的CMS内容管理功能，目前是置灰占位状态
最后我们来看一下Make，它是Figma的AI工具，在这里我们可以通过一些指令来生成一些界面，做一些动效等等，它暂时还不能完全替代UI设计师做到完全符合期待的效果，但是可以用来做前期方案的雏形思考，带来灵感
如果想要对界面进行编辑工作，点击右上角的图标Copy desgin之后在Desgin界面去打开它进行编辑。
2.1.4 社区
这是一个面向Figma用户的一个资源共享的一个平台，这这里会有一些用户或者是企业组织等去上传的一些资源，我们可以在这去安装一些插件，下载一些UI套件或者使用一些网页的模板等等
2.1.5 团队
点击团队，我们可以看到出现了一个小菜单，我们可以在这里面去进行团队的切换，可以点击Create new 来创建团队
团队是什么？比如我们在一家公司，这个公司它的业务可能不是特别单一，有多个业务，例如外卖、电商、网约车等等，这些业务相对来说都是比较独立的，我这个业务里面的设计团队不希望其他业务的团队看到我这的设计文件或者资源，这时就可以在Figma里面去创建一个团队，这个团队一来方便设计师进行文件管理，二来也是保证设计文件的一个隐私，可以邀请整个团队的设计师、上游的产品人员和下游的研发人员一起进入这个团队，再根据每个人角色的不同去赋予他们不同的权限，比如设计师可以编辑，产品人员和研发人员只能查看等等，这就是团队的一个作用。
下面的Drafts、All projects、Resources、Trash、Admin都是从属于我们当前选择的这个团队的
2.1.6 Drafts草稿箱
我们在草稿箱里面创建的文件只有我们只能才能查看，别人是查看不到的
如果我们想把它移动到团队里面，想让别人也能查看到，可以选中该草稿，右键选择【Move file】,接着选择要移动到的具体项目中即可
2.1.7 All projects 全部项目
这是当前团队中的全部项目
到这大家可能会有疑问，为什么我们分完团队又要去分项目呀，因为我们前面讲过，可以按照业务去拆分一些团队，一个业务下面有有可能分很多项目
例如网约车业务，项目中可能就会分为乘客端和司机端，这时我们就可以去建两个项目，这样也方便去管理和查看
2.1.8 Resources资源
我们刚点进来它是一个空的界面，这还有一些文字介绍（自定义模板------专为您的团队设计
升级到专业版，为团队的仪式和工作流程创建模板------无需每次新建文件。）
专业版的文字介绍（使用自定义模板来简化你的工作流程，创建模板来适应你团队独特的一些习惯、惯例或者是工作流......）
这时点击【Create】可以创建两种文件类型，一种是Slides幻灯片，另一种是Buzz
2.1.9 Trash垃圾桶
垃圾桶里是我们删除的一些文件，和电脑中的回收站是一个意思，选中后右键会有复制到草稿箱、还原、完全删除
2.1.10 Admin 管理
专业版以上才有
这里主要是管理团队成员，修改权限、设置等功能，或者邀请新的成员进来
邀请成员有两种方式，一种是【copy link】 把这个链接发给你的成员，在这还可以选择赋予他一个查看权限或者编辑权限；另外一种方式就是直接输入成员的邮箱，点击【invite】，在他的客户端的小铃铛这就会出现一个小红点，问他要不要接受邀请
2.1.11 Starred星标
如果我们在某一段时期i，会经常使用一个文件的话，我们就可以给这个文件去加一个星标，这样可以方便我们去进行查看
比如我们在Recents最近这选择一个文件，hover之后，右上角会出现一个小星星，点亮后这个文件就会出现在Starred里面了，再点一次就可以取消星标（变灰色）
2.2 认识设计（Design）界面
打开Figma客户端，在Figma首页点击Design，或者使用快捷键Ctrl+N快速创建一个设计文件。
该界面主要包含三个部分，分别是左侧边栏部分、中间画布部分、右侧边栏部分。
2.2.1 左侧边栏-Figma main menu
2.2.1.1 Figma图标
最上面这里有一个Figma的图标，当我们鼠标Hover到上面时会出现这个图标的名称叫Main menu，也就是我们Figma的主菜单，它里面有Figma的一些设置或者操作
2.2.1.2 Actions
我们先来看最上面的Actions，点击后画布的下面会出现一个面板，面板里面会有我们最近使用的一些部件、插件、设置或者操作等等，再下面是一些建议的操作和通用设置，我们可以将Actions理解为一个快捷操作的面板
2.2.1.3 File文件
file文件和大多数软件一样有新建保存之类的操作，我们着重关注下面几项。
首先第一个Save local copy，点击后可以把我们的文件保存到本地，生成一个后缀名为.fig的文件，Figma它的存储格式是云端存储，但是在部分场景下我们还是需要把这个文件去保存到本地的
接下来是Show version history，展示版本历史，点击之后可以在画布右侧看到一个版本历史。这个功能主要是当你改了几版后，你的甲方说我还是觉得之前的某一版更好，Figma这就提供了版本历史功能，我们可以选择你想还原的那个版本，右键选择Restore this version，如果只是想查看的话，直接单击即可。
展示历史版本的选项上面还要一个Save to version history，主动的去保存一个历史版本，大多时候Figma是会自动保存的，这里提供了一个手动保存历史版本的功能
2.2.1.4 Edit编辑
编辑这里我们主要关注三个操作即可，分别是Undo、Redo还有Copy as 里面的Copy as PNG
Undo：Ctrl+Z会回撤我们之前的操作
Redo：Ctrl+Y（或者Ctrl+Shift+Z）是回撤的回撤
Copy as PNG：Ctrl+Shit+C是将Figma里面画的矢量图或者是一些图形的组合直接复制为一个PNG图片，点击快捷键后画面下方会有一小行提示Copied as PNG 已经复制为PNG图片，我们再Ctrl+V就可以粘贴，可以粘贴到画布，也可以粘贴到其他软件，比如微信等等
2.2.1.5 View视图
首先第一个Pixel grid 像素网格，它的快捷键是Shift+',当我们开启和关闭的时候画布下方都会有响应的文字提示，开启之后需要我们放大画布才能看见效果，开启后我们可以看到一个一个的像素网格，它的作用的当我们在绘制图形的时候可以帮助我们观察这个图形相对于网格的一个位置，是否对齐像素等等，建议开启
接下来我们再来看Rulers标尺，快捷键是Shift +R,标尺就是我们画布左侧和顶部带有可读的这一部分，它的作用可以辅助我们在画图的时候看图形的位置在哪以及尺寸大小，还有元素对齐等，选中图形后可以看到标尺处会有一个高亮的显示；另外我们将鼠标hover到标尺上，此时鼠标会变成一个双向箭头，我们再按住鼠标左键拖动就可以拉出水平或者垂直的参考线来辅助我们设计，选择参考线往标尺处拖动消失后即可删除，如果只是想隐藏参考线，再次使用快捷键Shift +R即可。
接下来是Pixel preview像素预览，设计稿在Figma默认的视图下会因为Figma的矢量渲染机制看起来都是平滑的，但是当实际导出图片或者在屏幕上去显示的时候，元素的边缘可能会因为没有对齐像素而出现模糊，而这个像素预览的作用就是帮助我们去检查元素的对齐精度和一些细节的呈现，确保设计稿在实际屏幕上的显示效果也是符合预期的。
平时关掉，需要的时候再开启。开启后PS中常见的虚边和锯齿就会显现，关闭之后图形表面都是平滑的。
我们下面来看一下Minimize UI 和Show/Hide UI
当我们点击Minimize UI（快捷键Ctrl+Shift+\）,可以看到左右侧边栏都呈现出一个最小化的一个状态，它的作用就是当我们在绘制图形时，不希望左右侧边栏占用画布太大的空间，这时我们就可以Minimize UI
当我们点击Show/Hide UI（快捷键Ctrl+\），我们可以看到界面只剩画布了，连标尺和工具箱都隐藏起来了。一般用在给别人演示设计稿的时候，希望呈现的画面更大一点时使用。
了解到这些必备的就差不多了，如果在后续使用Figma的过程中遇到元素的显示和隐藏问题是，就可以来View视图这块找找设置
2.2.1.6 Object对象
对象这里我们可以看到里面的选项多数都是置灰的，没办法使用，原因是我们必须要选中一个对象之后里面的功能才能使用
Object对象和Text文字在后续实操案例的时候再做具体讲解，这里省略
2.2.1.7 Arrange布局
Arrange布局是关于一些图形或者元素的上下左右对齐、水平平均分布、垂直平均分布等操作，但是我们一般调整布局的这类操作不会在这个面板去调整，所以就不多介绍了
这块我们主要来看一下Round to Pixel像素取整，比如我们去画了一个图形，一般情况下都容易带有小数，而像素取整可以帮我们把小数去掉，此时该图形的虚边没有了，数值也都是整数了
2.2.1.8 Plugins插件
Plugins插件可以理解为是Figma中来辅助设计的一个工具。
例如Skew Dat插件，它可以帮助设计快速做出倾斜效果
2.2.1.9 Widgets部件
Widgets部件可以置入到我们画布里面的一些可交互的内容块，可以理解为是一种迷你版的应用程序
下面拿simple vote来举例
比如我现在设计了几个设计稿，不知道选哪个，这时我们选择了一个小部件简易投票，这时就可以让团队成员进来投票
插件和部件我们都可以去社区里面去浏览和安装
2.2.1.10 Preferences偏好设置
Snap to geometry对齐到几何，开启后，在编辑模式里面，当我们拖动锚点时开启，它能帮助我们有一个吸附效果，如果关闭掉吸附效果就没有了
Snap to objects对齐到对象，开启后，我们图形在移动的过程中，如果居中对齐了，会有橙黄色的参考线出来并且有吸附感，如果取消就没有参考线和吸附感了，这就是对其到对象的作用
**Snap to pixel grid对齐到像素网格，**开启后，我们在绘制和移动图形时，图形的边缘会与像素网格对齐，取消后与网格线没有必然的对齐关系了
建议前面说到的这三个都开启
Highlight layers on hover,当我们的鼠标hover到图层上面的时候都会有一个高亮的效果
Rename duplicated layers重命名复制图层，建议开启，开启后复制图层时系统会自动将图层的名字修改，使用不同的命名
Show dimensions on objects显示尺寸，建议开启，当我们在选择对象的时候它的底部这里都会出现对应的尺寸
Use number keys for opacity,使用数字键去控制不透明度，建议开启，当我们选择一个对象的时候可以通过数字键来调整不透明度
**Color profile settings 颜色配置文件设置，**打开之后会有两个设置，一个是sRGB,另一个是Display P3。有跨设备要求的话选sRGB，如果设计确定是只针对苹果的一些设备再选Display P3。
**Keyboard layout键盘布局，**不同国家的键盘布局会有些微差别，在这里可以进行更改，我们选择Generic通用的即可，可以查看常用的快捷键
Nudge amount
点开之后可以看到这里有两个参数去设置
更改的是每次移动（快捷键增减量）它的这个数值是多少
比如Small nudge数值为1表示每次图形上下左右键移动1像素格；Big nudge数值为10，表示按住Shift键后再按上下左右键图形每次移动10像素格；Ctrl键+上下左右键可以改变图形的尺寸
2.2.1.11 Libraries资源库
它是在Figma里面用于存储管理和共享一些可复用元素的功能，它能够帮助团队去保持设计的一致性，并且提升协作的效率
2.2.2 左侧边栏-File
2.2.2.1 设置文件名
点击Unititled，可以对文件进行重命名
点击文件名旁边的小箭头，可以打开一个菜单
Show version history可以查看版本历史
File color profile设置
这块的文件颜色设置和Figma main menu下的Preferences这设置的Color profile的区别
Figma main menu下的Preferences这设置的Color profile针对的是Figma这个软件的全局的，它影响的是我们新建的文件
这块的文件颜色设置只针对这个文件，这的优先级更高
但是如果你的显示器最高只支持到sRGB色域，无论你在Figma里面设置的是什么，它都会按照sRGB色域去显示，所以有条件的同学还是推荐使用Mac电脑
文件名载往下我们可以看到两个部分一个是Pages页面 另一个是Layers图层
2.2.2.2 Pages页面
Pages点击加号图标，我们可以去创建多个页面，它的作用是当我们在做一些设计稿的时候，可以给拆分不同的设计稿版本
2.2.2.3 Layers图层
Layers图层和Photoshop等设计软件中图层的概念是一样的，都是由一层一层图层的叠加最后形成我们看到的效果
每个图层的前面都有一个小图标，就是我们当前图层的一个缩略图；图层的右边有两个常用的操做，一个是小锁，锁定后该图层不能进行操作，另一个是小眼睛，关闭之后该图层就隐藏变得不可见了。
2.2.3 右侧的内容区域部分
2.2.3.1 画布
中间最大的那一整块都是画布，我们点击空白区域再点击右侧可以去修改画布的颜色
画布中的基本操作：
- 按住空格键+鼠标左键：可以去拖动整个画布
- 按住ctrl键+鼠标滚轮：可以区域放大和缩小整个画布
- ctrl键+减号"-"：缩小画布
- ctrl键+加号"+"：放大画布
- ctrl+0：画布回到100%大小
- 鼠标滚轮：对画布进行简单的上下左右移动
工具条
依次是移动工具、区域绘制、图形绘制、钢笔工具、文字工具、评论、Actions
最右边的三个是模式的切换，分别是绘画模式
设计模式
开发模式
2.2.3.2 右侧侧边栏
点击头像，我们可以看到Spotlight me,作用是当我们去做一些评审的时候，可能会看到非常多的稿子，讲的时候一会讲这里，一会跳那里，我们就可以通过Spotlight me来实现自动跟随设计师演讲人移动的视线，实现聚光灯效果
头像右侧的播放小图标，可以在这里去播放我们的设计稿，可以看到设计稿在手机中呈现的一个效果
点击播放图片右边的下拉小箭头，我们可以看到还有一个预览的Preview，点击后会直接在我们的当前画布中出现一个预览的窗口
点击【Save】按钮可以进行分享
再往下我们可以看到两个Tab，一个是Design另一个是Prototype
Design是我们正常在做UI设计时进行图形绘制等操作中使用到的面板
Prototype这里可以去在里面做一些交互的逻辑跳转
关于Figma的介绍到此就结束啦，下面是figma的相关文章
Figma是什么?有什么优势?一篇文章带你快速认识-CSDN博客
每天进步一点点，加油！