見出し画像

AdobeXDでTwitterのトレースやってみた

0. 作成環境

- 前回と同じ https://note.mu/kani_nabe_mgmg/n/na993e7c00562

- トレース共有リンク https://xd.adobe.com/view/20e2c5c6-3cc6-437c-843a-73afe5e0c3e0


1. ホーム/検索/通知/メッセージ/ツイート作成/メッセージ作成

- マージンは両側10dpずつ

- ツイート作成ボタンとメッセージ作成ボタンはフロートボタンというやつ

- Robotoいれたけど日本語のフォントがぴったり合わない。なんでだろ。メイリオが一番近かったのでこちらを使用。

- アイコンがたくさんあるので結構時間かかってしまった

- ちゃんと青い鳥も作ったよ\(^o^)/

- キーボード文字部分は画像(Twitterのレイアウトと関係ないので)


2. ドロワー

- ステータスバーは画面によって色、透明度等を指定する

- 罫線は16:9なのかなーと思ったけどそうでもなかった



3. プロフィール/ツイート/ツイートと返信/メディア/いいね

- 青いバー部分(今ここマークって勝手に呼んでる)はホーム画面は4等分だったけど、こっちは文字幅に合わせている

- まぁ、ホーム画面はアイコンでこっちは文字列だからな


4. リスト/リスト追加


5. モーメント/モーメント追加


この記事が気に入ったらサポートをしてみませんか?