1.1 开启Figma之旅
Figma是一款实时协作的设计工具，我们可以通过浏览器或Figma客户端与团队中的人员一起进行在线设计，设计文件会实时储存在云服务器中。即使没有网络，我们也可以使用Figma的大部分功能。当网络正常连接后，所有的改动均会同步到云服务器。
Figma共有5级结构，分别如下。
①Organization（组织），需单独联系Figma销售人员开通。
②Teams（团队），较为常用。
③Projects（项目）。
④Files（文件）。
⑤Pages（页面）。
Figma具有多层结构、多人实时协作和权限控制等特点，可提升用户的协作效率。
1.1.1 Figma介绍
1.Figma是什么
Figma是基于浏览器的在线协作界面设计工具，可以用来进行原型设计、标注查看、交互演示等，越来越多的UI/UX设计师和设计团队开始使用Figma，如图1-1所示。
图1-1 多人在线编辑
2.Figma的特点
支持多个平台：可以在Windows、macOS、Linux、Chrome OS上使用Figma。
自动保存：实时在线保存设计文件。
唯一来源：每个设计文件对应一个链接。
支持历史版本恢复：免费版可保存30天，付费版无时间限制。
安全：Figma所有的基础架构都分布在3个AWS数据中心，若其中任何一个数据中心发生故障，其他数据中心仍然可以继续工作。
3.Figma对软硬件的要求
计算机设备：Figma使用WebGL（Web图形库）来进行渲染，它对图形的要求非常低，可以在大多数浏览器上完美运行，所以大部分的计算机都适合。
移动设备：可以在手机或平板电脑上访问Figma文件的“仅查看”版本。
1.1.2 创建Figma账户
任何人都可以创建免费的Figma账户。
1.通过电子邮箱地址注册
步骤01 访问Figma官网，单击右上角的“Sign up”按钮，如图1-2所示。
｜图1-2 Figma官网
步骤02 在弹出的页面中输入电子邮箱地址和密码，如图1-3和图1-4所示。
｜图1-3 通过电子邮箱注册Figma
｜图1-4 电子邮箱地址和密码输入完成
步骤03 填写完注册信息后单击“Create Account”按钮进行提交，如图1-5所示。
图1-5 提交Figma注册信息
2.通过登录谷歌账户（Google SSO）注册
步骤01 访问Figma官网，单击右上角的“Sign up”按钮。
步骤02 单击页面顶部的“Sign up with Google”按钮。
步骤03 如果已经登录谷歌账户，则会弹出确认授权信息窗口，否则会提示登录谷歌账户。
步骤04 授权后，便可以输入密码，你的谷歌邮箱将收到一份授权邮件。
通过谷歌账户注册的账户无法在Figma中修改电子邮箱地址和密码，如果要修改电子邮箱地址或密码，则需要将原有账户与Figma解绑。
1.1.3 登录Figma
支持Figma登录的应用有：Figma桌面应用、Figma网页版、iOS或Android设备的Figma Mirror App。
你可以通过电子邮箱地址、谷歌账户和SAML SSO来登录Figma。
1.通过电子邮箱地址登录
步骤01 打开Figma官网，单击右上角的“Log in”按钮。
步骤02 在打开的页面中输入已注册的电子邮箱地址和对应密码。
步骤03 单击“Log in”按钮。
2.通过谷歌账户登录
步骤01 打开Figma官网，单击右上角的“Log in”按钮。
步骤02 在弹出的窗口中单击顶部的“Continue with Google”按钮。
步骤03 如果你的谷歌账户已在浏览器上登录，同意弹出的确认授权信息即可登录成功；否则，输入“Google邮箱地址或电话”和“密码”进行授权，然后单击“Next”按钮进行登录。
如需在浏览器中使用Figma，建议将浏览器的缩放比例设置为100%，保持浏览器为最新版本，并启用本地字库（可以在本书“2.6.4 启用本地字体”小节了解开启方法）。
3.通过SAML SSO登录
通过SAML SSO登录Figma的方法与前两种登录方法类似，在此不再赘述。
1.1.4 下载与安装Figma
•macOS：版本不可低于10.11（OS X El Capitan）。
•Windows：64位，Windows 8及以上版本的操作系统。
1.下载
步骤01 打开Figma官网，展开“Products”（产品）下拉菜单，单击“Downloads”（下载）链接进入下载页面，如图1-6所示。
步骤02 根据自己计算机的系统单击相应链接进行下载，如图1-7所示。
图1-6 Figma下载入口
图1-7 下载Figma桌面应用
2.安装
（1）在macOS中安装
步骤01 在下载页面中单击“Desktop App for macOS”（适用于macOS的桌面应用）链接，将文件下载到本地，下载完成后双击Figma.zip进行解压。
步骤02 将Figma从下载文件夹移至应用程序文件夹，如图1-8所示。
图1-8 安装macOS应用程序
步骤03 从下载文件夹中删除Figma应用程序的压缩包Figma.zip。
步骤04 在应用程序列表中打开Figma，如图1-9所示。
图1-9 启动Figma
（2）在Windows中安装
步骤01 在下载页面中单击“Desktop App for Windows”（适用于Windows的桌面应用）链接，将文件下载到本地，下载完成后运行Figma Setup.exe并按提示进行安装。
步骤02 从桌面或下载文件夹中删除Figma安装包。
步骤03 在桌面上打开Figma应用程序。
1.1.5 给手机安装Figma Mirror App
iOS：运行版本不可低于11.0.1。
Android：运行版本不可低于Android 7.0。
Figma Mirror App：必须使用Figma账户登录后才可以使用。
Figma Mirror App可在手机上预览设计好的文件，按自己手机尺寸设计的页面预览体验会更好，如图1-10所示。
｜图1-10 手机浏览器与Figma Mirror App的预览效果对比
你可以在上面提到的Figma下载页面中下载适用于iOS或Android的Figma Mirror App，也可以在App Store或Google Play Store中下载。
1.1.6 使用Figma Mirror App预览设计文件和原型
1.Figma Mirror App预览
为了查看产品开发完成后的最终效果，可以使用Figma Mirror App进行预览。
要使用Figma Mirror App，需同时登录桌面浏览器或桌面应用程序和Figma Mirror App。Figma Mirror App可以实时显示用户当前在桌面浏览器或桌面应用程序上选择的画框，如图1-11所示。
｜图1-11 预览应用程序时选择的框架
步骤01 在Figma桌面应用程序或桌面浏览器中登录Figma账户。
步骤02 使用该账户在手机上登录Figma Mirror App。
步骤03 在桌面应用程序的设计文件中选择要查看的画框。
步骤04 Figma Mirror App中将会实时显示所选的画框。
2.浏览器预览
步骤01 在Figma桌面应用程序或桌面浏览器中登录Figma账户。
步骤02 打开要预览的设计文件。
步骤03 用手机浏览器访问https://www.figma.com/mirror，并登录你的Figma账户。
步骤04 在设计文件中选择要查看的画框。
步骤05 手机浏览器中会实时显示所选的画框。
3.查看原型
在查看原型之前，需要提前在原型中添加原型链接。
如果你不是很了解Figma中的原型，可以阅读本书的“3.3.2基础原型”和“3.3.7构建完善的交互原型”。
步骤01 使用相同账户登录Figma和Figma Mirror App。
步骤02 在Figma桌面应用程序中打开要预览的文件。
步骤03 选择原型的第一个画框，如图1-12所示。
图1-12 选择第一个画框
步骤04 Figma Mirror App中将会同步显示用户在Figma中选择的画框，如图1-13所示。
图1-13 Figma Mirror App中的效果
步骤05 可以在Figma Mirror App中按照在Figma应用程序中创建的原型链接进行交互操作。
使用Figma Mirror App预览设计文件时，设计文件的显示页面将会等比缩放为设备尺寸。
使用浏览器预览时，浏览器的地址栏和底部导航栏将会在手机屏幕上显示出来，所以用这种方法不能体验到真实的使用效果。可以用此方法查看H5的设计。