Generative, Malleable, and Adaptive User interfaces
Credits: Anna Le, Vyomi Seth, Elizabeth Webb, David Perez
The redesigned, adaptive interface for Figma personalizes the design experience by tailoring tools and guidance to users' skill level and context, helping them understand and recreate designs through step-by-step insights.
About
How might we redesign Figma into a generative, malleable, and adaptive interface that flexes with each user’s goals, experience level, and context, simplifying the design process without limiting creativity?
Problem
To bridge the gap between finding inspiring community work and being able to confidently recreate it on your own by understanding the steps the original designer took.
Goal
Paper Wireframes
User Flow
Low-Fidelity Wireframes
High-Fidelity Wireframes
Focus Tools: A customizable workspace that adapts to the user’s current task, which allows quick switching between editing, annotation, and tutorial-focused modes without disrupting workflow.
Reference Library: A tab similar to the “Files” and “Assets” panels in Figma, where users can save and organize resuable references, component breakdowns, and design resources for future projects.
Sequence Tutorial: A guided, step-by-step tutorial system that breaks down components and workflows into interactive sequences, allowing users to switch efficiently between tutorial mode and active design tools.
Prototype Link
Functionality
1
Reference Tab next to “Files” and “Assets” in Figma.
2
Component breakdowns and tutorial sequences.
3
Switch between Focus Tools and Tutorial Mode.
4
Save custom references to a Reference Library for reuse.
Future Improvements
1
Adapting users’ unique design decisions if they choose to stray from the original creator’s work.
2
Create a reference for users looking for a faster walkthrough rather than a tutorial.
3
Add guardrails that inform users of important design components necessary for replicating a reference.
4
Functionality for the reference library that allows users to use saved design reference sequences within any file.