Cogs 127
Stay in Figma, Stay Focused.
Overview
Designers often juggle multiple tools for communication and task management, leading to cognitive overload and frequent context switching between apps like Slack, Asana, and Figma. Our project, Work Mode, bridges this gap by integrating project management tasks and feedback directly into Figma, creating a seamless workflow for design teams.
By embedding floating comments and task tickets within Figma, Work Mode eliminates the need to switch between tools, allowing designers to access their tasks and feedback in context. Through multiple iterations and user testing, we refined our solution to be intuitive, customizable, and efficient while maintaining minimal user setup.
Problem Statement
Designers and product teams rely on multiple tools to manage tasks and feedback, but switching between them disrupts their workflow and slows down progress. While tools like Asana and Slack help with collaboration, they require designers to leave Figma to check their assignments and discussions. We aimed to create a frictionless solution that allows designers to stay within Figma while seamlessly managing tasks and integrating feedback.
My Role
I led the UI/UX design for this project, including creating the Figma prototype and designing the logo and branding for Work Mode. Additionally, I played a role in user research and testing, conducting interviews with stakeholders to understand their pain points and validate our design decisions.
Key Responsibilities:
Designed the Work Mode plugin prototype in Figma
Created the branding, including the Work Mode logo
Conducted user research and usability testing to gather insights
Refined the user flow to reduce friction in the setup process
Iterated on design improvements based on stakeholder feedback
User Research & Key Insights
To ensure our solution met real user needs, we conducted user interviews with designers, project managers, and UX professionals. We focused on understanding their pain points in managing tasks and feedback within Figma.
Customization vs. Simplicity
Different users have different needs, and while customizability is valuable,
too much flexibility can lead to user error. We needed to strike a balance
between allowing customization while keeping the system intuitive and structured.
Minimizing Context Switching
Users frequently mentioned how frustrating it is to switch between multiple tools
while working on a design. Integrating Slack comments and Asana tickets directly into
Figma allowed them to focus without unnecessary interruptions.
Reducing Setup Complexity
Initially, our setup process required users to connect multiple project management tools
(Jira, Asana, Slack). However, feedback showed that this was overwhelming, so we streamlined the
setup to focus on Slack and Asana while keeping Work Mode open to future integrations.
Design Process & Iterations
When we started, we knew that designers often struggle with context switching—jumping between Slack, Asana, and Figma disrupts focus and slows down progress. However, during our initial research and stakeholder interviews, we learned that the problem was even more nuanced than we thought.
Different designers have different ways of managing tasks.
Some prefer structured task lists in project management tools like Asana or Jira.
Others rely on ad-hoc Slack messages and treat them as informal to-dos.
Current solutions force designers to leave Figma.
They check Asana for task updates.
They read Slack messages for feedback.
Then they return to Figma, losing focus along the way.
Comment management is messy.
Feedback is scattered across multiple Slack threads, making it difficult to track.
Some feedback is not actionable or not relevant at the time, leading to clutter.
These insights shaped our approach: Work Mode needed to integrate project management and Slack feedback directly into Figma in a way that is both structured and flexible.
Final Prototype and Design Refinements
As we iterated on Work Mode, we gathered feedback from designers to refine our approach. One key insight came from a professional designer who advised us to treat this prototype as a demo. Instead of overwhelming users with multiple integrations upfront, we focused on Slack and Asana to illustrate the concept clearly. However, Work Mode is designed to be tool-agnostic—future iterations could support Jira, Trello, or Monday.com.
This feedback helped us simplify the user experience while ensuring scalability. By showcasing a streamlined workflow, we could clearly demonstrate the value of reducing context switching without unnecessary setup complexity.
Key Refinements Based on Feedback:
Refining Setup & Onboarding
Initially, users were required to manually connect multiple tools (Slack, Asana, Jira, etc.).
We simplified this by focusing on Slack for communication and Asana for task management, making it clearer while keeping the system open-ended for future expansions.
Optimizing the Floating UI
Early feedback indicated that the floating UI felt too small and hard to navigate.
We improved visibility by allowing comments and tickets to be adjusted for better readability.
Clarifying Feedback & Selection
Some users were confused about how Slack comments would appear in Figma.
We refined the system so that users can manually select which Slack messages get imported and placed within the design.
Enhancing Comment Interaction
Users wanted more control over Slack comments.
We included the option to reply to Slack directly from Figma, reducing the need to switch apps.
Final Thoughts & Lessons Learned
This project taught me how real-world design challenges require balancing structure and flexibility. Some of my biggest takeaways:
Customizability must have limits.
Too much flexibility overwhelms users.
The best designs guide users without restricting them.
User testing is essential.
We initially thought a sidebar was the best approach.
Through testing, we realized floating comments felt more natural.
Every design choice must serve a purpose.
Reducing setup steps made Work Mode easier to adopt.
Keeping Slack comments contextual improved focus.
Conclusion
Work Mode is designed to make collaboration easier for design teams, helping them stay focused and productive without switching between apps. Our final prototype offers a streamlined, intuitive experience that makes feedback and task management seamless within Figma. Try it out below!