CanvasFlow

Inspiration

Collaboration in design is messy. Teams often communicate through chat, emails, or comments, while the design itself sits separately on the canvas. Feedback can get lost, tasks aren’t clear, and designers spend time guessing what to change. We wanted to bridge the gap between discussion and design, making feedback visual, actionable, and directly connected to the canvas. This inspired CanvasFlow, a tool for turning conversations into tasks anchored to design elements.

What it does

1. CanvasFlow is an Adobe Express add-on that lets teams:
2. Select a canvas element and attach it to a discussion.
3. Tag teammates to request changes or provide feedback.
4. Automatically generate tasks for tagged users, personalized per member.
5. Send email notifications with the tagged message and element preview.
6. Track progress and mark tasks complete in the Tasks tab.

In short, it makes collaboration visual, precise, and actionable, all inside Adobe Express.

How we built it

1. Teams Tab: Shows all collaborators and their roles.
2. Discussion Tab: Selected elements attach as image previews; users confirm before tagging teammates.
3. Tasks Tab: Auto-generated tasks linked to selected elements.

Technical highlights:

1. Each canvas element gets an internal ID for tracking.
2. Selected elements are converted to snapshots with metadata.
3. Emails sent using Nodemailer for asynchronous notifications.

Challenges we ran into

1. Canvas interaction limits: True drag-and-drop wasn’t allowed, so we implemented selection + confirmation.
2. Element tracking: Ensuring each element had a consistent ID across sessions was tricky.
3. Notification reliability: Emails had to correctly link to the right element and message.
4. UX simplicity: Balancing a minimal workflow with full functionality took several iterations.

Accomplishments that we're proud of

1. Designed a workflow that is intuitive yet powerful: select → confirm → tag → task.
2. Successfully integrated email notifications for tagged messages.
3. Built a working prototype within hackathon time constraints.
4. Anchored discussions and tasks directly to canvas elements, solving a real pain point.

What we learned

1. Effective collaboration tools must anchor communication to context.
2. Simple UX decisions, like confirmation before tagging, can prevent mistakes.
3. Internal IDs and mapping logic are essential for consistent element tracking.
4. Even small add-ons can significantly improve team productivity and reduce confusion.

What's next for CanvasFlow

1. Add AI-powered task suggestions from messages.
2. Enable multi-element selection and bulk tagging.
3. Add pinned comments directly on the canvas.
4. Integrate priority levels and deadlines for tasks.
5. Prepare for full Adobe Express marketplace submission.

Built With

• api
• css
• html
• javascript
• trello