Gestalt 团队告诉我们他们如何使用 Figma 的 REST API 创建 FigStats，这是一个用于可视化组件使用情况的仪表板。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px; margin-top: 0px;">本文最初发表在DesignSystems.com上。前往那里，了解设计系统构建者讲述的更多关于设计系统的故事，并继续阅读设计技术专家 Ravi Lingineni 的讲述，了解 Pinterest 的设计系统团队如何使用 Figma 的 REST API 衡量采用情况。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">我是一名设计技术专家，我的大部分背景是工程和产品管理。如果您熟悉这两个领域，您可能会知道它们对衡量影响力的重视。从代码速度到活跃用户和参与度计数，一切都有一个数字。这个数字——无论它是什么——都很重要，因为它为我们提供了一种共同的语言和一致的指标，表明朝着正确的方向前进意味着什么。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">为 Pinterest 的设计系统Gestalt确定良好的指标也没有什么不同。对于我们的团队来说，了解我们提供了多少价值，对于我们的领导层来说，了解投资是否得到回报，这一点非常重要。
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">
figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/ca2b89683bbdbf8a8257a50de98fc6b44de52cee-1600x1587.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/ca2b89683bbdbf8a8257a50de98fc6b44de52cee-1600x1587.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/ca2b89683bbdbf8a8257a50de98fc6b44de52cee-1600x1587.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/ca2b89683bbdbf8a8257a50de98fc6b44de52cee-1600x1587.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/ca2b89683bbdbf8a8257a50de98fc6b44de52cee-1600x1587.png?w=804&q=75&fit=max&auto=format&dpr=2 1600w" loading="lazy" alt="12 个设计系统组件的网格" width="804" height="797" style="box-sizing: inherit; border-style: none; display: block; height: 797.415px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">格式塔设计系统中的一些组件。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">在过去的一年里，我在 Pinterest 一直在研究格式塔的一个新指标，称为“设计采用”。作为一个设计系统团队，我们希望最大限度地利用格式塔并增加组件的采用——从我们的设计师开始。为此，我们需要衡量该系统在 Figma 中的全面使用情况。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">但为什么要衡量 Figma 的采用率呢？
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">甚至在我开始建立设计采用指标之前，我们就有了代码采用指标。事实上，衡量代码中系统组件的采用情况是一种常见的方法让设计系统团队了解他们的系统是如何使用的。通过代码，我们可以看到哪些组件正在被使用、在哪里以及如何使用。例如，我们可以判断团队是否正在使用完整的组件，或者他们是否正在进行更改，这是我们需要重新审视设计的指标。我们的团队提供了 Pinterest 的设计师和开发人员用来构建我们的产品的 Web 组件。通常，我们会密切关注我们最终构建的组件是否确实用于产品。通过代码，我们知道无论团队如何，他们发布的所有内容都将存在于代码库中，因此它是衡量组件采用情况的具体位置。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">然而，我们的代码采用指标有两个警告：
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">1. 代码采用仅适用于 Web
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">Gestalt 工程团队仅提供 Web 组件，而 Gestalt 作为一个整体提供跨 iOS、Android和Web 的设计组件。因此，我们的采用指标受到我们将代码发送到的平台的限制。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">2. 代码采用需要时间
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">有时，对于全新的组件或表面，需要时间才能得到广泛采用。设计师可能还没有机会在他们的设计中使用这些组件，因此在我们看到指标发生任何变化之前会有一个延迟。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12;">定义设计采用
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">并不是说代码采用率作为衡量标准不好，而是代码采用率并不能说明全部情况。如果我们想说服我们的组织投资构建 iOS 和 Android 代码组件，我们如何知道人们会使用它们？假设，如果我们能够证明设计师正在 Figma 中使用我们的组件，那么就很容易证明我们应该为所有平台构建组件。
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/5d69389ea6494dfcef4f6cfb4f7c1a4446fc3171-3200x1908.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/5d69389ea6494dfcef4f6cfb4f7c1a4446fc3171-3200x1908.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/5d69389ea6494dfcef4f6cfb4f7c1a4446fc3171-3200x1908.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/5d69389ea6494dfcef4f6cfb4f7c1a4446fc3171-3200x1908.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/5d69389ea6494dfcef4f6cfb4f7c1a4446fc3171-3200x1908.png?w=804&q=75&fit=max&auto=format&dpr=2 1608w" loading="lazy" alt="紫色背景上各种设备的抽象红色和黑色界面" width="804" height="479" style="box-sizing: inherit; border-style: none; display: block; height: 479.46px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">Pinterest 设计师跨网络、iOS 和 Android 进行设计。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">设计系统的采用真正开始于设计阶段。如果设计人员不知道组件的存在，我们也不应该指望我们的工程师也知道。对于我们的设计师来说，设计阶段发生在 Figma 中。在建立我们的设计采用指标之前，我们对 Figma 文件内部发生的情况没有太多了解。作为一个团队，我们非常好奇我们能发现什么见解，以及我们采用的基线设计是什么。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">Figma 提供开箱即用的分析功能，可以按团队细分组件实例和插入的数量。
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/3885b85a4cf64232245689c52a75cbfedcbd1c4a-1600x1100.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/3885b85a4cf64232245689c52a75cbfedcbd1c4a-1600x1100.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/3885b85a4cf64232245689c52a75cbfedcbd1c4a-1600x1100.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/3885b85a4cf64232245689c52a75cbfedcbd1c4a-1600x1100.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/3885b85a4cf64232245689c52a75cbfedcbd1c4a-1600x1100.png?w=804&q=75&fit=max&auto=format&dpr=2 1599w" loading="lazy" alt="Figma 库分析页面的屏幕截图" width="804" height="553" style="box-sizing: inherit; border-style: none; display: block; height: 552.727px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">Figma 提供库分析。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">这些数字是一个很好的开始，但并不完全是我们想要的采用指标。实例和插入的问题在于它们实际上只是计数。很高兴知道我们有 27,056 次插入和 245,123 个按钮实例被使用 - 但这是一件好事吗？很难说什么才是“健康”的计数。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">假设有一个包含超过 1,000 个节点的大型设计文件，其中 10 个来自我们的格式塔库。这意味着只有 1% 的设计是用格式塔完成的。是的，我们使用了组件，但遗憾的是这并不是整个设计的重要部分。因此，我们正在寻找的采用衡量标准与页面上的其他所有内容相关。
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/c1a2e13b83628510c870eab4785f19a9871ae1fe-1600x1051.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/c1a2e13b83628510c870eab4785f19a9871ae1fe-1600x1051.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/c1a2e13b83628510c870eab4785f19a9871ae1fe-1600x1051.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/c1a2e13b83628510c870eab4785f19a9871ae1fe-1600x1051.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/c1a2e13b83628510c870eab4785f19a9871ae1fe-1600x1051.png?w=804&q=75&fit=max&auto=format&dpr=2 1600w" loading="lazy" alt="Figma 的屏幕截图，突出显示文件中的格式塔层" width="804" height="528" style="box-sizing: inherit; border-style: none; display: block; height: 528.097px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">计算设计采用分数。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">在上图中，以红色突出显示的层是源自 Gestalt Figma 库的节点。整个页面共有 15 层，其中 7 层来自格式塔。我们在页面上的所有框架上单独计算这个分数，以获得设计采用的总分数。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">因此，在这种情况下：7 个格式塔层 ÷ 15 个总层，即 46.6%。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12;">衡量大规模采用情况
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">在 Pinterest，我们有八个不同的设计团队，负责跨 Android、iOS 和 Web 平台的运输界面。每周，设计师都会与数百个文件进行交互。为了计算全面采用率，我们最初的计划是发布一个 Figma 插件来测量所使用的 Gestalt 组件的数量。然而，这需要解决两个问题：设计系统的采用，以及插件的采用。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">幸运的是，Figma 公开了REST API供我们使用。它使我们能够构建一个在后台计算设计采用率的工具，而不会减慢我们设计师的速度。我建立了一个名为 FigStats 的服务，它每天晚上运行并查看我们所有的 Figma 文件。它会统计总数以计算整个组织的采用百分比。
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/cace19cce1756969586d06e26a71d00257a8a1f1-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/cace19cce1756969586d06e26a71d00257a8a1f1-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/cace19cce1756969586d06e26a71d00257a8a1f1-1600x846.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/cace19cce1756969586d06e26a71d00257a8a1f1-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/cace19cce1756969586d06e26a71d00257a8a1f1-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=2 1600w" loading="lazy" alt="FigStats 界面的屏幕截图显示了团队的采用情况" width="804" height="425" style="box-sizing: inherit; border-style: none; display: block; height: 425.085px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">FigStats 向我们展示了我们所有团队的采用情况。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">FigStats 允许我们深入了解从组织级别到单个 Figma 文件的采用指标。我们不仅可以看到采用率分数，还可以看到文件的组成以及它们如何影响全局。
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/0cd4daa77c8d4abcafd5577325aaf629b86d222c-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/0cd4daa77c8d4abcafd5577325aaf629b86d222c-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/0cd4daa77c8d4abcafd5577325aaf629b86d222c-1600x846.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/0cd4daa77c8d4abcafd5577325aaf629b86d222c-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/0cd4daa77c8d4abcafd5577325aaf629b86d222c-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=2 1600w" loading="lazy" alt="Figstats 界面的屏幕截图，显示带有格式塔层的饼图" width="804" height="425" style="box-sizing: inherit; border-style: none; display: block; height: 425.085px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">我们还可以看到每个移交页面的细分。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">作为额外的好处，我们还进行了一项测量，以了解设计如何利用我们的文本和颜色样式。如果设计师不使用一次性的十六进制代码或非品牌字体，这对我们的设计系统来说是一场胜利。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12;">公制陷阱
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">我们认为我们的设计采用衡量标准并不完美。与代码不同，设计无处不在并且总是在变化。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">这意味着 Figma 文件非常嘈杂。有大量隐藏层、未使用的节点以及散布各处的文本。去年，设计师在整个 Pinterest 上处理了 1,853 个 Figma 文件。因此，当提出这个指标时，我们不能只在每个存在的文件上运行它。丢弃文件和创建新文件也非常容易。即使每个人明天都开始使用设计系统，移动采用措施也会很困难，因为有很多旧文件。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">因此，对于我们的设计采用指标，我们设置了几个边界来限制我们的范围：
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/a7cdafea25b2784162d461da68178fa4d0a883f1-1600x701.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/a7cdafea25b2784162d461da68178fa4d0a883f1-1600x701.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/a7cdafea25b2784162d461da68178fa4d0a883f1-1600x701.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/a7cdafea25b2784162d461da68178fa4d0a883f1-1600x701.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/a7cdafea25b2784162d461da68178fa4d0a883f1-1600x701.png?w=804&q=75&fit=max&auto=format&dpr=2 1600w" loading="lazy" alt="混乱 Figma 文件的屏幕截图" width="804" height="352" style="box-sizing: inherit; border-style: none; display: block; height: 352.216px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">典型的切换页面。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">我们特别关注移交页面，因为我们知道设计师在移交这些页面之前需要花时间整理这些页面。方便的是，该公司的大多数设计名称中都标有“handoff”。这些页面通常会在构建之前被开发人员和多个利益相关者看到。对于采用指标来说，他们似乎是不错的候选人。
ch
English
