Dev Mode（开发模式）入门 #

依据官方文档整理：Guide to Dev Mode in Figma (opens new window)。官方标明适用于 Professional、Education、Organization、Government、Enterprise 等方案；具体席位与权限以帮助中心为准。

Dev Mode 是面向开发者的工作区，用于检视设计、查看属性与生成代码、下载资源、对比变更，并管理交付状态。与旧版「仅查看时的代码面板」相比，Dev Mode 提供更完整的交付工具链。

快捷键：Shift + D 进入或退出。也可在工具栏切换模式。见 快捷键速查。

旧文提示：本站 与工程师协作 仍描述早期「代码」选项卡流程，阅读时请以本页与官方 Dev Mode 文档为准。

进入与导航 #

  1. 打开任意 Figma Design 文件。
  2. 点击工具栏中的 Dev Mode 开关，或按 Shift + D。
  3. 通过 Dev Mode 链接打开文件时，可能会直接进入 Dev Mode。

左侧边栏可聚焦 Ready for development 的内容：页面上若有已标记对象，会显示 Dev Mode 相关提示。Frame 可显示最近编辑时间；选中顶层 Frame 后，导航会切换为该 Frame 内的图层面板。

在 Design 模式中可用 Section 组织相关内容并标记交付；Dev Mode 会优先展示 Section 内内容。

检视（Inspect） #

右侧检视面板通常包括：

  • 图层名称、类型与最近更新时间
  • Compare changes：对比 Frame 历史版本；实例可对比主组件
  • 为图层添加 GitHub / Jira / Storybook / VS Code 等外部资源链接（可随组件传播到实例）
  • 组件元数据、变体信息；Explore component behavior 打开组件 playground，在不改稿的前提下试属性与变量 Mode
  • Code Connect：对已映射的设计系统组件显示真实代码片段（Professional / Organization / Enterprise 等，见官方）
  • 图层属性：在 Code 与 List 间切换；可选语言与 codegen 插件
  • 已应用的 Styles / Variables
  • 资源下载与 Export 设置（PNG、JPG、SVG、PDF 等）

注解与交付状态 #

设计师可添加注解与尺寸标注，突出关键属性与间距。使用 Mark as ready for dev 将 Frame、组件、实例或 Section 标为可开发。Organization / Enterprise 等还可使用 Completed 等状态（见官方 Dev Mode statuses and notifications）。

订阅过该文件 Dev Mode 的 Full / Dev 席位用户，可在设计被重新标记为 ready for dev 时收到通知。

插件与 VS Code #

Dev Mode 的 Plugins 选项卡可使用面向开发的集成（如 Jira、Storybook、GitHub，以及自定义 codegen）。Figma for VS Code 扩展可在编辑器内导航与检视设计、跟进评论与变更。详见官方 Dev Mode 指南中的相应章节。

相关链接 #

整理自 Figma Help Center，更新于 2026-11-02（Asia/Shanghai）。

Figma AI 与 Make 入门