今回もBONOのカイクンさんのサイトのこちらの再生リストに沿ってチャット画面を作成しました。（お世話になっております🙇）
動画内の解説も参考にさせて頂いています。
下記に気づいた点を記載しておきます。

UI設計の基本 → タスクではなくコンテンツをベースにデザインする。
UIの基本構成 → ナビゲーション+コンテンツ

以下、チャット画面を作成して気づいた点。
私は元々WEBデザイナーなので、WEBとの違いや意外だった点などビジュアル目線での気づきが多くなっています。（デザインの基本など既知のものはスルーしがちです）

チャット画面制作で気づいた点（ビジュアル目線多め）

・iOSとAndroidでアイコン、フォントなどが違う。
・ヘッダーに置く文字のサイズは基本は16px
・アイコン背景の正方形は消さない（配置しやすい）
・Naviの高さは基本は48px
・余白は4の倍数（8の倍数にしがちなので・・・）
・デバイスの幅が奇数の場合、オブジェクト幅を奇数にして調整する
・AutoLayoutでの整列はリストくらいしか使用していない
（基本的に距離を測って配置、というシンプルな方法だった。）

・人の視線は左から右。チャットの場合自分の発言より相手の発言の方が重要なのでしての発言が最初に目に入ってくるように左に配置。
・自分の発言と相手の発言を色で差別化（視覚的に判別しやすい）
・相手の発言と自分の発言で余白を変えていた（私なら「会話」でひとまとめにしそうだなと思ったので、こういうところも区別するんだなと）

【覚えておきたいFigmaのショートカット】
・command+G → Group化
・option+command+G → Frame化

GroupとFrameの違い

Frame（option+command+G）
・Frame＝「枠」を定義したもの。子要素の整列基準になるもの
・横幅の比率でなかのオブジェクトが連携しない
・はみ出た要素を非表示にできる
・ページの遷移（範囲内スクロール）ができる
・FillでFrameの背景色が設定できる
・Grid表示ができる
・Photoshopでいうアートボードの役割にもなる

Group（command+G）
・Group＝オブジェクトの「集合体」
・横幅の比率でなかのオブジェクトが連携する
・はみ出た要素はそのまま表示される
・ページ遷移ができない
・FillでGroup内のオブジェクトのFillがまとめて変更される
・Grid表示ができない（単なる集合体なので）

こちらの動画を参考にしました。

出来上がった制作物はこちら。
今回はiOS仕様にしてみました。

UI設計の画面の解説

ここからは動画内で説明されていたUIをデザインする時の基本の構成や考え方を残していきます。

UIの基本構成

UIの基本構成はナビゲーションとコンテンツ。
今回の画面では
・ナビゲーション → ヘッダー、検索バー
・コンテンツ → リスト

メッセージ画面の解説

ヘッダーナビゲーション
ページタイトル
左：元の画面に戻る遷移ナビ
右：ページに対するアクション（ナマエさんとの交流）

フッターナビゲーション
ページに対するアクション＝メッセージを入力して送信するアクション
アクションは指が届きやすいところにある方が良い（ボトム）

メッセージ
話者ごとにUIを調整（相手なのか自分なのかぱっと見でわかるビジュアル）
・背景の色（相手：グレー、自分：ブルー）
・自分のアイコンは非表示
・相手：左から会話が出る　自分：右から会話が出る
→人の目線は左から右。相手の会話の方が重要だから左から

会話ごとの余白（相手と自分の会話ブロックを余白で区別している。）
・話者でブロックになっている。意味の違うブロックは余白が違う。
※余白のテクニック：余白が広いほど同じグループには見えなくなる

操作した時の挙動も含めてデザインする

キーボードが立ち上がる時の挙動
フォーカスした時に必要な情報（送信ボタン）を出す

→一つ前の画面では送信ボタンは出ていない

ボトムナビゲーションと階層

ON/OFF表現
・白抜きor塗りつぶし
・グレーorブルー
・Medium or Bold

表記
ボトムナビの表記とページタイトルの表記は揃える。

ボトムナビゲーションと階層
・ボトムナビゲーションはサービス内の重要なページ項目への切り替え
・ボトムナビの項目は並行な関係（ページ同士の遷移はできない）
・ユーザーが想起する最上位の概念を配置（操作の出発点）
・階層関係にあるものをボトムナビに並べてはいけない
・WEBで言うグローバルナビと同じ位置付け

↑ここの概念がわかるとよりロジカルにUIデザインができるようになる

以上、チャット画面の作成と解説でした。
拙い文章でわかりづらい点もあるかと思いますが、言語化の練習ですな。

UIデザインはとにかく言語化だな、と思いました。
色々なUI Kitが公開されていて便利だなと思いました。
大きく分けてiphoneとAndroidの2軸なので基本全世界共通で通用するなと思いました。
階層の部分をきっちり理解した方が効率が良さそうだなと思いました。

そろそろ次のフェーズに移ろうかなと思っておりまして
ゼロからデザインかサービスをつくってみる、をやってみようと思います🙂

おしまい。