Menu
Figma has launched the ‘Multi Edit’ function. With the multi-editing feature, you can select similar visual elements used here and there and edit them at once. This is a useful feature for product designers who design multiple similar screens.
Figma has evolved to design products efficiently. We mainly created one to make it easier to use in many places.
We provided advanced features such as styles and tokens that apply color and size according to the same rules, smart selection that applies the spacing of multiple elements at once, and components, a system that can be adjusted according to the number of cases.
This update helps you edit many elements on the fly before using these advanced features.
When designing a UI, it becomes difficult to manage 'small elements' that are used across multiple pages. For large and complex repetitive elements, existing functions can be used, but ambiguous 'small elements' always hold you back. If even small elements are managed through libraries or components, system complexity increases and management becomes difficult.
For example, to edit a logo the same way, the logo had to be included in a component and then go to the master component to edit it and make sure it was applied properly to the rest of the layers. I needed to edit quickly and move on to the next step, but I had to go through unnecessary steps through the system.
Using multi-edit, you can directly view and edit multiple screens with the design applied and reduce design system complexity.
If the layer structure and name are the same, they are recognized as the same element. It is convenient because you can edit it right away without registering it separately as a style, token, or component. You can edit the text of the selected layer at once and change properties such as color, size, and shape. You can also change the variant value of a component at once.
Previously, when multiple layers were selected, they were perceived as one huge layer, but when selected with multi-edit, they can be edited as relative independent elements based on the upper layer. Figma has a hierarchical structure of Canvas > Section > Frame > Layer, and now you can edit centered on the upper layer.
This method is an idea that first came out in 2019, but it is said to have taken a long time to be applied because it is a feature that has a significant impact on the existing operation method. It seems like a good example of carefully examining the designer's product design experience and solving obstacles that affect productivity through a system.
However, as always, the system is difficult to prepare. The methods to identify the difference are 'structure' and 'name', but it seems difficult to set rules on how to distinguish these two elements from other elements. It seems difficult to know how far to apply this rule when creating a new element.
*You can experience it with the Figma Community Playground file below.
Every Tuesday morning, a designer with 16 years of experience curated Collect design trends.
