UI/UXデザインツール『Figma』入門

7-4.プロフィール画面を作る

このレッスンでは、検索画面に続き、プロフィール画面を作成していきます。いよいよこのレッスンで1つのアプリのデザインが完成です。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/11/30最終更新日:2020/01/26

1.検索画面を作成準備

図1 今回作成するプロフィール画面

このレッスンでは、上記図1のプロフィール画面を作っていきます。

初めに、今までと同様にiPhoneXSのフレームを作成し、フレーム名を「profile」に変更します。(図2)

図2 アートボード

次にAssetsから「lv3/bar/TabBar」を配置し、instanceを変更します。(図3)

図3 タブバー

2.ナビゲーションバーを作成する

プロフィール画面のナビゲーションバーを作成していきます。

コンポーネントに移り、「lv3/bar/navi」を複製します。

複製後、名前を「lv3/bar/navi_profile」に変更します。 次に、テキストラベルのカラーを#3D3D3Dに変更します。 最後に右16px、下から10pxの位置に「lv1/icon/setting」を配置します。(図4)

図4 ナビゲーションバー

コンポーネントを修正後、「lv3/bar/navi_profile」をフレームのprofileに配置します。(図5)

配置後、「block/nav_Left」をレイヤーリストからHideに変更します。

図5 コンポーネント配置後

3.プロフィール画面を作成する

プロフィール画面を作成していきます。

Rectangle を375px × 218pxで作成し、カラースタイルを「FFFFFF」に設定、配置します。(図6)

図6 プロフィール画面1

ナビゲーションバー16px下に64px × 64pxのEllipseを作成します。(図7)

作成後、「lv1/img/profile_icon」にコンポーネント化します。

図7 プロフィール画面2

lv1/img/profile_icon」から右48pxに図8のプロパティのテキストラベルを作成します。(図8)

作成後、2つのテキストラベルを選択し、「lv1/txt/information」にコンポーネント化を行います。

図8 プロフィール画面3

次に、「lv1/txt/information」を2つ複製し、マージンを8pxあけ配置します。(図9)

配置後、「lv1/img/profile_icon」を基準とし垂直中心揃えを行います。

最後に、上記で作成した「lv1/img/profile_icon」と「lv1/txt/information」×3を「lv2/block/user_information」にコンポーネント化を行います。

図9 プロフィール画面4

ユーザーネームとプロフィール文のテキストラベルを作成していきます。

lv2/block/user_information」から下8pxに図10のプロパティのテキストラベルを作成します。ラベルは「lv1/txt/user_name」にコンポーネント化を行います。

同じように、「lv1/txt/user_name」から下8pxに図10のプロパティのテキストラベルを作成します。ラベルは「lv1/txt/user_profile」にコンポーネント化を行います。

図10 プロフィール画面5

次にタブメニューを作成していきます。

lv1/txt/user_profile」から下16pxに図10のプロパティでRectangleとテキストを作成していきます。作成後、「lv1/bar/tab_menu」にコンポーネント化を行います。(図10)

図11 今回作成するホーム画面6

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」にコンポーネント化を行います。

図12 今回作成するホーム画面7

最後の工程のサムネイル作成です。

lv3/profile/cell」から16px下に165px × 165pxのRectangleを作成し、「lv1/img/thumbnail」にコンポーネント化を行います(図12)。

図13 今回作成するホーム画面8

lv1/img/thumbnail」を複製し配置します。(図13)

図14 今回作成するホーム画面9

配置後、個々にイメージを変更し完成となります。

お疲れさまでした!(図13)

図15 今回作成するホーム画面10

4.まとめ

これでUI/UXデザインツール『Figma』入門は終わりです。

Figmaは毎年のように大きなアップデートがあり、より便利な機能が追加されています。また、世界中で拡張機能が開発されており、ここに載っていない便利な使い方もたくさんあります。

ぜひ1日でも早くFigmaの操作に慣れて、素早く、使いやすい、誰かの役に立つようなデザインを作っていきましょう!!

理解度チェック

UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう

このレッスンの著者