明知该怎么改,却只能写工单时

在 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 的首次练习。每个仓库的运行命令和环境变量不同,因此工程师应参与设置审查。

  1. 确认收到批准邮件的账户。
    本地代码库官方指南中的候补名单申请确认与测试版批准邮件不同。如果尚未收到批准邮件,需要申请候补名单并等待批准;无法通过文档直接启用该功能。
  2. 检查 macOS 版本并安装 Figma Beta 应用。
    在 Mac 的“关于本机”中,先确认是否为macOS 12 或更高版本。如果低于 12,则不满足当前官方最低要求,需要将操作系统升级至受支持版本,或准备符合条件的 Mac。随后从官方桌面应用指南下载并安装 macOS Beta 安装程序。打开 Beta 应用后,务必使用收到批准邮件的 Figma 账户登录。普通应用与 Beta 应用是独立安装项,仅安装 Beta 应用不会获得测试权限。
  3. 确认组织和仓库访问权限。
    确认相应 Figma 组织已启用 AI 功能,然后在浏览器中打开要使用的 GitHub 仓库 URL,检查账户权限。对于 GitHub 组织拥有的仓库,无论公开还是私有,都要确认组织管理员已在该组织中安装 Figma GitHub 应用,并且安装范围包含要使用的仓库。无需准备额外的终端访问或 SSH 密钥;在首次推送分支或创建 PR 时完成 Make 显示的 GitHub 身份验证即可。
  4. 在 Beta 应用中克隆仓库。
    在 Drafts 中创建 Make 文件并选择Clone a repository。指定可访问的 GitHub HTTPS 仓库 URL 和本地保存文件夹后,执行 Clone。如果克隆失败,先检查账户的仓库访问权限,以及 Figma GitHub 应用是否连接到正确的组织。
  5. 与工程师准备运行设置和所需凭据。
    先在 Make 中创建并切换到新的设置分支,然后确认当前分支名称。出现添加运行设置的提示时,点击 Run。如果设置文件已在 main 中创建,请在保留变更的情况下将其移到新的设置分支后再继续。Make 通常会在仓库根目录的.figma/make下自动生成setup、install、dev、verify和env文件。确认每个文件都符合仓库的实际运行环境,并在env中设置必需的PORT和FIGMA_MAKE_URL。
    如果应用需要 API 密钥、会话或数据库凭据,应先查看仓库的本地开发文档和现有的密钥管理方式。不要将密钥值提交到仓库中;应通过团队批准的方式将其传递给dev进程。如果所需值或加载方式不明确,请在工程师完成设置前不要进入下一步。
  6. 检查预览和 Git 状态。
    依赖安装、开发服务器启动和verify成功后,确认实际项目页面是否载入 Make 预览。如果显示其他项目或无法运行,请检查端口冲突、交互式启动命令、缺失的环境变量以及各配置文件中的失败步骤。预览出现后后台构建仍可能继续,因此请等待 30 至 60 秒,再确认 Git 变更中没有大量意外的临时文件或生成文件。此时间不是固定性能承诺,而是官方故障排除指南中的等待范围。
  7. 将已验证的设置应用到远程 main。
    在设置分支上提交已验证的.figma/make变更,推送该分支,然后创建面向 main 的设置 PR。工程师将评审并合并设置 PR。如果此过程中 Make 要求 GitHub 身份验证,请使用相应账户完成认证。远程更新完成后,将本地 main 更新到最新状态。设置需要进入 main,后续分支和其他用户才能继承相同的运行环境。
  8. 从更新后的 main 创建无障碍修复分支。
    以最新 main 为基础创建并切换到单独的工作分支。首次练习应限制为一个能在共享组件内完成、且变更文件和受影响页面可被狭窄审查的项目。
  9. 指定要修复的实际页面后,发送示例输入。
    在预览中打开含有日期选择器的页面,记录准确路径和元素名称。将下面两个方括号替换为这些值后输入。如果没有日期选择器,请指定实际存在的小型 UI 问题及其路径。这句话不是在 MOSF 中已验证执行结果的命令,而是编辑部依据官方案例的评审项目编写的首次输入示例。

请处理预览中[实际页面路径]里的[日期选择器名称或位置]。如果找不到指定元素,不要猜测并修改;请确认其位置。先确认找到的元素是否是也在其他页面复用的共享组件。检查屏幕文本是否与屏幕阅读器标签一致,以及键盘焦点是否能到达 CTA。概述要变更的文件和受影响页面后,在当前工作分支上创建一个范围较小的修复方案。

  1. 检查变更文件和实际预览。
    查看当前分支、生成的本地提交和修改文件,然后在预览中打开受影响页面。如果未请求的文件也发生变更,或变更扩散到共享组件之外,请在创建 PR 前缩小范围。
  2. 推送工作分支并创建 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