A visualization tool helping creatives navigate complex layer hierarchies
Project Type
Master’s Capstone Project
My Role
Product Designer
UX Researcher
Video Producer
Timeline
Feb - Aug 2025
Team
Linda Xiao
Ariel Huang
Xinyi Zhao
Tools
Figma, After Effects, Final Cut Pro
OVERVIEW
Designers often face layer jungles with infinite layers and complex hierarchies. To address this, we built LayerLens, a 0-to-1 visualization tool that aligns layer structure representations with designers’ mental models, making complex compositions easier to navigate.
Curious how it works? Watch the video I made to get a glimpse of the project!
Z-Order analyzes layer relationships and decomposes the structure into merged levels.
The Expanded View in Z-Order enables easier selection and editing of the design content and the structure.
The 2.5D View in Z-Order gives a clear overview of the levels.
Visual Coding adds visual cues to nested structures, making parent-child layer relationships clear at a glance.
THE CHALLENGE
Creative tools evolve, but layer management remains broken.
From our desk research, we found that layer navigation is a universal challenge, spanning 2D and 3D design, video editing, web builders, and even presentation slides. It diverts users’ attention, interrupts creative flows, and adds extra time spent on tasks.
What makes a composition “complex”?
Number of layers
Level of nesting
Degree of occlusion
As compositions become denser and more complex, layer navigation tasks – such as understanding, selecting, and manipulating layers – become increasingly challenging.
Converge now, diverge later – Why Figma?
Given the 6-month time frame, we chose to focus on Figma, enabling comprehensive research and high-quality design outcomes. Yet, our design concept could still benefit broader users across other layer-based tools.
User Research
To understand designers' and collaborators’ processes and pain points of navigating layers in complex compositions, we conducted contextual inquiry with 7 designers, 1 engineer, and 1 product manager working with Figma Design. Below are the primary insights we gathered.
Flat layer panels fail to reflect dimensional structures, mismatching with designers’ mental models.
The layer panel acts as a “source of truth” for understanding and reorganizing complex structures, which challenged our initial assumption. However, while complex hierarchies are unavoidable in scaled compositions, layer panels’ limited space, long names, and weak visual cues make them difficult to navigate.
Layer structures are difficult to interpret after context switching.
Designers depend on memory to build and navigate compositions, making it difficult and time-consuming to revisit and understand structures later.
Complex 2D compositions expose a disconnect between the dimensional, visual canvas and the linear, list-based layer panel. Navigating heavily occluded and deeply nested structures forces constant context switching and dividing attention, creating cognitive load and disrupting creative flow.
Key Problem
How might we align layer structure representations with designers’ perception of occluded and nested hierarchies?
Define Major Opportunities
We also hosted 2 co-design workshops with 7 designers, using Crazy 8’s ideation and group discussions to uncover designers’ priorities and significant concerns for a layer management solution, which also helped us further form our key opportunities and design principles.
We analyzed design opportunities by priority and feasibility, focusing on bridging the gap between designers’ mental models and design tools’ layer interaction model by creating visual-first representations of layer hierarchies that keep designers’ attention on actual creative work.
To ensure a solution that truly empowers designers without added frictions, we established four key principles that prioritize their needs based on our user research insights. These principles served as a north star for our design decisions.
Design Principles
Synthesizing and analyzing ideas from ideation and co-design workshops helped us narrow our focus to two key themes based on priority, feasibility, and our design principles.
Potential Solutions
Categories, summaries, and automation on the z-axis
Additional views of compositions to support understanding
We articulated the LayerLens concept and refined its UI and interactions, from early sketches to polished screens and prototypes, creating a clearer, more intuitive layer navigation experience.
DESIGN & ITERATION
Ideation
I used analogies to explore the design concept when it was still ambiguous.
CT/MRI scan → Cutting compositions into slices
"When you MRI anything, you acquire the image slice by slice,” said Andy Ellison, Chief MRI Technologist at Boston University. This idea became part of the Z-Order feature in LayerLens to “cut” dimensional layer compositions into slices.
Magnetic Resonance Imaging (MRI) of Foods – Papaya, by Andy Ellison
Initial Sketch of Z-Order
Pilots’ weather diagrams → Visual cues depicting dimensional conditions
As a former designer at an airline company, I was intrigued by how pilots visualize dimensional cloud conditions and found their weather diagrams on flights. The colors and lines in the diagrams inspired the Visual Coding concept in LayerLens.
Weather Radar on Airbus
Significant Weather (SIGWX) Chart
Initial Sketch of Visual Coding
Moving to low- to mid-fidelity design, I explored Z-Order’s level distribution mechanism and the 2.5D mini-map, as well as the Visual Coding concept in detail, mapping the interaction flow. Below are key mid-fidelity designs I built.
Mid-Fidelity Prototypes
Z-Order
Assigning layers to levels based on their hierarchical relationships
Level distribution algorithm
→
Z-Order
2.5D mini-map, a dimensional view for layer “slices”
Visual Coding
Visual cues indicating layer relationships in a nested structure
Visual Coding
A contextual layer panel displaying only relevant layers
Visual Coding
Perspective scroll bar, a more intuitive dimensional navigation
Before
After
A plug-in or native Figma features?
We had a thoughtful discussion on where LayerLens should live. A plug-in would allow building a testable prototype to collect success metric data, but limit design exploration. To prioritize design quality and creativity, we decided to design it as Figma native features first, while keeping a plug-in as a future option for data-driven testing.
We tested the mid-fidelity prototype with 3 designers through moderated interviews, presenting the interactive prototype and asking follow up questions. We also held design critiques with advisors and classmates. They valued LayerLens’s impact on layer navigation and collaboration, while highlighting interaction details that could be improved to better align with users’ mental models. Below are the iterations I led after testing and feedback.
Testing and Iteration
Users found the 2.5D mini-map powerful for visualizing the layer stack and wanted to interact with it for clearer viewing and selection. Therefore, I turned it into an interactive 2.5D View within Z-Order, enabling spacing adjustments, hovering, and level selection, while keeping editing confined to the Expanded View for precision.
2.5D mini-map → 2.5D View in Z-Order
Before
After
Perspective scroll bar → A mini-map for navigation control
Users felt the perspective scroll bar reflected the dimensional nested hierarchy better than the vertical scroll bar, but its unconventional interaction felt awkward and didn’t support cross-level navigation. Thus, I refined the design into a mini-map that preserves intuitive, precise navigation while serving as a clear source of truth, indicating depth relationships of the visual cues.
Before
After
LayerLens is a visualization tool that clarifies complex occluded and nested layer hierarchies. It combines Z-Order, a smart depth-based separation for occluded layers, and Visual Coding, using visual cues that simplify navigation of deeply nested structures.
FINAL DESIGN
Z-Order – Expanded view for precise manipulation
Z-Order organizes occluded elements into depth levels by analyzing semantic importance. The Expanded View enables precise editing through adding, rearranging, and merging levels, while retaining all native Figma editing features. A live reference of the selected frame is also displayed during editing.
Z-Order – 2.5D View for instant clarity of occluded structures
The 2.5D View option provides enhanced spatial context, allowing designers to understand layout structure instantly and reduce layer panel dependency. Selecting a level directly from the 2.5D view streamlines layer selection and manipulation.
Visual Coding – Understand deeply nested structures at a glance
Solid lines mark the in-focus depth and dashed lines show parent or child levels, making contextual hierarchies clear at a glance. All native Figma editing features remain, enabling efficient task completion while learning layer hierarchies.
Visual Coding – intuitive, accessible interactions
The key navigation interaction, option/alt + scroll, provides intuitive, accessible navigation, even for users with mobility limitations. The mini-map provides a source of truth and more precise, cross-level navigation interactions.
LayerLens is also a lifesaver beyond creating UI designs…
An instant hierarchy breakdown for engineers at design-to-dev handoffs
A nesting structure scanner for the DesignOps team to maintain design systems without breaking the original layout
An easier access to occluded and nested layers in graphic design
A shortcut for spatial design edits
OUTCOME & NEXT STEPS
I plan to build a functional LayerLens prototype, either using vibe coding or converting it into a real Figma plug-in. This could also enable data-driven testing and measure real impact. Target metrics include:
Moving forward…
