小小的大突破

快速的支点和阿哈的时刻,我们在发起30+小的大更新。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px; margin-top: 0px;">今天我们要发布最新的一部分, 30+微小但强大的特征 帮助你在菲格玛更快地工作。这里是我们最好的轶事,来自设计师和工程师,他们致力于把这类小的重大更新带到生活中来。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">特点: 多选搜索。使用figma-1j7zr0j" style="box-sizing: inherit; font-family: apercu-mono-vf; font-size: 16px; letter-spacing: -0.05em; line-height: 1.64; border: 1px solid var(--code-border-color); background: var(--code-bg-color); padding: 2px 4px; word-spacing: -4px;">Shift + Click 或figma-1j7zr0j" style="box-sizing: inherit; font-family: apercu-mono-vf; font-size: 16px; letter-spacing: -0.05em; line-height: 1.64; border: 1px solid var(--code-border-color); background: var(--code-bg-color); padding: 2px 4px; word-spacing: -4px;">Cmd (Windows: Ctrl) + Click 选择要编辑和替换的特定搜索结果.

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.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/630036f690051714a75a305f9087f8e45572adf4-3264x1836.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.5 1632w,https://cdn.sanity.io/images/599r6htc/localized/630036f690051714a75a305f9087f8e45572adf4-3264x1836.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.75 2448w,https://cdn.sanity.io/images/599r6htc/localized/630036f690051714a75a305f9087f8e45572adf4-3264x1836.png?q=75&fit=crop&crop=focalpoint&auto=format 3264w,https://cdn.sanity.io/images/599r6htc/localized/630036f690051714a75a305f9087f8e45572adf4-3264x1836.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=1.5 4896w,https://cdn.sanity.io/images/599r6htc/localized/630036f690051714a75a305f9087f8e45572adf4-3264x1836.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=2 6528w" loading="lazy" alt="" style="box-sizing: inherit; border-style: none; cursor: var(--cursorPointer); display: block; object-fit: cover; aspect-ratio: 21 / 9; width: 298px;" data-catch-result="fail"/>

figma-19jvqfh" style="box-sizing: inherit; cursor: var(--cursorPointer); margin: 12px 0px 4px; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px;">

几个月前,产品团队假设启动多选择搜索只需要一些增量的变化就可以建立原来的功能。"一旦我们开始深入研究它实际上是什么样子,我们就进入了非常复杂的边缘案例,"杰姬说,他领导了多选择和寻找与替换的设计。

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-1j7zr0j" style="box-sizing: inherit; font-family: apercu-mono-vf; font-size: 16px; letter-spacing: -0.05em; line-height: 1.64; border: 1px solid var(--code-border-color); background: var(--code-bg-color); padding: 2px 4px; word-spacing: -4px;">Command 或 为了"超大型",菲格玛强调了在背景中自动选择的间接项目,并概述了你选择的孩子,作为一个预览。"对我来说,这种感觉非常关键,"杰姬说。最后,正是那些边缘案例使他们找到了最好的解决方案。"即使是最初的发现和替换也没有那么多不同的边缘案例,"阿克沙伊说。"多选择是由它们定义的。" figma-1j7zr0j" style="box-sizing: inherit; font-family: apercu-mono-vf; font-size: 16px; letter-spacing: -0.05em; line-height: 1.64; border: 1px solid var(--code-border-color); background: var(--code-bg-color); padding: 2px 4px; word-spacing: -4px;">Shift

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-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-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-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-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-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-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">"乔安娜认为这应该是一个只使用键盘的入口,我想这可能是一个在类型设置面板中的切换,"阿曼达解释道。"只使用键盘"的方法将意味着将挂起标点符号看作是功能性缩进;UI切换将更倾向于类型设计。它花费了很长时间去思考,因为在其他产品中没有很多先例,在CSS中没有实现这一点的标准方法,他们想确保这个方法对用户来说是直观的。

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;">虽然在我们交谈的时候事情还没有决定,但他们当然会及时做出决定:UI切换方法,因为他们知道设计师最终会把它看作是风格上的改变。