ch
English
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我是一个设计技术专家,大多数背景是工程和产品管理。如果你熟悉这两个空间,你可能知道它们对测量影响的强调。从代码速度,到主动用户和参与计数,每件事都有一个数字。这一数字----无论它是什么----是重要的,因为它为我们提供了共同的语言和一致的指标,表明了走向正确方向的意义。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">为帕希的设计系统找出好的指标, 格式塔 ,也一样。对于我们的团队来说,了解我们提供了多少价值是非常重要的,对于我们的领导层来说,了解投资是否有回报也是非常重要的。
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.438px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">在过去的一年里,我一直在研究一个新的格式塔度量标准 设计采用 .作为一个设计系统团队,我们希望最大限度地使用格式塔并增加组件的采用--从设计师开始。要做到这一点,我们需要衡量菲格玛的系统是如何被全面使用的。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">但为什么在菲格玛衡量收养?
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">即使在我开始建立设计采用度量之前,我们就有了 编码 采用指标。实际上,测量系统组件在代码中的采用是 普通方式让设计系统团队了解他们的系统是如何使用的。通过代码,我们可以看到哪些组件正在被使用,在哪里以及如何使用。例如,我们可以判断团队是否正在使用整个组件,或者是否正在进行更改--这是我们需要重新审视设计的一个指标。我们的团队将设计师和开发人员使用的Web组件运送到PELEE,以构建我们的产品。通常情况下,我们会关注我们最终制造的组件是否实际上是用于产品的。有了代码,我们就知道,不管团队是什么,他们携带的所有东西都将生活在代码库中,所以这是一个衡量组件采用情况的具体地方。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">然而,我们的代码采用度量有两个注意事项:
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">1.只在网上使用代码
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">格式塔工程团队只销售网络组件,而格式塔作为一个整体设计整个iOS,安卓, 和 网。因此,我们采用的度量标准受到我们发送代码的平台的限制。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">2.代码的采用需要时间
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">有时,对于全新的部件或表面,需要时间才能得到广泛的采用。设计者可能还没有机会在他们的设计中使用这些组件,因此在我们看到米制的任何变化之前还有一个滞后点。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; 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; color: rgb(19, 19, 19); text-wrap: wrap; background-color: rgb(255, 255, 255);">定义设计采用
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">不是代码采用作为衡量标准不好,是代码采用 并不代表整个故事 .如果我们想说服我们的组织投资于为iOS和安卓系统构建代码组件,我们如何知道人们会使用它们?假设,如果我们能够展示设计师正在使用我们的菲格玛组件,那么很容易证明我们应该为我们的所有平台构建组件。
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.469px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">设计系统的采用实际上始于 设计 阶段。如果设计师不知道组件的存在,我们不应该指望工程师也知道。对我们的设计师来说,设计阶段发生在菲格玛。在建立我们的设计采用度量之前,我们对费格玛文件中发生的事情并没有多少深入的了解。作为一个团队,我们非常好奇我们能发现哪些洞见,以及我们的基线设计采用是什么。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">从盒子里,菲格玛 分析学 这将按团队分列组件实例和插入的数量。
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="菲格玛图书馆分析页面的屏幕" width="804" height="553" style="box-sizing: inherit; border-style: none; display: block; height: 552.719px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">这些数字是一个很好的开端,但并不完全是我们所寻找的采用标准。实例和插入的问题是它们实际上只是计数。很高兴知道我们使用了27,056个插入和245,123个按钮实例--但这是一件好事吗?很难说什么是"健康"计数。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">假设有一个有1000多个节点的大型设计文件,其中10个来自我们的格式塔库。这意味着只有1%的设计是用格式塔做的。是的,我们有组件的使用--但遗憾的是,整个设计中没有很大的一部分。所以,我们要找的领养措施是 相对的 所有其他的东西。
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="显示文件中格式塔层的图片" width="804" height="528" style="box-sizing: inherit; border-style: none; display: block; height: 528.094px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">在上图中,红色突出显示的图层是起源于格式塔菲格玛库的节点。整个页面共有15层,其中7层来自格式塔。我们在一个页面上的所有框架中分别计算这个分数,以使我们得到一个总体设计采用评分。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">因此,在本例中:7个格式塔层,即46.6%。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; 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; color: rgb(19, 19, 19); text-wrap: wrap; background-color: rgb(255, 255, 255);">衡量规模采用情况
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我们在苹果公司有八个不同的设计团队,在安卓、iOS和网络平台的运输表面上工作。每周,设计师会与数百个文件交互。为了计算整个系统的采用情况,我们最初的计划是安装一个菲格玛插件来测量使用的格式塔组件的数量。然而,这需要解决两个问题:设计系统的采用,以及 普尔金 收养。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">幸运的是,菲格玛 休息空气污染指数 对我们有利。它使我们能够构建一个在后台计算设计采用的工具,而不会减缓我们的设计者。我设置了一个叫做菲格斯的服务,它每晚运行,查看我们所有的菲格玛文件。它计算出整个组织的通过率。
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="显示团队采用的菲格斯接口屏幕" width="804" height="425" style="box-sizing: inherit; border-style: none; display: block; height: 425.094px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">可以让我们深入了解从组织级别到单个菲格玛文件的采用指标。我们不仅看到了采用得分,而且看到了文件的组成,以及它们如何影响更大的情况。
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="图为带有格式塔层的饼图" width="804" height="425" style="box-sizing: inherit; border-style: none; display: block; height: 425.094px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">作为额外的奖励,我们还运行了一个度量,以查看设计如何利用我们的文本和颜色风格。如果设计师不使用一次性的十六进制代码或非品牌字体,那将是我们设计系统的一个胜利。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; 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; color: rgb(19, 19, 19); text-wrap: wrap; background-color: rgb(255, 255, 255);">度量陷阱
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我们认为我们的设计采用措施并不完美。与代码不同,设计无处不在,而且总是在变化。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">这意味着菲格玛文件非常吵闹。有很多隐藏的图层,未使用的节点,以及到处都是的文本。在过去的一年,有1853个菲格玛文件,设计师们在所有的Pel的工作。因此,当提出这个度量时,我们不能只在每个存在的文件上运行它。这也是一个非常简单的方法来处理文件和创建新的文件。即使明天每个人都开始使用设计系统,移动采用的措施将是困难的,因为有很多旧的文件。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">因此,对于我们的设计采用度量,我们设置了几个边界来限制我们的范围:
我们只看在 最后两周 .这样,我们就有了 新的 设计正在处理领养问题。
我们只看标有" 转让 ."菲格玛文件经常有各种各样的抓痕和探索。通常情况下,只有切换页面才能使其进入产品。
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="一张混乱的菲格玛文件的屏幕" width="804" height="352" style="box-sizing: inherit; border-style: none; display: block; height: 352.219px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我们特别关注的是切换页面,因为我们知道设计师在分发页面之前需要花费时间来整理这些页面。方便的是,该公司的大多数设计也在其名称上贴上"移交"的标签。这些页面通常是开发人员和多个利益攸关方在构建之前看到的。作为参考指标,他们看起来是不错的候选人。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; 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; color: rgb(19, 19, 19); text-wrap: wrap; background-color: rgb(255, 255, 255);">我们去哪?
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">大约一年前,我们对菲格玛文件中的活动没有太多的了解。除了我们的调查反馈之外,我们对组件的相对使用情况以及它们在产品中的使用范围还不太清楚。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">今天,我们从数量上对这些设计的实际内容和设计的发生地有了更强烈的认识。
figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/a180930766675144e8c566767f716888b5b5aff2-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/a180930766675144e8c566767f716888b5b5aff2-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/a180930766675144e8c566767f716888b5b5aff2-1600x846.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/a180930766675144e8c566767f716888b5b5aff2-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/a180930766675144e8c566767f716888b5b5aff2-1600x846.png?w=804&q=75&fit=max&auto=format&dpr=2 1600w" loading="lazy" alt="上一次编辑时拍摄的图片" width="804" height="425" style="box-sizing: inherit; border-style: none; display: block; height: 425.094px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我们还在试验如何将我们的发现融入我们更大的设计操作故事中。但首先,我们要利用新发现的设计指标:
收养: 了解组件在设计中的位置和使用方式,有助于我们了解系统在哪里容易或难以使用的趋势。我们还可以找出在整合系统方面有困难的团队。
质量: 作为我们分析的一部分,我们运行一个云链接过程,以了解设计文件是否符合某些文件卫生标准。例如,在页面上的所有文本节点中,它们是否使用我们的文本样式?我们还想知道十六进制代码和填充样式的数量。菲格玛不允许我们编辑这些文件,因此我们开始开发一个插件,我们的设计师可以在本地运行,以提高整个文件的清洁度。
新组件: 有时设计师会创建本地组件,并将它们粘贴到不同的设计中。现在我们已经有了一种识别方法,我们可以看到这些定制的本地文件组件是否正在广泛分布到一个团队中。如果我们注意到了足够的使用,作为一个系统的团队,我们就有机会考虑将其添加到我们更大的设计库中。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我们认为,设计的采用是对我们在代码中运输的组件的一种补充。例如,我们注意到 分页机 收养率低。我们最终了解到,这是由于我们的代码组件的限制。然而,设计的采用告诉了我们一个不同的故事--团队实际上正在尝试使用我们的组件。因此,这是一个设计和代码采用能够让我们深入了解系统健康状况的例子。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我们只是在触及设计系统分析的表面,而设计的采用是我们在空间中的第一步。
figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; 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; color: rgb(19, 19, 19); text-wrap: wrap; background-color: rgb(255, 255, 255);">你自己试试看
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">我们已经做了一些关于计算设计采用的方法的工作,所以你可以把它当作一个旋转,并且测量你的采用得分。当看到这些数字时,很难说 理想的 收养人数。归根结底,你的系统是多么强大,人们是如何利用它的。如果你不知道从哪里开始 我们的图书馆 得到一个基线。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">给予 使倾斜 一次尝试 在这里 使用您的菲格玛API令牌和设计团队的ID。处理所有文件和计算收养得分可能需要一段时间,所以你可能想喝杯咖啡。
figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/72875cc1107552f5c9eb389f20d9a88b8b74d5e8-1600x897.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/72875cc1107552f5c9eb389f20d9a88b8b74d5e8-1600x897.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/72875cc1107552f5c9eb389f20d9a88b8b74d5e8-1600x897.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/72875cc1107552f5c9eb389f20d9a88b8b74d5e8-1600x897.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/72875cc1107552f5c9eb389f20d9a88b8b74d5e8-1600x897.png?w=804&q=75&fit=max&auto=format&dpr=2 1599w" loading="lazy" alt="显示链接结果的代码控制台屏幕" width="804" height="451" style="box-sizing: inherit; border-style: none; display: block; height: 450.719px; top: 0px; left: 0px;" data-catch-result="fail"/>
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(19, 19, 19); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(255, 255, 255);">你可能会注意到,某些团队的收养率是50%,而其他团队只有2%。这些可能是值得深入研究的文件,并发现团队之间的不同之处。
