From three aspects, summarize the interactive details of Figma that are worth learning from!

introduction

Figma has been a very popular tool in the field of experience design in the past year. I just started switching between Axure 9.0 and Figma recently, and I deeply felt the experience difference brought by design details. Today, I will summarize several principles of experience design of tool software through some details.

I would like to state in advance that this article is not a comparison of the advantages and disadvantages of software tools, but only to explore design techniques. I hope it will be helpful to you.

The main contents of this article include:

• Efficiency design: improving user behavior efficiency
• Simplified design: reducing information noise
• Visual design: reducing user thinking costs

Efficiency Design

The primary task of tool software is to pursue efficiency and reduce users' operating costs.

1. Templated settings

Component-based design

Figma has a powerful component function, similar to the master board in Axure, but more flexible. It has a parent-child inheritance relationship, which means that after modifying the parent component, the child component can be modified synchronously. However, the child component has a certain degree of independence, and the content can be edited, ensuring flexibility and availability. The Axure master board is mandatory. Once the content of the parent component is modified, the child component must be modified.

Style templates

In Figma, users can create their own color, stroke, and shadow style libraries and call them up at any time in the design, once and for all, reducing the operational cost of frequent style adjustments.

2. Select alternative input

Preset options can effectively improve user efficiency. For example, when setting font size, Axure does not have preset options, and users need to enter and modify it manually. In Figma, commonly used font sizes are preset, and users can select them by pulling down. In addition, the default font size of Axure is 13, while Figma is 14, which is more in line with the mainstream font size used by designers, reducing the number of modifications for users.

3. Batch modification

Batch modification is our most common design method to improve efficiency. Both Figma and Axure have padding settings. However, Figma can be operated with one click. Users can modify four margins with one input, which is more efficient. If you want to set equal spacing on all four sides in Axure, you have to modify them one by one, which is relatively cumbersome.

Simple design

In tool software, the object's property bar should be the user's high-frequency operation area.

In terms of overall layout, Figma and Axure are basically the same, both of which contain 3 modules. You can set various properties of objects, design interactive effects, etc. The basic property module is the top priority for user operations.

However, the Figma property bar provides users with a better experience through design methods such as hierarchical display of information, concise content, and orderly layout.

1. Display in a hierarchical manner and hide unnecessary content

When creating an element, the Figma property bar only displays basic information such as position and size, layer transparency and fill color by default. Settings such as stroke, projection, and export only display titles, and all content is hidden, ensuring that what you see is what you get. When users add settings, the system will give default settings, and users only need to modify the content as needed.

Figma also uses interactive operations to reduce the amount of information on the page. For example, the drop-down options do not display the drop-down button by default, but are displayed when the mouse hovers over them, making the originally complex page more refreshing.

Axure displays the content information in a flat layout, and the content of the setting items will be displayed regardless of whether the user needs to operate. This layout design can indeed reduce the user's one-click operation, but the low-frequency operation setting items increase the amount of information on the page and become the information noise of the page.

2. Adapt to user habits and reduce the amount of information on the page

In order to improve their efficiency, users will not name all page elements. In fact, the frequency of naming is not high. Therefore, Figma does not have the option to modify the element name in the element property settings, but places it in the layer list for modification. In Axure element properties, naming is placed at the top as the primary content.

3. Unified alignment makes information more orderly

The two also differ in information layout and alignment. Figma uses a top-down layout, with the function title on the top and the settings content on the bottom. The information hierarchy is more obvious and more in line with the user's browsing habits. It also has good consistency.

Axure mainly uses a left-right layout, with the title information on the left and the content items on the right. I personally understand that this layout is to compress the size in the height direction, to ensure that the setting items are fully displayed on one screen as much as possible, to avoid scroll bars and increase user operation costs. However, this layout method causes confusion in content display.

In addition, the bottom edge input boxes of different lengths also increase the complexity and confusion of the content, creating a sense of disorder in the page information.

Visual Design

In design tools, visual design is more used in location-related functions to help users better understand information, thereby reducing the cost of thinking. Therefore, both have added visual forms in the setting options.

For example, the padding setting mentioned above is visualized in Fimga, and users can just fill in the blanks. The cost of thinking is lower, or even zero. The fillet setting and edge visibility setting in Axure are also visualized. And the visualization also has operation functions, which is convenient for users to operate.

Final Thoughts

Of course, there are more design details in Figma than these, but many designs are not new innovations of Figma, but are optimized based on Axure and Sketch. Therefore, valuable design does not necessarily mean to start from scratch, but you can also stand on the shoulders of giants and make design solutions that meet your product positioning and characteristics.