About
Resume
Linkedin

©2025 Alex Woo

Property Panel Improvements & Auto Layout

Client : ProtoPie
Keyword : Design System, Prototyping, User Reserch
Timeline : Sep — Nov 2024 (3 months)
My Role : Lead Product Designer

Overview

As the first initiative to improve Figma import, we decided to introduce Auto Layout as a new attribute. However, many related features, such as Size and Position, had legacy UI issues, so I proposed addressing them together.

Requirements of Enterprise Customers

Problem & Solutions

Over a decade of incremental development, features were updated without a unified design system. The lack of component-based structure led to inconsistency and usability issues.

1️⃣ Grid misaligned, Inconsistent margins -> Applied grid and design system
2️⃣ Does not meet accessibility standards -> Meets accessibility standards

Color contrast is too low -> Color contrast 4.5:1 - 3:1
Target size too small -> Meets the minimum target size
Lack of hover effects leads to target area ambiguity -> Visual feedback

3️⃣ Deviates from standard usability (Constraints) -> Aligns with usability standards

About 80% of users continue their work in Figma before using ProtoPie

Ideation

The property panel contains various properties, so I divided each section to identify issues, compare improvements, and ensure overall consistency.

Before & After

Prototyping & User Testing

While ProtoPie could be used for prototyping, I opted for Figma’s prototyping features for quicker validation. Most of the functionalities I aimed to test were feasible within Figma’s prototyping capabilities—ironically, this highlights one of the biggest challenges ProtoPie needs to address.

I extended Figma’s design assets and basic prototyping features to build flows based on seven user scenarios I wanted to validate. These flows were then connected to Maze for user testing.

Users who use Figma as their daily tool demonstrated a high success rate of 100% in key scenarios. However, in one of the three additional tasks—where the layer option was moved to the top for consistency with Figma—most users found it difficult to locate.

This was especially true for advanced users, who expected it to remain in its previous position. As a result, the layer option has been reverted to its original placement.

Design system & Guide

Differences with Figma

1. Size vs Layout
There are unsupported features, and consideration must also be given to labels in the interaction panel.

Figma : Since you can set the gap when selecting an object, the label "Layout" is appropriate.
ProtoPie : Considering the scale response, the label "Size" is more intuitive.

2. Activation
Due to the large scope of changes and the need for extensive validation, ProtoPie maintains its own UI method.

Figma : ‘Layout’ is switched to ‘Auto Layout’
ProtoPie : Provided as a separate item from the 'Size'

3. Resize option
The method of displaying both resize options and numerical values simultaneously offers better usability.

Figma: The number values are not displayed when set to Fill, but both the values and options are shown when set to Hug.
ProtoPie: The resize option is separated and linked to the numerical area.

4. Beta
In the initial version, the scope of interactions is excluded due to limited resources, so users need to be informed about the limitations.

Data-Driven Insights

1. Users engaged 7x longer with Auto Layout
Auto Layout significantly increases user engagement, with session duration extending up to 7x longer than average users. This highlights its impact on enhancing workflow efficiency and deepening user interaction within the tool. Given this data, it could also suggest that Auto Layout has become the primary way most users work, though interpretation may vary.

2. Enterprise Productivity & Revenue Growth

Enterprise(50%) > Pro(28%) > Basic(27%) > Free (3%)

Enterprise users show the highest retention for Auto Layout, proving its importance in their workflow. Strengthening this feature can further enhance customer loyalty, drive upsells, and attract more high-value enterprise clients.

Data collected from January 1 to February 15 (46 days)

Sum up

📍 Next Steps
I am currently defining the specifications for how Auto Layout will function in the preview area and ideating related features.

Show/Hide Response
Responsive Scene
Interaction for Reordering Objects

... many related features remain

📓 Retrospect
I had to ensure both a smooth process and clear understanding of Auto Layout for non-designers while meeting a tight end-of-year release deadline for enterprise clients, making stability a top priority.

This feature required an extensive specification process, resulting in nearly 3,000 test cases. Defining such a large-scale spec was a key part of my role. While QA isn’t typically a designer’s responsibility, I participated because designers had the clearest understanding of the expected behavior. This helped ensure a stable release and reinforced the importance of precise specifications in large-scale development.