Figma推出的multi-edit功能丨同时编辑多个匹配元素

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

Figma推出的multi-edit功能2.jpg

Figma刚刚推出的multi-edit功能!在UI设计工作中,我们经常需要创建多个类似的页面或图层,它们的布局和样式大致相同,但内容略有差异。以前在Figma中编辑这样的设计稿时,我们不得不逐个修改每个画框里的元素,重复单调的操作,效率低下。有了multi-edit就可以匹配不同画框中的相似元素进而同时操作。

一、什么是multi-edit?

Multi-edit可以同时编辑多个画框(frame)中的元素,Figma通过图层名称和图层位置判断不同画框中的图层匹配:

  • 图层名称:名称相同的图层会被认为是匹配的

  • 图层位置:图层在各自画框中的位置顺序也要一致

匹配的依据是图层的名称和位置,而不是它们的视觉样式。比如在下方示例中画框3的图层名称与其他两个画板相同但它是六边形依然可以匹配。

Figma推出的multi-edit功能3.png

因此在设计时,如果你希望多个元素可以被multi-edit匹配,就要注意统一它们的命名和摆放顺序。

通过这个功能,我们可以:

  1. 同时设计、迭代和优化多个画框

  2. 跨画框选择和编辑匹配的对象

  3. 跨画框更新匹配的文本

  4. 为匹配的元素添加交互和动画

二、如何使用multi-edit?

  1. 选择匹配的图层

    • 选中一个元素后,点击顶部菜单的"选择匹配图层"(Select matching layers)按钮,Figma会自动选中其他画框内名称和位置都匹配的元素

    Figma推出的multi-edit功能4.png

    Figma推出的multi-edit功能5.png

    • 匹配的条件是图层名称和图层在画框内的位置顺序

    • 即使视觉上看起来不一样,只要名称和位置匹配,也会被选中

  2. 批量编辑文本

    • 选中多个画框内的文本图层,按回车键后可以直接编辑它们的内容,所有选中的文本会同步更新

    Figma推出的multi-edit功能6.png

  3. 跨画框对齐对象

    • 在对齐多重编辑对象时,有两个选项:对齐到选定对象和对齐到画框

    • 要对齐到关键对象,首先选择一个对象并使用多重编辑快捷键⌥⌘A(Mac)或Ctrl+Alt+A(Windows),然后在设计面板中选择一个对齐选项

    • 要将所有对象相对于画框对齐,将鼠标悬停在对齐工具上时按住Shift键

    Figma推出的multi-edit功能7.png

  4. 应用变换

    • 当你在多个画框中对匹配的对象进行多重编辑变换时,这些对象可能具有不同的位置、大小和旋转角度。编辑这些属性可以是相对的,也可以是绝对的

    Figma推出的multi-edit功能8.png

  5. 为匹配的元素添加auto layout

    • 选中多个画框内的匹配元素后,可以对它们同时添加auto layout

    • 选中第一个画框内的元素,点击"选择匹配图层"来选中其他画框内的匹配元素

    • 按 Shift+A 添加 auto layout,这样每个画框内都独立添加了auto layout

    • 可以在 auto layout 内移动匹配的元素或修改它们的属性

    Figma推出的multi-edit功能9.png

  6. 在大量画框中使用 multi-edit

    • 当设计稿中有大量类似的画框时,也可以方便地用multi-edit进行批量编辑

    • 选中一个元素,点击"选择匹配图层",可以选中所有画框内的匹配元素

    • 通过添加 section 来控制匹配的范围,只选择某个 section 内画框的匹配元素

Figma的multi-edit功能为设计师提供了一种高效、便捷的方式来编辑多个相似的画框。建议在日常设计中多尝试使用multi-edit,并结合自己的实际工作场景,发挥它的最大价值。更多详细的功能应用,可以查看官方文档学习喔!

https://www.figma.com/community/file/1343991048099728924

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作