Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 56 additions & 7 deletions content/en/kanvas/designer/comments/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ You can add comments in a number of convenient ways. Since designs are public by

### Commenting via context-click

Context-click on any area of your design, and from the contextual menu, select "Add a Comment". Using this context-click method allows for inline placement of your remarks right where you need them - *in context*.
Context-click on any area of your design, and from the contextual menu, select "Add a Comment". Using this context-click method allows for inline placement of your remarks right where you need them - _in context_.

<figure>
<img src="./comment-canvas.png" alt="Comment by context-clicking on your design" />
Expand Down Expand Up @@ -66,7 +66,7 @@ Easily draw the attention of relevant team members by tagging them in your comme
### Comment on Specific Elements

Leave comments on specific elements within the design, whether it's a shape, text, or an entire component. This specificity ensures that feedback is targeted and directly related to the part of the design under discussion.

### Resolving a Comment

Resolving a comment thread indicates that the conversation on that topic has concluded. When a comment is resolved, the comment component is removed from view on the canvas.
Expand Down Expand Up @@ -147,8 +147,8 @@ Kanvas auto-generates comment names, useful for quick feedback. When duplicating
- **Timestamp**: The original creation time is preserved.
- **Threads**: All replies in the original thread are included.
- **Name**: If the comment has a name, the clone keeps the same name.
- **Placement**:
- **Duplicate**: Instantly places the comment in the same design.
- **Placement**:
- **Duplicate**: Instantly places the comment in the same design.
- **Copy**: Allows you to paste the comment manually into the same or a different design.
- **Notifications**: Neither duplicating nor copying sends a creation notification to the design owner or participants. However, replies to the cloned comment will notify participants unless they’ve muted the thread.
- **Independence**: The clone is separate—editing or deleting the original does not affect the copy.
Expand Down Expand Up @@ -181,7 +181,7 @@ Give long-lived comments short, descriptive names like `"Needs Load Balancer"` o
so you can quickly find them in the Layers panel later on.
{{< /alert >}}

### Reopen a Resolved Comment
### Reopen a Resolved Comment

If a comment is resolved by mistake, it can be reopened. Adding a new comment to a resolved discussion will also re-open the thread. Reopening a comment allows you to reinitiate conversations, address additional concerns, or make further changes.

Expand Down Expand Up @@ -241,14 +241,63 @@ You can also manage all your comment notification settings centrally through the

- While email alerts are muted, you can still access and view all comments on the design at any time.
- You'll never miss an important mention, as notifications for mentions outside the muted thread remain active.
{{< /alert >}}
{{< /alert >}}

{{< alert type="info" title="Missed Notifcations">}}
Kanvas does not track the read or unread status of messages inside comment threads for each user. If a user is mentioned, but misses the notification, they might not become aware of the comment until they receive a new notification for another comment in that conversation.
{{< /alert >}}

## Best Practices for Effective Design Reviews

### Using Comment Features Effectively
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since there's only one third-level heading under a second-level one, and then all fourth-level headings follow, we could simplify. Just remove that lone third-level heading and promote all the fourth-level headings to third-level ones.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh got it will do it the changes and lyk 👍🏻

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zihanKuang made the changes as mentioned!!


To make your reviews more structured, Kanvas offers a number of tools inside the comment system itself. Use them to streamline collaboration and clarify your feedback.

#### Use Color-Coded Comments

<figure>
<img src="./comments-color.png" alt="Categorize Comments" />
<figcaption>Use color to visually categorize your comments</figcaption>
</figure>

- 🔴 **Security** concerns
- 🔵 **Scalability** or performance-related notes
- 🟢 **UI/UX** feedback
- 🟡 **Open questions** or suggestions

This makes it easy for team members to scan and prioritize feedback based on type.

#### Use Annotation Arrows

Link your comment to a specific part of the design using **annotation arrows**. This reduces ambiguity and ensures the context of your comment is crystal clear.

Follow the steps about how to annotate the comment:

<figure>
<img src="./kanvas-annotations.gif" alt="use of annotation arrows" />
<figcaption>Annotating a comment</figcaption>
</figure>


#### Lock Important Comments

Lock comments in place to keep them visible even as you continue working. This is helpful for feedback that should remain persistent throughout the review cycle.

Example on how to lock your comment:
<figure>
<img src="./locking-comment.gif" alt="Lock the comment" />
<figcaption>Locking comments </figcaption>
</figure>

#### Group Related Comments

Bundle multiple related comments using the **Group** feature. This keeps threads organized and easier to track, especially for complex designs with many parts.

<figure>
<img src="./grouping -comments.gif" alt="Grouping of Comments" />
<figcaption>Two related comments Grouped</figcaption>
</figure>

### Resolving vs deleting comments

Resolving a comment hides it from the canvas but keeps its history, so you can always revisit or reopen it later. Deleting a comment removes it entirely — including all threads and history — and cannot be undone.
Expand All @@ -274,4 +323,4 @@ Highlight the most critical feedback first. This ensures that the designer focus
**What if two people act at the same time?**

If someone resolves a comment while you're still typing in it, the comment will immediately close for both of you. You'll see a message letting you know that the thread was resolved.
-->
-->
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.