1.検索画面を作成準備
![](/ckeditor_assets/pictures/2870/original_iPhoneX_Copy_2_4x.png)
このレッスンでは、上記図1のプロフィール画面を作っていきます。
初めに、今までと同様にiPhoneXSのフレームを作成し、フレーム名を「profile」に変更します。(図2)
![](/ckeditor_assets/pictures/3037/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-10-17_14.55.16.png)
次にAssetsから「lv3/bar/TabBar」を配置し、instanceを変更します。(図3)
![](/ckeditor_assets/pictures/2570/original_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2019-09-25_10.50.39.png)
2.ナビゲーションバーを作成する
プロフィール画面のナビゲーションバーを作成していきます。
コンポーネントに移り、「lv3/bar/navi」を複製します。
複製後、名前を「lv3/bar/navi_profile」に変更します。 次に、テキストラベルのカラーを#3D3D3Dに変更します。 最後に右16px、下から10pxの位置に「lv1/icon/setting」を配置します。(図4)
![](/ckeditor_assets/pictures/2612/original_aa.png)
コンポーネントを修正後、「lv3/bar/navi_profile」をフレームのprofileに配置します。(図5)
配置後、「block/nav_Left」をレイヤーリストからHideに変更します。
![](/ckeditor_assets/pictures/3046/original_asasaa.png)
図5 コンポーネント配置後
3.プロフィール画面を作成する
プロフィール画面を作成していきます。
Rectangle を375px × 218pxで作成し、カラースタイルを「FFFFFF」に設定、配置します。(図6)
![](/ckeditor_assets/pictures/3038/original_aaa.png)
ナビゲーションバー16px下に64px × 64pxのEllipseを作成します。(図7)
作成後、「lv1/img/profile_icon」にコンポーネント化します。
![](/ckeditor_assets/pictures/3039/original_sssss.png)
「lv1/img/profile_icon」から右48pxに図8のプロパティのテキストラベルを作成します。(図8)
作成後、2つのテキストラベルを選択し、「lv1/txt/information」にコンポーネント化を行います。
![](/ckeditor_assets/pictures/3040/original_wfe.png)
次に、「lv1/txt/information」を2つ複製し、マージンを8pxあけ配置します。(図9)
配置後、「lv1/img/profile_icon」を基準とし垂直中心揃えを行います。
最後に、上記で作成した「lv1/img/profile_icon」と「lv1/txt/information」×3を「lv2/block/user_information」にコンポーネント化を行います。
![](/ckeditor_assets/pictures/2604/original_aaa.png)
ユーザーネームとプロフィール文のテキストラベルを作成していきます。
「lv2/block/user_information」から下8pxに図10のプロパティのテキストラベルを作成します。ラベルは「lv1/txt/user_name」にコンポーネント化を行います。
同じように、「lv1/txt/user_name」から下8pxに図10のプロパティのテキストラベルを作成します。ラベルは「lv1/txt/user_profile」にコンポーネント化を行います。
![](/ckeditor_assets/pictures/3042/original_fdwe.png)
次にタブメニューを作成していきます。
「lv1/txt/user_profile」から下16pxに図10のプロパティでRectangleとテキストを作成していきます。作成後、「lv1/bar/tab_menu」にコンポーネント化を行います。(図10)
![](/ckeditor_assets/pictures/3043/original_qdw.png)
Assetsから「lv1/line/border」を配置を行います。(図12)
上記で作成した、Rectangle、「lv2/block/profile」、「lv1/txt/user_name」、「lv1/txt/user_profile」、「lv1/bar/tab_menu」、「lv1/line/border」を全て選択し、「lv3/profile/cell」にコンポーネント化を行います。
![](/ckeditor_assets/pictures/2598/original_aaa.png)
最後の工程のサムネイル作成です。
「lv3/profile/cell」から16px下に165px × 165pxのRectangleを作成し、「lv1/img/thumbnail」にコンポーネント化を行います(図12)。
![](/ckeditor_assets/pictures/3044/original_ssssss.png)
「lv1/img/thumbnail」を複製し配置します。(図13)
![](/ckeditor_assets/pictures/2600/original_Artboard_Copy_24.png)
配置後、個々にイメージを変更し完成となります。
お疲れさまでした!(図13)
![](/ckeditor_assets/pictures/2601/original_siuh.png)
4.まとめ
これでUI/UXデザインツール『Figma』入門は終わりです。
Figmaは毎年のように大きなアップデートがあり、より便利な機能が追加されています。また、世界中で拡張機能が開発されており、ここに載っていない便利な使い方もたくさんあります。
ぜひ1日でも早くFigmaの操作に慣れて、素早く、使いやすい、誰かの役に立つようなデザインを作っていきましょう!!