My role
I led user research to uncover pain points in layer navigation, conducting 8 interviews, analyzing 44 survey responses, and performing competitive analysis to identify 3 key usability barriers. I co-hosted 3 participatory design workshops to co-create solutions with target users, and translated findings into 4 key insights that shaped 2 core features.
I was primarily responsible for designing Z-order, which received positive feedback from our school instructors, Adobe mentor, and a Figma senior team member. Throughout the project, I helped drive the design of 10+ interactive prototypes and presented weekly to our Adobe advisor for strategic input and iteration guidance.
The Objective
We are eager to understand designers' and collaborators’ process and pain points of managing layers in complex design compositions.
⬆️ Observation notes from participants using layer panel in the existing creative tools
Research Methodology
Researched layer navigation challenges through 44 surveys, 8 user interviews and competitive analysis, identifying 3 key usability barriers
⬆️ User Research Affinity Mapping and Key Finding Synthesis
Key finding
Occlusion and deep nesting interrupt creative flow and are top frustrations for designers working in complex files.
From a Senior Product Designer Participant
"It's a nightmare because I need to look into everything of an unfamiliar file through the layer panel."
Why It Matters:
How might we align layer structure representations with designers’ perception of nested hierarchies?
Design Principles
1. Provide handy, contextual assistance when designers need it during their workflow.
2. Design for clarity and user control, sustaining trust in the “source of truth” and enabling confident actions without uncertainty and confusion.
3. Rarely require significant behavioral change from designers and collaborators in order to perceive value.
4. Reduce the time needed to accurately understand, select, and manipulate layers, improving efficiency.
5. Foster a sense of joy, reward, and ownership to keep designers excited and engaged in their daily work.
Brainstorming and sketching
Co-design workshops
Since our target users are designers, we invited them to join our brainstorming on the layer problem space, making the process both engaging and a potential source of exciting ideas.
⬆️ We host 3 Co-Design Workshops with our target users and collaborated on brainstorming ideas.
Internal brainstorming
We drew inspiration from everyday life to explore examples of layers, with each of us sketching over 30 ideas.
⬆️ Out of dozens of sketches, these two related to z-axis stood out as the most interesting to explore in greater detail.
From Brainstorm to Blueprint
Interaction prototypes
To better visualize the concept, I began building basic interactions that allow users not only to understand the structure more easily but also to edit it directly once the layer structure is separated into levels.
⬆️ My first detailed concept allows users to add a new level after separating the screen, which also became one of the primary interactions.
This interaction was agreed upon by the team as having great potential for further exploration. We also raised questions to better define the use case—when it would be necessary to add a new frame in the middle and how users would interact with this new level.
We later addressed this question by explaining that, since level separation is initially handled automatically by the system, users need the ability to adjust positions themselves to match their mental model, and adding a new level is one of the primary interactions enabling this. We also defined that the new level would always remain the same size as the original parent frame, before separation, since none of its child elements can exceed the size of the parent layer.
Native vs. Plugin Exploration
As our concept developed in detail, we needed to apply it within an interface to better illustrate the intended interactions. This led to a major discussion: should the feature be integrated directly into Figma’s native interface or developed as a plugin? Initially, we leaned toward a plugin to create an MVP and work within technical constraints. However, we ultimately chose a native integration, as certain editing interactions are simply not possible in a plugin. Forcing the feature into a plugin would compromise key interactions we want users to find effective and convenient. While plugins work well for small, isolated steps, our goal is to support the entire workflow within one seamless experience.
Applying Figma Design System
To accurately replicate how our features would work within Figma, we used a published Figma Design System from the Figma Community, studying every detail, from spacing and icons to notification bars and property panels.
⬆️ New UI elements for our feature, built on Figma’s design system
Besides UI elements, we also explored how to apply the Figma Design System to the split screen in our feature, as well as the navigation tabs present on each screen window.
We incorporated Figma’s interaction design details. For example, a selected frame is indicated by a solid blue line. As the concept evolved, we added more prototyping interactions to better illustrate how related UIs are triggered, making the experience feel more intuitive.
⬆️ One key interaction to allow users better understand the structure by switching to a 2.5D view
The Right Spot for the Icon
To understand how users would look for this feature, we conducted user testing with three designers, observing where they would search for it without any onboarding. Before testing, we placed the icon in the Auto Layout section of the property panel, assuming that, since the feature helps organize layouts differently, it would naturally belong in the layout properties. However, during testing, all participants searched the layer panel instead. This led us to remove it from the Auto Layout section.
Placing it in the layer panel, however, also felt off, since the feature applies to the selected screen rather than the entire layer structure. We consulted our Adobe mentor for guidance, and he encouraged us to clarify whether the feature acts as a different viewport or allows full editing through the property panel. He noted that if it offered unique interactions unlike existing features, it should be placed in its own distinct space. We later agreed that the feature is more than just a different view, and decided to position it at the top of the property panel, highlighting it as a unique functionality.
⬆️ Original placements vs final placement of the icon
Feature Outcome: Z-order
⬆️ After applying Z-Order to the selected screen
How the system analyzes level organization:
The parent frame is designated as Level 0. All child frames (sibling frames) are initially assigned to separate levels based on their vertical stacking. If any sibling frames do not overlap, they will be merged back into the same level to reduce redundancy and simplify the hierarchy.
The system automatically separates levels based on the screen’s complexity, with a notification bar above the toolbar to inform users.
Primary interactions
Key interaction 1: Apply Z-order
Z-order icon locates at the upper right corner of the property panel, and it allows designers to see and design a screen in depth.
Key interaction 2: Add a new level
Allow designers to accurately control the levels without impacting the overall look of the screen.
Key interaction 3: Switch to 2.5D view
Allow designers to clearly understand the structures.
Slider can help to control the distance between levels.
Key interaction 4: Reorder levels
Allow designers to organize the structure precisely.
Secondary interactions
Interaction 5: Collapse levels
Allow designers to view overlaps and optimize space
Interaction 6: Expand levels
