figmaでアプリのデザインをつくってみる

# この記事は
figmaを使ってアプリのデザインを作ってみる記事です。
あくまで、figma素人の自分はこうつくっているよ、ぐらいの記事です。

以下を参考にして簡易qiitaっぽいアプリデザインにします。
pixel3ベースでつくることにします。
![Screenshot_20200221-094147.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/cffeb221-61c2-a9e7-7ad3-6fc82bca5769.png)


# 手順
## テンプレート準備
* [自分のfigmaの作業テンプレートを公開するよ[モバイルアプリ向け]](https://qiita.com/ampersand-dev/items/847e149794aaeb20ce12)のテンプレートを使います。
* 作業場ファイルをコピーしてくる。
* タイトルをつける。 -> qiitaサンプル  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/9bbff276-53fb-3e46-f9d1-bf8241043291.png)


## アプリデザインの枠を作る
###### ディスプレイサイズ
pixel3のディスプレイはwidth360 * height720ですので、そのサイズのFlameを作ります。

###### 大きなパーツをはめ込む
以下をはめ込みます。適宜名前も変えます。
パーツは`Mmaterial Components`ページにありますので、コピペして持ってきます。

* 上部
  * systemAppBar(height24)
  * appBar(height56)
  * tabBar(height48)
* 下部
  * 操作ボタン(height44)

abbBarが浮き上がって見えますので、`appbar/surface`の`effects/dropShadow`を-(除去)します。 
文字などを適宜それっぽいのにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/3c65d231-13cf-9709-96c6-2d94324aedff.png)


## 色やタイポグラフィの設定
`Colors`のページにマテリアルカラー一覧があるのでそれを使います。
###### 背景色
`ffffff`(白)だと明るすぎて目に負担がかかるので、`FAFAFA`(gray50)にします。`F5F5F5`(gray100)もありです。

###### プライマリーカラー
今回は`E91E63`(pink500)にします。  

###### プライマリーカラー上の文字色
* 文字色は白を使用します。文字色はこの色に乗っているテキストの色で判断します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/f07525e8-9230-ff31-dcff-1e8b19bd5898.png)  

###### タイポグラフィ
タイトルが味気ないので、`poppins`で味付けします。  

###### 大枠の完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/70e903a4-c784-5f0f-b3e1-8d877ea3c550.png)


## コンテンツを作る
###### 余白をつくる
マージンを設定します。縦横ともに16にします。
8単位の長方形の棒を作ると便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/b88f8e41-e99d-df58-40e4-344061af1591.png)


###### コンテンツをつくる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/4c027c91-25bc-2a48-e901-76e8660f34d4.png)

* コンテンツ全体
  * marginを16にした
* アイコン
  * サイズは8の倍数から大きさを選択する。今回は48にした。
  * 角ばっているアイコンは無骨なので丸みをつけた。16にした。
* タイトル
  * タイポグラフィはマテリアルデザインが定めた中から選ぶ。body1,body2,subtitleなどの候補からbody2にした。
  * 不透明度は強調の87%
* インフォ
  * `by user 〜〜`の行。ちょっとした説明なので、タイポグラフィはcaptionかorverdriveを使用するが、今回はcaptionにする
  * 不透明度はタイトルとの兼ね合いから使用不可の38%にした。
  * 各コンテンツの幅は16がちょうど良かった。
* divider
  * dividerは`0000000`(黒)の不透明度12%と決まっている

いい感じ！ 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/88b94e2a-473b-4e06-0534-edd8087cf009.png)

サイズは8の倍数にを使用していますが、これはマテリアルデザインでサイズは８の倍数にするのがよいとされているからです。

# 完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/1aabdcc0-ebe6-a468-d786-357b38c8a725.png)

マテリアルデザインを採用すると、選択肢が最初から絞られていて、考える手間が減るのがいいですよね。


#リンク
* [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編](https://qiita.com/ampersand-dev/items/e0768faf4b7260fc28d6)
* [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その２ figma準備編](https://qiita.com/ampersand-dev/items/0bbe2de76b39db70551f)
* [デザインを何もしらない1日目の自分に "実践的" なマテリアルデザインの使い方を説明する - Layout Color Typography 編](https://qiita.com/ampersand-dev/items/28e3ba3dfd1871be9e78)
* [自分のfigmaの作業テンプレートを公開するよ[モバイルアプリ向け]](https://qiita.com/ampersand-dev/items/847e149794aaeb20ce12)