明知该怎么改,却只能写工单时
在 Figma 的虚拟博物馆案例中,合成人格的反馈暴露了低对比度日期选择器和不够醒目的 CTA 等问题。随后团队评审还明确了让屏幕文本与屏幕阅读器标签保持一致、使键盘焦点能够到达 CTA 等要求。即使问题和修复方向如此明确,一旦交给工单,实施顺序仍取决于开发待办列表。看似很小的改动尤其容易被功能开发和故障处理排到后面。
Figma 发布的 Workflow Lab 用另一种方式改变了这种等待。设计师在现有代码库中找到共享组件,在独立分支上修改,然后提出 GitHub PR。工程师仍保留评审和合并权限。这是一种将请求实现的工单变成可评审代码变更的流程。
不过,不应将这个故事理解为真实客户成果。MOSF 是 Figma 设定的虚拟博物馆,Workflow Lab 同样也是示例工作流。原文中“原本会延到整个季度的工作一天内就完成部署”的场景,也不是公开样本和测量方法的生产力指标,而是案例中的叙事。
修复共享组件,而不是一个页面的颜色
这个示例值得借鉴的发现是修复范围,而非速度。出现问题的日期选择器是一个共享组件,在展览页面、活动日历和注册流程三个地方复用。由于设计师确认了当前代码中的关系,因此可以提议修改组件本身,而不是只修复一个页面。
团队评审的无障碍意图也很具体:屏幕文本与屏幕阅读器标签的一致性、日期选择器的aria-label、通往 CTA 的焦点顺序,以及没有搜索结果时要朗读的空状态消息。设计师提出 PR 后,工程师评审、批准并合并了代码。
首次应用的目标应当小且边界清晰。适合选择能在现有共享组件内解决,并让评审者在较小范围内核查变更文件和受影响页面的项目。标签、对比度、焦点顺序和空状态提示都是候选项。需要重新设计状态管理或架构的问题,超出了该示例展示的范围。
这是封闭测试,不是普通的 GitHub 推送
可克隆现有仓库并创建分支和 PR 的Make in your local codebase,是面向有限用户的免费封闭测试版。它需要收到批准邮件的 Figma 账户、运行 macOS 12 或更高版本的 Mac、Mac 版 Figma Beta 桌面应用、已启用 AI 功能的 Figma 组织,以及可访问的 Git 仓库。仅登记候补名单并不保证能够参与。
普通 Figma Make 的Push to GitHub不是替代方案。该功能会将结果推送到 Make 新建的专用仓库,用户无法选择已经在运营的产品仓库,也无法管理分支。克隆现有仓库并创建工作分支和 PR 的流程属于本地代码库测试版。
| 类别 | 普通 Push to GitHub | 本地代码库测试版 |
|---|---|---|
| 起点 | Make 创建的代码和专用仓库 | 拥有访问权限的现有 Git 仓库 |
| Git 操作 | 推送到同一仓库的默认分支 | 克隆仓库、本地分支、推送和 PR |
| 必要条件 | 普通 Make 按账户提供的使用条件 | 已批准账户、macOS 12 或更高版本、Mac 版 Beta 应用等测试版条件 |
第一个 PR 从确认操作系统和获批账户开始
以下步骤并不保证复现 MOSF 的结果,而是根据当前官方文档,将一项小型无障碍变更提交到 PR 的首次练习。每个仓库的运行命令和环境变量不同,因此工程师应参与设置审查。
- 确认收到批准邮件的账户。
本地代码库官方指南中的候补名单申请确认与测试版批准邮件不同。如果尚未收到批准邮件,需要申请候补名单并等待批准;无法通过文档直接启用该功能。 - 检查 macOS 版本并安装 Figma Beta 应用。
在 Mac 的“关于本机”中,先确认是否为macOS 12 或更高版本。如果低于 12,则不满足当前官方最低要求,需要将操作系统升级至受支持版本,或准备符合条件的 Mac。随后从官方桌面应用指南下载并安装 macOS Beta 安装程序。打开 Beta 应用后,务必使用收到批准邮件的 Figma 账户登录。普通应用与 Beta 应用是独立安装项,仅安装 Beta 应用不会获得测试权限。 - 确认组织和仓库访问权限。
确认相应 Figma 组织已启用 AI 功能,然后在浏览器中打开要使用的 GitHub 仓库 URL,检查账户权限。对于 GitHub 组织拥有的仓库,无论公开还是私有,都要确认组织管理员已在该组织中安装 Figma GitHub 应用,并且安装范围包含要使用的仓库。无需准备额外的终端访问或 SSH 密钥;在首次推送分支或创建 PR 时完成 Make 显示的 GitHub 身份验证即可。 - 在 Beta 应用中克隆仓库。
在 Drafts 中创建 Make 文件并选择Clone a repository。指定可访问的 GitHub HTTPS 仓库 URL 和本地保存文件夹后,执行 Clone。如果克隆失败,先检查账户的仓库访问权限,以及 Figma GitHub 应用是否连接到正确的组织。 - 与工程师准备运行设置和所需凭据。
先在 Make 中创建并切换到新的设置分支,然后确认当前分支名称。出现添加运行设置的提示时,点击 Run。如果设置文件已在 main 中创建,请在保留变更的情况下将其移到新的设置分支后再继续。Make 通常会在仓库根目录的.figma/make下自动生成setup、install、dev、verify和env文件。确认每个文件都符合仓库的实际运行环境,并在env中设置必需的PORT和FIGMA_MAKE_URL。
如果应用需要 API 密钥、会话或数据库凭据,应先查看仓库的本地开发文档和现有的密钥管理方式。不要将密钥值提交到仓库中;应通过团队批准的方式将其传递给dev进程。如果所需值或加载方式不明确,请在工程师完成设置前不要进入下一步。 - 检查预览和 Git 状态。
依赖安装、开发服务器启动和verify成功后,确认实际项目页面是否载入 Make 预览。如果显示其他项目或无法运行,请检查端口冲突、交互式启动命令、缺失的环境变量以及各配置文件中的失败步骤。预览出现后后台构建仍可能继续,因此请等待 30 至 60 秒,再确认 Git 变更中没有大量意外的临时文件或生成文件。此时间不是固定性能承诺,而是官方故障排除指南中的等待范围。 - 将已验证的设置应用到远程 main。
在设置分支上提交已验证的.figma/make变更,推送该分支,然后创建面向 main 的设置 PR。工程师将评审并合并设置 PR。如果此过程中 Make 要求 GitHub 身份验证,请使用相应账户完成认证。远程更新完成后,将本地 main 更新到最新状态。设置需要进入 main,后续分支和其他用户才能继承相同的运行环境。 - 从更新后的 main 创建无障碍修复分支。
以最新 main 为基础创建并切换到单独的工作分支。首次练习应限制为一个能在共享组件内完成、且变更文件和受影响页面可被狭窄审查的项目。 - 指定要修复的实际页面后,发送示例输入。
在预览中打开含有日期选择器的页面,记录准确路径和元素名称。将下面两个方括号替换为这些值后输入。如果没有日期选择器,请指定实际存在的小型 UI 问题及其路径。这句话不是在 MOSF 中已验证执行结果的命令,而是编辑部依据官方案例的评审项目编写的首次输入示例。
请处理预览中[实际页面路径]里的[日期选择器名称或位置]。如果找不到指定元素,不要猜测并修改;请确认其位置。先确认找到的元素是否是也在其他页面复用的共享组件。检查屏幕文本是否与屏幕阅读器标签一致,以及键盘焦点是否能到达 CTA。概述要变更的文件和受影响页面后,在当前工作分支上创建一个范围较小的修复方案。
- 检查变更文件和实际预览。
查看当前分支、生成的本地提交和修改文件,然后在预览中打开受影响页面。如果未请求的文件也发生变更,或变更扩散到共享组件之外,请在创建 PR 前缩小范围。 - 推送工作分支并创建 PR。
如果首次推送分支或创建 PR 时出现 GitHub 身份验证页面,请完成认证。如果由于企业受限的认证浏览器或硬件密钥而无法在 Make 中完成认证,则需要向组织管理员确认受支持的认证路径。
首次成功的标准不是自动部署。只要实际仓库的应用能在预览中运行,独立分支上产生预期范围的提交,并且已创建 GitHub PR 供工程师审查变更文件、受影响页面和无障碍意图,就已经足够。
PR 是无障碍验证的起点
MOSF 示例是否通过了实际的纯键盘导航、特定屏幕阅读器或自动化 WCAG 检查,尚未公开。仅凭代码中有适当属性,或合成人格发现了问题,并不能证明真实可用性。
请另外设定合并条件。通过工程师代码审查和现有 CI 后,使用纯键盘操作变更位置,并用团队支持的屏幕阅读器进行朗读测试。若是共享组件,还应一并检查具有代表性的使用页面。
这种方式的实际价值不在于设计师取代工程师。设计师将意图清晰的小型 UI 修复提议为可执行的变更,工程师则负责运行环境、代码结构、质量标准和合并决定。如果无障碍工单长期积压在团队中,与其一次性扩大权限,不如先在这些边界内把一个小改动送到 PR。
如果想进一步深入
Workflow Lab: Deploying Designs Directly with Figma Make可查看完整叙事,包括 MOSF 是虚拟样本、共享日期选择器、无障碍评审项目,以及工程师的批准和合并。figma.com
Make in your local codebase是用于了解批准条件、支持的仓库范围、将设置应用到 main、GitHub 应用以及首次推送和 PR 认证流程的官方起始文档。help.figma.com
Make in your local codebase: Setup, gotchas, and troubleshooting适合在自动设置失败,或因开发服务器、环境变量、端口或后台构建导致预览无法正常打开时查阅。help.figma.com



