In Kuika’s UI Design module, the Comments Panel is used to facilitate the exchange of feedback within the team on screen designs. With this panel, you can leave notes about the design as a whole or specific elements, tag your teammates, and track feedback until it is resolved.

Accessing the Panel

You can access the Comments panel by clicking the speech bubble icon located on the vertical toolbar on the left side of the UI Design screen. If there are any open (unresolved) comments in the panel, a counter (badge) will appear over this icon.

Panel Structure

Filters

At the top of the panel, there are four filter tabs:

• All: Displays all comments on the page (open and resolved).
• Open: Displays comments that have not yet been resolved (active).
• Resolved: Displays resolved comments.
• @: Displays comments in which you have been tagged (mentioned).

Next to each tab, there is a number badge indicating how many comments are in that category.

Search and Sorting

Below the filters, a search box (Search comments...) allows you to search the comment content. The Newest dropdown menu on the right lets you change the sorting order of the comments.

If there are no comments yet or no results for the selected filter, the message “No comments in this filter” is displayed.

Comment Card

Each comment card contains the following information:

• Sequence number: A badge showing the comment’s number on the page (e.g., 1, 2).
• User avatar and name: The commenter’s initials (e.g., “JM”) and full name (e.g., “John Mark”).
• Time information: A relative time expression showing when the comment was posted (e.g., “6s”, ‘38s’).
• “...” menu: Used for additional actions related to the comment (e.g., deleting, editing).
• Element label: A small label indicating the type of element the comment was posted on (e.g., “Label,” “Button”).
• Comment text: The feedback written by the user (e.g., “Let’s change the text here,” “Let’s change the button color”).
• “+” icon: Used to add additional content to the comment.
• Reply / Resolve: The Reply link to write a response to the comment, and the Resolve link to mark the comment as resolved.

Comment Display on the Canvas

A comment left on an element is displayed on the canvas as a numbered badge above or next to the relevant element (e.g., “1” or “2” inside a blue circle). This allows you to visually track which comment belongs to which element in the design. The numbers on the comment cards listed in the left panel correspond exactly to the badges on the canvas.

When an element is selected, a breadcrumb trail appears at the top of the canvas, showing the element’s exact position in the page hierarchy. For example:

ForgotPassword > Row7 (Row) > Col9_0 (Col) > Panel1 (Panel) > Row1_0 (Row) > Col3_0 (Col) > Row1_0 (Row) > Col3_0 (Col) > VerticalStack0_0 (VerticalStack) > lblSubTitle (Label)

This bar clarifies exactly which nested element the comment belongs to.

Adding a Comment

At the bottom of the panel, there is a field for adding a new comment:

1. First, select the scope of the comment:

• This page: The comment is posted generally on the page (not tied to a specific element).
• Selected component: The comment is attached to the element currently selected on the canvas.

1. Type the comment text in the “Write a comment... (@ to mention)” field. You can tag (mention) team members using the @ symbol.
2. You can attach a file or screenshot to the comment using the paperclip icon.
3. Click the Send button to submit the comment.

Example of Element-Based Commenting

For example, when the comment “Let’s change the text here” is left on a Label element (lblSubTitle) on the “ForgotPassword” screen:

• The comment appears on the canvas next to the relevant Label as a badge numbered “1”.
• It is listed on the comment card in the left panel with the “Label” tag.

When a comment such as “Let's change the button color” is left on a Button element (btnSend) on the same page:

• This comment is marked on the canvas with a badge numbered ‘2’.
• It is listed in the left panel with the “Button” tag.

In this way, multiple comments associated with multiple elements on a single page can be tracked both as numbered items on the canvas and in chronological order (from newest to oldest) in the left panel. As the number of open comments increases, the counter in the Open tab at the top of the panel is updated accordingly.