Figma: P2P page module

[CloudyRowly]

Design P2P page with Figma

This will be a module that can be access through the menu bar on the left side

Design:

• Should show top title bar

• Should show left side menu bar

• Reference chat platforms like Facebook Messenger or Discord: Split screen into two vertical section:

  • Left section (~1/5 screen width) is to show existing chats, each existing chats should be shown using a banner, with the user name and last message content
  • Right Section (~4/5 screen width) is to show current selected chat
  • Chat bar should show on bottom

Figma board

[CloudyRowly]

@nicelyhorse is this done? If so, please remember to move it to the suitable status as you work on it next time. I have seen some changes to be made:

• Delete extra functions like call, mic recording, file attachment, emoji, camera (we have no plan on adding those features yet)
• Replace the colours with variable names instead

[nicelyhorse]

Fully understand the first modification requirement. Sorry to bother again, but I don't particularly understand the meaning of the second requirement. The Hex values ​​of the colors used in the pages I made are consistent with the Hex values ​​of the colors selected during the discussion.

[CloudyRowly]

Fully understand the first modification requirement. Sorry to bother again, but I don't particularly understand the meaning of the second requirement. The Hex values ​​of the colors used in the pages I made are consistent with the Hex values ​​of the colors selected during the discussion.

Yes, they are the same colours, but Figma provide the function of colour variables, which I have added. If you follow the attached screenshot below, you should be able to find the variables I mentioned. If we use variables, we can easily change the color theme of every page in just 1 click, later on you will not want to go over each element and change the color one by one.

PS: I have updated the issue's status for you, do it yourself next time. Starting by moving it to "In progress" when you start fixing the mentioned requirements.

[nicelyhorse]

Thank you very much, team leader. I am not very proficient in using GitHub, but I will master it as soon as possible. I will complete these two changes today and tomorrow.

[CloudyRowly]

• Move menu bar to the top
• Remove photos, videos in the extra detail panel, as well as name and avatar in that panel as it is redundant

[nicelyhorse]

Got it and finish all the requirement, please check

[CloudyRowly]

How can user access the detail pane? Maybe add a button?