Figma 开发者模式操作指南-开发篇
本篇文章将从开发人员的视角介绍 Figma 开发模式的操作要点，旨在帮助开发人员们更加顺畅、高效的使用
引言
Figma 作为一款集原型、设计、交付等于一体的设计协作平台，目前在同类软件工具中全球用户量第一。无论是设计师、开发者还是产品经理，Figma都提供了强大的功能，可以使团队更加高效地协作。
2023年6月，Figma 发布了全新的 Dev mode 开发者模式，为开发人员提供了更为便捷的浏览设计文件和将设计转化为代码的功能。这一功能进一步巩固了 Figma 在设计和开发协作领域的领先地位，并为开发人员提供了一个更加无缝、高效的工作流程。
接下来这篇文章将从开发人员的视角深入介绍 Figma 开发模式的操作要点，帮助开发人员们更加顺畅、高效的使用。
一、打开链接
首先，开发人员会从设计师手中获得一个设计文件链接，推荐使用Chrome（谷歌浏览器）打开 Figma 链接，一般情况下，一个项目对应一个 Figma 链接，如果经常要打开，可以把这个文件链接进行收藏，方便下次找到。
二、账号登录
1、如果只需要预览设计图，看大效果，不需要查看设计图标注和导出切图，那么可以不用登录。按住 Ctrl+鼠标滚轮 可以缩放网页，按住空格可以拖拽画布。
2、如果需要查看设计图标注和导出切图，那么就必须要登录账号之后才有权限。Figma 可以通过 Google 账号直接登录，也可以用自己的邮箱注册一个账号登录。
下面这个便是登录之后的界面，提示登录的提醒条会消失，画布中未设置 “Ready for dev” 时默认展示设计模式。
三、进入开发模式
开发模式是以开发人员为中心的界面，用于检查和导航设计。可以在任何 Figma 设计文件中访问开发模式，设计模式和开发模式可随意切换，切换方式：
- 打开 Figma 设计文件。
- 点击开发模式在页面顶部切换或使用键盘快捷键【 Shift + D 】。
注：当打开有设置为“Ready for dev”的 Figma 设计文件时，会自动进入开发模式。
“Ready for dev”下的开发模式界面
1、图层导航面板
在开发模式下的图层面板，可看到：
A、标记为“Ready for dev /准备好开发”的分区，查看哪些画框已准备好开发
B、查看每个屏幕的缩略图及最后一次编辑画框的时间
C、导航 Frame 和图层，画布上未标记为就绪的对象将折叠显示
2、检查面板
A、查看图层名称和类型
所选图层的名称及其图层类型（组件、实例、框架、文本等）显示在检查面板的顶部，还可查看图层上次更新的时间。
B、比较设计变更
如果自上次查看文件后已进行更改， 则对比更改 将出现在检查面板中的图层信息旁边。点击“ Compare changes”（比较更改） 按钮可打开对话框，查看当前版本与设计的先前版本的比较。
打开的对话框中，左侧面板中可以选择要比较的 Frame 版本。可以并排查看更改，或以叠加的方式查看更改，以确保这些较小的编辑突出。
在底部，可以看到有关属性和值的更改的详细信息，以便更精确地了解更改的具体内容。
C、Component 组件
变体和组件属性使设计师能够快速轻松地在不同的组件变种之间切换。但如果没有编辑权限，检查面板想完全了解已使用的组件范围可能会有些棘手。所以figma在新的开发模式中添加了 Component playground （组件游乐场？沙盘？）功能，可以在原始设计不变的情况下，测试各种变量所显示的前端不同情况。
点击按钮打开对话框，右侧可以查看它们在任何变种中的样式
以上操作都不会影响原始设计稿！
D、为开发者添加外部链接和资源
开发资源是与画布上的对象关联的链接，适用于添加任何可以帮助开发人员实施设计的文档，如源代码或问题反馈。
- 在开发模式下显示。
- 可以由文件的查看者和编辑者进行编辑。
- 如果添加到主要组件，将始终与该组件的实例一起显示。
- 如果添加到实例，只会与该实例一起显示。
- 只能是链接。
- 可以通过插件添加
E、更快地开始编码
在开发模式下，单击画布上的任何对象都可在检查面板中查看代码部分。根据所选内容，显示盒子模型、自动生成元素的代码片段。
-切换语言
代码区右上角可切换代码类型及对应的尺寸单位，语言和单位设置将应用于所有在画布上选择的对象生成的代码片段。还可使用插件向开发模式添加额外的语言支持。
-代码中的变量
变量是一种标记在设计中被重复使用的值的一种方式。设计师在 Figma 本地创建变量后，开发模式下的元素即可显示变量，因此开发人员可以引用这些变量名而不是原始值。这些变量会直接显示在画布上，也会出现在生成的代码中。
F、下载资源
开发模式可以自动检测图标并将其作为开发人员的可下载资源呈现。如果要检查图标中包含的单个矢量图层，可以关闭自动图标检测：
- 点击工具栏中的主菜单
- 将鼠标悬停在下拉菜单中查看
- 取消选择自动检测图标
资源还允许您下载 GIF 图像和 MP4 视频节点。
G、查看元素样式
查看应用于所选图层的样式和变量。
H、导出切图
- 批量导出图标/切图
一般情况下，设计师会把需要导出的图标/切图汇总到一个区域，只需要在检查模式下，鼠标框选对应的内容，然后点击 Export（导出），选择对应的尺寸，2x 3x 表示二倍图、三倍图的意思，再选择对应的格式：SVG、PNG等等，即可打包导出。
建议使用SVG格式，可以保证图标缩放不会模糊，如果需要用PNG格式，可以导出 x3 三倍图的尺寸然后缩放至对应的大小，以确保图标清晰。如果需要上传到 iconfont 生成字体图标，可和设计师沟通。
选择需要切图的多个组，按回车即可选中组内全部元素，点击添加切图再导出即可
- 设计图内单独导出图标/切图
有时候我们需要导出的元素没有在单独的图标/切图画板看到，我们也能单独导出设计图上的任何元素。
首先直接选中的时候，会默认选中最底层的图层，例如下图中，从左侧图层面板能看到绘制的多个图层，按下shift+回车可选中上级图层，直到选中整个切图为止，右侧底部点击导出即可。
只切一个元素时支持预览。
- 导出整个界面
当我们需要导出这一整个界面时，只需要点击画框左上角标题，或者从图层面板选中要导出的Frame，然后再点 Export 即可导出这一整个完整的界面。
四、插件
开发模式的插件有助于确保开发人员可以在一个地方获取所有他们实施设计所需的相关信息，还可用于检查和代码生成。
- 检查：插件可以接管检查面板，并获取设计实施所需的上下文和信息。
- 代码生成：插件可以自定义Figma的代码生成，使用Figma本身不原生支持的语言和前端框架。
官方插件推荐
下载地址：https://www.figma.com/community/plugin/1220802563996996107
下载地址：https://www.figma.com/community/plugin/1220802563996996107
下载地址：https://www.figma.com/community/plugin/1220802563996996107
Figma for VS Code
借助Figma for VS Code扩展（测试版），您可以在代码编辑器中的开发环境中直接查看您的设计文件。该扩展允许您在不离开Visual Studio Code的情况下执行以下操作：
- 检查Figma文件
- 接收通知
- 从设计中获取代码建议
下载地址： https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension
四、文件管理
当同时在做好几个项目的设计开发，那是不是要同时收藏好多个链接呢？答案是不需要，点击左上角的图标，然后点击“Back to files”（返回文件列表）
回到文件列表后，在默认选中的“Recents（最近）”中可以看到我们最近打开过的所有的文件，所以把这个链接收藏后，便可以不用每个设计文件链接都收藏了。
五、评论功能
当前界面默认为检查模式，团队成员可以通过点击评论按钮进入评论模式，从而在设计稿上进行评论沟通，右上角可筛选查看以往评论。进入评论模式后在任意处点击即可评论留言，支持拖动评论位置、编辑、删除评论。
快捷键
进入评论模式：c，点击任意地方添加评论
取消评论：esc
退出评论模式切换为检查模式：v
六、总结
开发模式目前处于公开测试阶段，到 2023 年底，所有人都可以免费使用。从 2024 年开始，访问开发模式将需要按席位付费。
使用开发模式可以：
- 查看和复制设计组件中的属性、值和代码
- 通过比较页面版本来查看自上次查看文件以来发生了什么变化
- 通过简单的交互来检查和导航设计文件，显示重要的图层信息
- 通过部分状态快速查找准备开发的设计
- 通过以开发人员为中心的集成（例如 Jira、Storybook 和 GitHub）简化您的工作流程
- 向组件添加相关链接和开发者资源
1、免费模式权限
- 查看测量值和属性值
- 复制 CSS、iOS 和 Android 代码
- 导出资产
- 对文件进行评论并通过光标聊天进行协作
2、付费模式权限
除了免费模式可以执行的操作之外，开发模式用户还可以：
- 访问开发模式以导航和检查文件
- 跟踪设计状态和变更
- 自定义代码输出
- 将 Figma 与其工具包集成
- 将设计文件与其代码库同步
以上内容就是从开发者的角度整理的 Figma 开发者模式的操作指南。本系列文章下篇将从设计师角度分享如何使用 Figma 今年发布的 Dev Mode 功能，实现设计师更加无缝、高效的运用以上功能交付开发，从而提高团队协作效率。
参考来源
https://help.figma.com/hc/en-us/articles/15023124644247
https://www.figma.com/community/file/1234941143610339388/dev-mode-playground
https://www.youtube.com/watch?v=__ABPkb0aF8
设计师波波 Bobby：Figma 研发（前端）人员使用指南
Figma for VS Code - Visual Studio Marketplace
