FIGMA Feature
- Tullie Design
- Apr 1
- 3 min read
Updated: Apr 28
Despite its collaborative power, Figma’s version control lacks the contextual depth needed for teams to easily interpret design changes.
Through user interviews and testing, several pain points emerged:
Lack of Rationale Visibility: Users can see what changed, but not why, which slows down design reviews and hinders team alignment.
High Cognitive Load: Without embedded context, designers spend time piecing together updates from file history, comments, and Slack messages.
Async Collaboration Gaps: In distributed teams, missing context leads to confusion and unnecessary check-ins.
Manual Documentation Burden: To compensate, teams create external changelogs or resort to repetitive explanations—inefficient and error-prone.
This project addressed these issues by embedding smart, contextual annotations into the design workflow—eliminating guesswork and streamlining iteration clarity.
Problem
Figma’s current versioning tools make it difficult to track detailed design changes and understand intent behind iterations. This gap introduces friction in collaborative workflows, especially in asynchronous or distributed teams, leading to increased cognitive overhead and fragmented communication.
Objective
Design a lightweight, intuitive feature within Figma to:
Surface granular design changes with contextual metadata
Minimize manual documentation
Support high-fidelity async collaboration
Preserve the mental model of evolving design systems
Process
During a 5-day design sprint, I conducted:
Heuristic analysis of Figma’s version and comment tools
6 user interviews with product designers and design leads from SaaS and agency environments
Journey mapping across async design review workflows
I prototyped a contextual “Change Layer” overlay that enables designers to log rationale (via a smart input prompt) during each commit-level save. Metadata includes author, timestamp, affected components, and user-tagged intent (e.g., “bug fix,” “refactor,” “user feedback”).
User Testing & Results
After building a mid-fidelity prototype in Figma and running usability testing with 10 participants across 3 design teams, results showed:
46% reduction in time spent understanding design file history
3x increase in confidence navigating design changes (self-reported)
60% fewer Slack messages related to versioning or context clarification
100% of users preferred the prototype workflow over the default Figma versioning experience
Reported perceived documentation effort dropped by >70%
User Flow
Step 1: Login
Step 2: User views projects in dashboard
Step 3: Selects chosen project - opens project. (Taken from the Happy Path) User can see this project is being contributed to by multi-users (2 designers) Emilie & Trevor
Step 4: Clicks on version control. (Taken from the Happy Path)
Copy Change recommendation from "Version History" to Version control, Activity Log, Design Log, Design History
Step 5: User can see full timeline of auto design changes OR User can use advance Search and filter on multiple filters to drill down into the design changes.
When user clicks on the returned filtered list the user is taken to portions of the screen that was in the view of the designer who took those actions. User can see a overview of all the actions that have been taken in the project
Step 6: User inputs design search using filters
Filters:
Search tool (stand alone)
Contributors:
- User One
- User Two
- User Three, etc.
Actions:
- Created New ( Frame/ Component/ Design/ Page)
- Edited (*Design/ Note)
- Added (Design/ Note)
- Deleted (Design/ *Note)
- Design Reversion (At automated saved time [mm/dd/yyyy hh:mm])
Dates:
- From
- To
Pages/Frames/Components/elements (require secondary dropdown) This also requires designers to create unique names to files in order to remember them
Step 7: Users sees timeline results that are parsed through their selected filters.
User sees selections selected in pills that are cancellable (which enlargens the search results)
User can playback their current view from date: to - from
(otherwise will play back from the beginning)
Idea: Clickable playback option 2x 4x 8x 16x 32x
Step 8: User clicks on item in the time line and is taken to the page/frame/element/component
Outcome
The solution seamlessly integrates into existing Figma workflows, reducing friction in design iteration tracking. It enhances shared understanding and transparency across teams, and supports scalable async collaboration—without increasing complexity or overhead.
