Figma Code Connect 是 Figma 在其开发者模式（Dev Mode）中推出的一项革命性功能。它的核心目标是弥合设计系统和代码库之间的鸿沟。
简单来说：以前在 Figma 里，前端开发者点击一个按钮组件，Figma 只能自动生成一堆毫无灵魂的 CSS 或基础 HTML 代码（比如 div 加各种样式）；而有了 Code Connect，开发者点击同一个按钮，Figma 会直接显示你们团队代码库中真实的、可以直接复制粘贴的组件代码（例如 <Button variant="primary" size="large">提交</Button>）。
一、 Figma Code Connect 到底是什么？
- 真实代码的映射器：它不是一个“设计转代码（Design-to-Code）”的 AI 生成器，而是一个映射工具。它将 Figma 中的设计组件与你 GitHub/GitLab 代码库中的真实前端组件（React, Vue, iOS, Android 等）进行一对一绑定。
- 属性级的精准对接：它可以将 Figma 组件的属性（如 Variant、Boolean、Text）映射到代码组件的 Props 上。
- 开发者模式的增强：它存在于 Figma Dev Mode 的检查器中，前端在看设计稿时，看到的不再是标注，而是组件文档和真实代码。
(注：该功能目前主要面向 Figma 的 Organization 和 Enterprise 企业版用户)
二、 Code Connect 怎么与前端协作？（工作流详解）
要让 Code Connect 运转起来，需要设计师和前端开发者的紧密配合。以下是标准的协作流程：
第 1 步：设计师在 Figma 中规范化组件
- 设计师在 Figma 中建立设计系统（Design System）。
- 规范地定义组件的属性（Properties）。例如，创建一个「按钮」组件，包含属性：
Type: Primary / SecondarySize: Large / SmallState: Default / Hover / DisabledLabel: "按钮文本"
第 2 步：前端在代码库中实现对应组件
- 前端开发在本地代码库（如 React 项目）中，根据设计规范写好基础的
<Button />组件，并定义好对应的 Props。
第 3 步：前端编写 Code Connect 映射文件（核心协作点）
前端需要在项目中安装 Figma 的 CLI 工具（@figma/code-connect），并编写一个映射文件（通常以 .figma.tsx 结尾）。
代码示例（以 React 为例）：
import figma from '@figma/code-connect';
import { Button } from './components/Button';// 1. 填入该组件在 Figma 中的真实链接
figma.connect(Button, 'https://www.figma.com/design/xxxx/Button', {// 2. 将 Figma 的属性映射到代码的 Propsprops: {// 读取 Figma 中的 Type 属性，映射给 variant propvariant: figma.enum('Type', {Primary: 'primary',Secondary: 'secondary',}),// 读取 Figma 中的 Size 属性size: figma.enum('Size', {Large: 'lg',Small: 'sm',}),// 读取 Figma 中的文字内容children: figma.string('Label'), },// 3. 定义在 Figma 中展示的代码片段模板example: (props) => (<Button variant={props.variant} size={props.size}>{props.children}</Button>),
});
第 4 步：发布代码片段到 Figma
- 前端在终端运行命令（如
npx figma-code-connect），将这些映射关系推送到 Figma 服务器。 - 这一步可以集成到 CI/CD 流程中，只要代码组件有更新，自动同步到 Figma。
第 5 步：在设计稿中直接“拿来主义”（日常消费）
- 当前端开发拿到一个新的业务页面设计稿时，开启 Figma Dev Mode。
- 点击页面上的一个大号的主按钮，Figma 右侧面板不再显示
background-color: blue; padding: 16px;，而是直接显示：<Button variant="primary" size="lg">立即提交 </Button> - 前端直接一键 Copy 代码，粘贴到业务代码中。开发完成！
三、 支持的技术栈
Code Connect 的包容性很强，目前官方及社区支持：
- Web 端：React, HTML (Web Components), Vue, Angular 等。
- 移动端：iOS (SwiftUI), Android (Jetpack Compose)。
- 第三方集成：它与 Storybook 结合得非常好，可以直接在 Figma 里预览 Storybook 的交互组件。
四、 这种协作模式带来的好处
- 消除“造轮子”：前端再也不会因为没认出某个组件，而在业务代码里重新写一套 CSS。只要设计稿用的是组件库的组件，前端直接拿到组件化代码。
- 强迫设计与代码对齐：如果设计师在 Figma 里乱改了一个按钮的颜色（没有使用规范 Variant），Code Connect 就无法生成正确的组件代码，这倒逼设计系统和代码系统保持绝对一致（Single Source of Truth）。
- 十倍提升还原度与开发速度：前端从“看图写样式”变成了“拼图游戏”，只需要复制粘贴组件代码，把精力放在业务逻辑和接口对接上。
- 属性自动推导：设计师在 Figma 里改了按钮文字为“登录”，前端在 Dev Mode 里复制出来的代码
<Button>登录</Button>文字也是跟着变的。
总结：
Figma Code Connect 让设计师依然在画板上自由创作，但给前端开发者提供了一个“API 化的设计稿”。它本质上是团队 Design System（设计系统）在前端开发环节的最后一公里交付工具。