Help us understand the problem. What is going on with this article?

エンジニアでも出来る!Figmaを使って自作アプリをリニューアル

以前、「React Native製、予定作成アプリ「ペペロミア」を公開しました」の記事を投稿しましたが、その続編です。

■React Native製、予定作成アプリ「ペペロミア」を公開しました
https://qiita.com/wheatandcat/items/3324dfd141729e46009f

その後デザインをリニューアルしたので、進め方と変更した箇所について紹介していきます。

Figma

スクリーンショット 2019-07-30 23.45.55.png

https://www.figma.com/

プロトタイピング(デザイン)ツールです。
出来ることはSketchと似ていますが、1人で使用するなら無料ブラウザで使用可能なので導入のハードルが低いので、個人プロダクトではオススメです。

今回はFigmaを軸にアプリのデザインリニューアルを進めました。

UIリニューアル

アイコン変更

アイコン.png

まずは、新規アイコンを作成して、
そこからPrimaryカラー、Secondaryカラーを決めてデザインの方に反映させていきました。

アイコン自体ペペロミアの名前と植物というキーワードから膨らませて、
取り敢えずそれっぽいアイコンを色々描いてみて見て、そこから整えていきました。

以下はアイコン考え時の残骸です。

アイコン案

Figmaでカラーを管理

デザインに統一性を出すためカラー管理が必要だったので以下のように管理しています。

  1. カラー管理用のページを作る

スクリーンショット 2019-07-31 08.26.46のコピー.png
2. 管理カラーのオブジェクトを作成して色を設定

スクリーンショット 2019-07-31 08.34.17.png
3. 対象のカラーを追加

スクリーンショット 2019-07-31 08.34.44.png
4. 追加したカラーに名前をつける

スクリーンショット 2019-07-31 08.35.00.png
5. カラー追加後は、以下の通りどこからでも対象のカラーが指定可能になります

スクリーンショット 2019-07-31 08.35.26.png
スクリーンショット 2019-07-31 08.37.04.png

この機能を使用してUI側にカラーを設定していきました

UI作成

まずFrameを追加していきます

スクリーンショット 2019-07-31 08.45.20.png

各デバイスのサイズがあるので、今回は「iPhoneX」を指定します

スクリーンショット 2019-08-01 23.22.53.png

これでFrameができたので、画面を作っていきます。

スクリーンショット 2019-08-01 23.34.49.png

まずは、背景色を設定

スクリーンショット 2019-08-01 23.37.07.png

ヘッダーにスマホっぽい情報を追加

スクリーンショット 2019-08-01 23.38.48.png

今回は予定作成のタイトル画面を作るので予定名のinputを追加

スクリーンショット 2019-08-01 23.41.57.png

画像とか追加

スクリーンショット 2019-08-01 23.46.06.png

さらにキーボードと入力カーソルを追加してみる。
これで大体それっぽくなるかなと

スクリーンショット 2019-08-01 23.48.02.png

このFigmaを元にReact Nativeで画面を作成しました。大体こんな感じで進めていきました。

IMG_3AA3E9BFAEF4-1.jpeg

ちなみにキーボードとかヘッダーとかFigmaのcomponentで管理しているので、
共通のパーツとして、どこでも使用可能です。

スクリーンショット 2019-08-01 23.46.54.png

component登録をするとAssetから簡単にドラッグ&ドロップできるので使いやすいです。

スクリーンショット 2019-08-01 23.56.30.png

ProtoTypeで画面遷移を管理

FigmaにProtoTypeによる画面遷移の管理も行えます。
設定するとこんな感じになります

スクリーンショット 2019-08-02 00.02.16.png

ProtoTypeのプレビューを使うと、こんな感じに操作できます

プレビューリンク

こちらのリンクから実際に操作可能です

https://www.figma.com/proto/YYon1ahSQ7W15Mug0LsovHws/%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%9F%E3%82%A2?node-id=23%3A27&viewport=97%2C258%2C0.11844614148139954&scaling=scale-down

アプリのリニューアル前、リニューアル後比較

実際のアプリの変更差分について紹介していきます

ホーム画面

スクリーンショット 2019-08-02 00.02.16.png

スケジュール画面

スクリーンショット 2019-08-02 00.02.16.png

スケジュール画面

  • URLと集合場所の入力を追加

スクリーンショット 2019-08-02 00.02.16.png

スケジュール作成画面

タイトル未入力

スクリーンショット 2019-08-02 00.02.16.png

タイトル入力後

スクリーンショット 2019-08-02 00.02.16.png

また、キーボード入力を2回タップすると候補から選択可能なUIを追加しました

スクリーンショット 2019-08-02 00.02.16.png

スケジュール作成後にスケジュール追加

初期状態

スクリーンショット 2019-08-02 00.02.16.png

詳細スケジュール追加後

スクリーンショット 2019-08-02 00.02.16.png

ちなみにv1.0.5ではヘッダーがスクロールさせると以下のように短縮されるように変更しています

スクリーンショット 2019-08-02 00.02.16.png

Storeのスクリーンショットを作り直しました

以前は、AppLaunchpad でスクリーンショットを作成していましたが、
こちらもFigmaで作ったら良いかもと思い、作ってみました。

スマホの画像は以下のサイトから作成しています。

https://mockuphone.com/#ios

Figmaで作成

スクリーンショット 2019-08-03 20.51.09.png

で、これをベースに他のデバイスも作成

スクリーンショット 2019-08-03 20.53.38.png

Apple StoreとGoogle Playの表示

スクリーンショット 2019-08-03 20.55.12.png

スクリーンショット 2019-08-03 20.56.02.png

Webサイトもリニューアルしました

Webの方もFigmaベースで作り直してみました

Figma

スクリーンショット 2019-08-03 19.51.34.png

実装してみた

https://peperomia.app/

ダウンロード (1).png

まとめ

  • Figmaは操作が簡単で多機能な良いツールでした。
  • Storeのスクリーンショット、Androidの広告バナーやGoogle認証の画像を、どう管理しようかと悩んでいましたが、Figmaで作ってそのまま管理すれば良いかなと思いました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした