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

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

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

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

# Figma

<img width="1353" alt="スクリーンショット 2019-07-30 23.45.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/c82defbe-4d30-c0f4-8c19-8fa9995a34b6.png">

https://www.figma.com/ 

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

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

# UIリニューアル

## アイコン変更
![アイコン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/dcb4c4d3-2b16-b717-f82a-27f296da0c40.png)

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

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

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

<img width="300" alt="アイコン案" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/1a01c494-581f-3723-bf66-7b3add25b5ee.png">

## Figmaでカラーを管理

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

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

<img width="600" alt="スクリーンショット 2019-07-31 08.26.46のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/9a3f851a-6928-e7aa-f19b-2e8e0419cd86.png">
 2. 管理カラーのオブジェクトを作成して色を設定

<img width="600" alt="スクリーンショット 2019-07-31 08.34.17.png" src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F170824%2F5d47b9b5-49ed-1354-8644-b5490939c724.png?ixlib=rb-1.2.2&auto=compress%2Cformat&fit=max&s=25ddc594a93b7a735801105c891a34c5">
 3. 対象のカラーを追加

<img width="600" alt="スクリーンショット 2019-07-31 08.34.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/009c2474-fab5-791b-82b1-2eac46a2e087.png">
 4. 追加したカラーに名前をつける

<img width="400" alt="スクリーンショット 2019-07-31 08.35.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/8c3fd72f-33e0-1576-b2f6-95da99529522.png">
 5. カラー追加後は、以下の通りどこからでも対象のカラーが指定可能になります

<img width="400" alt="スクリーンショット 2019-07-31 08.35.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/275d13cf-aeeb-8f0f-80ac-39304a22da28.png">
<img width="600" alt="スクリーンショット 2019-07-31 08.37.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/6f029b43-8780-4772-7a76-7a6140484e80.png">

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

## UI作成

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

<img width="300" alt="スクリーンショット 2019-07-31 08.45.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/3338fe01-6733-6a06-cbca-3fedd3d0677f.png">

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


<img width="250" alt="スクリーンショット 2019-08-01 23.22.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/45f502a0-42f0-1c3e-d5de-439a02059aa6.png">

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

<img width="120" alt="スクリーンショット 2019-08-01 23.34.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/13a773c1-32c8-c656-c48c-833aec68dd5c.png">


まずは、背景色を設定

<img width="240" alt="スクリーンショット 2019-08-01 23.37.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/413e441c-d5fa-a3ec-4d9b-fadb6d0f37e6.png">

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

<img width="120" alt="スクリーンショット 2019-08-01 23.38.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/86141f60-c2f4-a166-1588-a06b9747def9.png">

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

<img width="120" alt="スクリーンショット 2019-08-01 23.41.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/a83c17a0-c5b5-9c93-e372-78cbc28e42ac.png">

画像とか追加

<img width="120" alt="スクリーンショット 2019-08-01 23.46.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/f8f6568e-39fe-8883-0650-baff86e2f9a2.png">

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

<img width="120" alt="スクリーンショット 2019-08-01 23.48.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/52b870ac-e825-3bcd-3429-401aa1a9123b.png">


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

<img width="240" alt="IMG_3AA3E9BFAEF4-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/47c5a2d4-9860-4021-df2c-cb3f521fd47b.jpeg">

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

<img width="430" alt="スクリーンショット 2019-08-01 23.46.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/c5862e2e-6725-da3d-3f0c-7c58e61d5155.png">

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

<img width="430" alt="スクリーンショット 2019-08-01 23.56.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/ccc57ec2-76c0-c47d-2e94-25b85713250f.png">


# ProtoTypeで画面遷移を管理

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

<img width="1207" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/c768e66b-4bd5-d96f-4b9a-6108b4f2dfa9.png">


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


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">FigmaのProtoTypeプレビュー機能 <a href="https://t.co/L9gBam795v">pic.twitter.com/L9gBam795v</a></p>&mdash; 飯野陽平 (@wheatAndCat) <a href="https://twitter.com/wheatAndCat/status/1156944707898884096?ref_src=twsrc%5Etfw">August 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## プレビューリンク

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

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


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

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

## ホーム画面
<img width="500" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/63fdcd41-ca8c-7a59-4aae-3f765673442a.png">

## スケジュール画面
<img width="500" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/26148a02-e15f-b2dd-86c7-b77c8869e162.png">

## スケジュール画面
 * URLと集合場所の入力を追加 

<img width="500" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/9c0df68a-87e9-18d6-610d-8aa3d4b9cca2.png">

## スケジュール作成画面

### タイトル未入力
<img width="500" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/bbfd79bc-8b9c-f2af-4d1f-32950218be18.png">

### タイトル入力後
<img width="500" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/88b13524-e2bb-cf99-28c2-d6dc3bbbb41b.png">

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

<img width="120" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/03c64e3e-00d9-c5b6-ef7e-f7bfb03a8ed6.png" style="padding-left:100px;">


## スケジュール作成後にスケジュール追加
### 初期状態
<img width="500" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/7c53ab41-921f-2cf3-59a0-04a34bc6bd36.png">

### 詳細スケジュール追加後
<img width="500" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/748c83a1-20b0-ad3c-a19b-861e11b971c6.png">

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

<img width="120" alt="スクリーンショット 2019-08-02 00.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/a7624dfe-ea15-ad91-f5e6-ac29c31d024d.png" style="padding-left:100px;">

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

以前は、[AppLaunchpad](https://theapplaunchpad.com/) でスクリーンショットを作成していましたが、
こちらもFigmaで作ったら良いかもと思い、作ってみました。

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

https://mockuphone.com/#ios

## Figmaで作成
<img width="1290" alt="スクリーンショット 2019-08-03 20.51.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/6404bed0-e6a1-1389-75e9-ed10c9ae8798.png">

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

<img width="814" alt="スクリーンショット 2019-08-03 20.53.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/064284bc-1333-51b2-5f6f-a2897e874945.png">

## Apple StoreとGoogle Playの表示

<img width="400" alt="スクリーンショット 2019-08-03 20.55.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/2fc513f4-19e0-5623-bfd3-75c8e62c97f7.png">


<img width="400" alt="スクリーンショット 2019-08-03 20.56.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/a0eedb2b-a7d6-c335-8170-8fe70ad3eddf.png">






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

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

## Figma

<img width="1293" alt="スクリーンショット 2019-08-03 19.51.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/33c0be84-017f-3c3a-883f-2f7fd3d3e5c5.png">


## 実装してみた

https://peperomia.app/

![ダウンロード (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/1fea839b-a929-a3bd-0e55-7c5dde0f489f.png)



# まとめ
 * Figmaは操作が簡単で多機能な良いツールでした。
 * Storeのスクリーンショット、Androidの広告バナーやGoogle認証の画像を、どう管理しようかと悩んでいましたが、Figmaで作ってそのまま管理すれば良いかなと思いました。