如意设计助手：Figma Dev Mode下生成 React 组件代码
如意设计助手：Figma Dev Mode下生成 React 组件代码
刚刚过去的端午佳节，Figma 发布 beta 版本推出 Dev Mode 的文档使用场景 ，让设计师与开发工程师们大呼绝绝子。如意设计助手已支持 Dev Mode 下查看组件代码和样式代码。
Figma Dev Mode 简介
Dev Mode 特性目前处于公测阶段，部分特性未来可能会调整。
Dev Mode 下， Figma 提供开发者导航设计文件和将设计转换为代码的所有信息，开发者与设计师共享同一个文件( 唯一事实源)，从而有效地避免上下游交接中遗漏细节信息。
Dev Mode 下用户可以：
- 从设计组件浏览和拷贝属性列表/属性值以及组件代码
- 通过比较 Frame 的版本查看距离上次访问后的文件变更
- 通过简单的交互(通常是选中图层节点)审查和导航设计文件，获取重要的图层信息
- 通过 Section 的状态快速找到已经设计完毕的区块
- 以开发人员为中心的集成高效工具( 如 Jira 、 Storybook 和 GitHub )，简化工作流程
- 给组件添加关联链接和开发资源(如代码组件的 storybook 链接 )
简而言之， Dev Mode 是专为开发人员打造的，用于快速审查和导航设计，用户可以在任何 Figma 设计文件中启用 Dev Mode 。
启用 Dev Mode
- 打开 Figma 设计文件
- 点击右上角
</>的 Dev Mode 切换按钮，也可以使用快捷键（ shift + D )
Dev Mode 下导航设计功能
Dev Mode 下，左侧边栏将已经设计完成的页面/ Frame 列表显示出来，开发者无需与设计师就设计进度沟通，通过左侧导航快速访问已完成的设计，进行相应的开发。
Dev Mode 下审查设计功能
审查面板显示设计规范和相关信息，辅助开发者更好地理解设计并将设计转化为代码。
Dev Mode 扩展
Figma 通过 Dev Mode 插件扩展 Dev Mode 能力，而 Dev Mode 插件通常可以从两个部分进行扩展：
- Plugins 面板。该面板显示最近使用的 Dev Mode 插件列表，打开具体插件后，插件界面将占满整个审查面板，这意味着整个面板完全自定义，开发者可以尽量发挥；
- Inspect 面板。Figma 提供 codegen 模式，让开发者可以扩展 Code 模块的显示。
这里不做过多讲解，下文在介绍 Dev Mode 插件开发时会具体讲到。
如意设计助手快速支持 Dev Mode
背景
在 Dev Mode 发布之前，设计师与开发工程师在流程上基本属于割裂状态，设计师交付设计稿之后，开发根据命名规则或样式值映射编写样式变量。如意设计助手以插件为桥梁，连接设计师和开发工程师，通过第三方能力来打通 Design Tokens 和组件的代码级应用。但只有获得编辑权限的用户才能在打开文档时启用插件，无形中会增加组织规模。
开发模式特性的发布令团队感到兴奋，无论是开发模式下插件界面直接嵌入审查面板还是 Figma 提供的代码生成( codegen )区块的扩展，给如意设计助手打通设计与下游的流程有着跨越式的体验影响。
实现功能与截图
设计模式下一般用于设计师进行设计交付，开发模式用于辅助实现设计。如意设计助手借助开发模式的 codegen 的能力，提供开发者快速审查组件代码和设计样式变量的能力。
如意设计助手利用开发模式下对于审查面板的接管以及代码模块的自定义扩展，使得开发者更为便捷地审查代码，目前发布上线的如意设计助手代码相关功能截图如下：
Plugins 选项卡组件代码展示
Inspect 选项卡组件代码展示
如意设计助手利用开发模式下开放的能力，让 Design to Code 的能力更自然地融入设计工具，更有效地串联起设计与开发流程。
Dev Mode 插件开发简介
与新增的 Dev Mode 相对应的是之前的 Design Mode ，Dev Mode 着力于解决开发与设计的协作痛点，两种模式有以下区别：
- 开发模式下层( Layers )会被简化，以 Sections 来组织层级
- 开发模式下每次只能选中单个节点进行操作，设计模式下允许选中多个节点
- 开发模式下，审查面板可自定义更多于开发者有用的信息，比如CSS盒模型 / 属性 / 代码 / 资源
- 开发模式下文件是只读的，开发者主要是实现设计，所以通常不会授予写权限
开发模式下的插件
和 Figma 其它产品一样，插件可以与开发模式交互。开发模式下的插件集中提供实现设计所需的所有信息，可用于审查与生成代码。
审查： 插件可以接管开发模式下的审查面板，并从设计实现所需的其他工具（例如 Jira 、GitHub 或特定于您的组织的内部 API ）中提取相关上下文。
生成代码： 插件可以使用 Figma 本身并不支持的语言和前端框架来自定义生成代码。
开发模式下的插件与非开发模式下的插件有一些关键的差异：
- 文档操作权限的差异： 前文提过开发模式下的只读特性，只读意味着插件只能使用接口读取当前页面的数据/修改一节元数据（ pluginData / relaunchData ）/响应 Figma 触发的接口事件/执行网络请求/创建新的UI（打开iframes），而不能修改文档的任何内容。
- 插件UI的差异： 如果开发模式下的插件打开一个新的iframe，那么该iframe会占满整个审查面板。这样的好处是iframe对应的UI不会遮挡画布或者开发者待实现的内容。(审查面板是可以改变大小的，因此需要保证插件的UI是响应式的)
插件( Plugins )面板
开发模式下，插件的审查功能可以在面板中显示选中图层关联的相关信息，不仅包含 Figma 默认显示的内容。当切换到插件面板时，整个右侧内容将会被插件界面铺满，截图示例如下：
下面将介绍如何定制开发模式下界面和功能。
快速开始
创建支持审查功能的插件，需要在配置文件中做如下更新：
- 设置 editorType 为 dev
- 在 capabilities 字符串数组中加入 inspect
示例如下：
{
"name": "Plugin for inspection",
"id": "000000000000000000",
"api": "1.0.0",
"main": "code.js",
"editorType": ["dev"],
"capabilities": ["inspect"]
}
组织代码时，也可以通过全局变量 figma来判断 API 调用是否允许。示例代码如下：
if (figma.editorType === "dev") {
// Read the current page and listen to API events
const numChildren = figma.currentPage.children.length
figma.notify(
`This is running in Dev Mode.
The current page has ${numChildren}`
);
} else {
figma.notify(
`This is NOT running in Dev Mode.
We can modify the file!`
);
const node = figma.createRectangle();
node.name = "I proved that I can edit files!";
}
figma.closePlugin();
注：通过在插件配置文件中添加上述的声明，即可支持在开发模式下的插件面板中显示。
审查(Inspect)面板
开发模式下的插件可用于自定义代码生成。插件可识别当前选中节点，基于与图层关联的元数据生成代码块并发送给 Figma 显示在代码面板中。需要注意的是，插件开发者无需专门为自定义的代码块新开 iframe 窗口来显示代码，在开发者模式下，自定义代码可以与 Figma 的代码一起显示在代码面板上。你可以使用插件为 Figma 本身不支持的语言或框架生成代码，或者显示用户可能想要的其他元数据，例如在代码库中导入图标或国际化字符串。
开发模式下的插件与非开发模式下的插件的区别
- 文档访问权限
前文有提过这个区别，一言以蔽之，任何使用插件 API 创建节点/删除节点/修改节点在开发模式下都是不被允许的。例如下面的代码：
// This will throw an error because we are trying to create a new node.
const node = figma.createRectangle();
// This will throw an error because we are trying to remove an existing node.
node.remove();
// This will throw an error because we are trying to update a property on a node.
node.name = "Button";
在开发模式下，上面的操作都是不被允许的， Figma 会抛出异常，阻止相应的操作。而下面这些操作，则是允许的：
// Get a node
const node = figma.getNodeById('1:12');
// Read a property
console.log(node.name)
// showUI
figma.showUI(__html__)
// listen to events
figma.on('selectionchange', () => {
// Do something
})
- 文档读取
开发模式下，只能读取当前页( page )以及被当前页( page )引用的组件节点。如果组件试图遍历整个文档（ document ），除了当前页其它页子节点均会为空。示例代码如下：
// ✅ Works the same as in Figma design
// Children of the current page
figma.currentPage.children
// findAll and findAllWithCriteria
figma.currentPage.findAll(node => node.name === 'Button')
// Getting the main component
instance.mainComponent
// Changing the page
figma.currentPage = figma.root.children[2]
// Accessing data directly on the document root
figma.root.getPluginData("plugin-data-id")
// ❌ Might work differently
// Might not search nodes on other pages
figma.root.findAll(node => node.type === 'INSTANCE')
// Document change won't fire for changes on other pages
figma.on('documentchange', (e) => {
})
// Other pages might not have children
const otherPage = figma.root.children[2]
otherPage.children.length // could be 0
- 选中逻辑变更
在开发模式下，一次只能选中一个节点，因此，插件每次也只能获取/设置一个节点。示例代码如下：
// Clear selection
figma.currentPage.selection = []
// Select a single node
const node = figma.getNodeById('1:12')
figma.currentPage.selection = [node]
skipInvisibleInstanceChildren
开发模式下，该属性值默认为 true ，这有助于确保插件有更好的性能。
响应式 iframes
前文讲过，开发模式下插件会占满整个审查面板，而审查面板大小是可变的，因此推荐设计插件中 iframe 时需遵循以下原则：
- 插件中 iframe 支持响应式
- 合理地处理溢出滚动
- iframe 的内容应围绕全宽
300px和500px进行优化
开发注意事项
向后兼容
支持 Dev Mode 虽然是新增特性，但也同样需要考虑代码的向后兼容
- 安装最新的
@figma/plugin-typings包。如果你在使用 typescript 开发 Figma 插件，建议升级或安装最新的类型包； - 使用自定义 hook 探测当前是否为 Dev Mode
import { useState } from 'react';
import { emit, on } from '../../utils/event';
import { EVENTS } from '../../consts';
export default () => {
const [detecting, setDetecting] = useState(true);
const [isDevMode, setIsDevMode] = useState<boolean | undefined>(undefined);
emit(EVENTS.DETECT_IS_DEV_MODE);
on(EVENTS.DETECT_IS_DEV_MODE_RESPONSE, (result) => {
setDetecting(false);
setIsDevMode(result === 'dev');
}, true);
// 通信中时处于第3种状态
return [detecting, isDevMode];
};
- 分离不同 mode 的功能
if (figma.mode === 'codegen') {
figma.codegen.on('generate', codegenHandler);
} else {
// design mode 下的功能
}
codegen 实践
如意设计助手在 codegen 实践中，刚开始是在插件代码块中根据组件存在图层中的数据生成相应的代码，因为代码的生成基于 babel 相关的多个包，这样会将多个比较大的库打包进 code.js ，导致触发 500KB 大小限制的问题。而插件UI部分的代码中，同样有代码生成的功能，后续采用 Figma 与插件UI（ iframe ）通信的方式，将待处理的数据发送给插件UI生成，再发回给 Figma 显示。
小结
Dev Mode 的发布对整个交付流程是巨大的冲击，开发者可以通过 Dev Mode 插件充分发挥其价值，真正做到在一个工具中打通设计与开发。如意设计工具会持续挖掘 Dev Mode 带来的巨大价值，敬请期待我们后续的特性上新。
关注我们 👇 一起成长