デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その２ figma準備編






#この記事について
* マテリアルデザインに基づいてfigmaの設定をします。
* sketchユーザーは、便利なUIKitを取得する から見てください。


# 私について
* 個人開発者としてモバイルアプリをつくって、その収益で生計を立てたいエンジニア
* Flutterで開発を始め、いくつかアプリを作ろうとするも、いづれのアプリもデザインが出来ずに断念
* デザインを学ぶ必要に迫られて、DailyCocoda!でデザインを学び始める。
* デザインは全くの初心者でセンス0
* 7/23日から始めたDailyCocodaが10/15日に目出度く完走 <-- いまここ
* アプリをリリースして生計を立てる <-- これから

#figmaの登録
* [figma公式](https://www.figma.com/)にアクセスしてください。
* `Try Figma For free` から登録しましょう。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/ca1bb091-0d93-c00c-8d57-682f00199909.png)
* 必要事項を入力して`Create account`しましょう
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/8b804b0d-0421-a587-2541-4fcc19343c47.png)
* 下記画面が出てくるので、名前と職業を入力し、同意して`Create Account`しましょう(なんでもいいです)
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/2aa928a0-1db9-5b7c-64da-f8bd63e1a740.png)
* 登録完了！
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/f5f6e875-7f99-f133-ce0d-3e10773958b1.png)

#figmaのチーム、プロジェクト設定
figmaのフォルダ構成は、

  * チーム
     * チーム配下のプロジェクト
         * プロジェクト配下のファイル( <-作業する場所)

となり、それとは別に

 * 直近のファイルが表示される`Recent`
 * 個人、下書き用途の`Drafts`
 
の2ファイルが存在します。

今回は、自分用のチーム、プロジェクトをつくって、その配下のファイルに色々設定していきます。

### チームの作成
* ちょっとわかり辛いですが、左下の `+ New Team ...`をクリックします。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/1904c684-e94a-cb3d-0410-931e7a0522f9.png)
* 名前はなんでもいいです。私は個人開発としました。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/7528b287-91cc-a928-ac0e-cf283cd0b5fa.png)
* ぼっちチームなので、`skip for now`
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/b1612d5b-701e-59d8-8754-3674bbb4d4a8.png)
* 当然`Free`プラン
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/72f0d5c3-b305-a1e7-a62b-cc36bf832820.png)
* チームを作成し終えました!
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/8868b729-87b6-b041-a2f6-ddaa4753dff5.png)

### プロジェクトの作成
* 次にプロジェクトを作成します。右上の`New Project`をクリックしてください。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/58601315-a465-599c-0699-abbcfc9b49cf.png)
* 名前を入力します。なんでもいいです。`Create Project`をクリック
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/9ff34bdf-7d09-d98a-ab38-e4b492bcc0c1.png)
* 終わり
* ちなみに右上の`New File`からファイルをつくることができます。

# 便利なUIKitを取得する
* マテリアルデザインをベースにデザインするために欠かせない2つのUIKitを取得します。
  * [material design themeing kit ](https://www.figma.com/resources/assets/material-design-themeing-ui-kit/)
  *  [Material Icons—Outline](https://www.figma.com/resources/assets/material-icons-outline/)

### material design themeing kit
* [material design themeing kit ](https://www.figma.com/resources/assets/material-design-themeing-ui-kit/)を開いて、`Open the Material Themeing kit in Figma`をクリックします。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/ecdb882d-c14f-52f8-5f2e-6e515ea1a86c.png)
* 開けたら左上のメニューボタンから`Back to Files`で戻ります。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/0f5da1ae-2582-ee9e-d3bf-e9fa523cfe3a.png)
* このファイルはDraftsに存在しますので、ドラッグアンドドロップでマテリアルデザインプロジェクトに持ってきます。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/eaa984fe-d22c-ed84-6445-7a635dfc15f1.png)

### Material Icons—Outline
* [Material Icons—Outline](https://www.figma.com/resources/assets/material-icons-outline/)も上記手順と同様にマテリアルデザインプロジェクトに持ってきます。

# 作業場ファイルを作る
* ここらへんはもうお好みの領域なのですが、作業場所ファイルを作ると便利です。
* `material design themeing kit`はあらかじめ必要な設定を一通りしてあるファイルなので、このファイルをベースに作業場ファイルを作っていきます。
* 右クリックしてDuplicateします。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/c5c5ff47-2a54-0d11-8bf1-bfc7682299e2.png)
* Duplicateしたファイルを開いて、まずはページを作ります。
* `Pages +`をクリックして名前を入力します。適当に作業場と命名しました。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/de05acea-7964-ee4a-73ba-4f81b0748754.png)
* 作業場以外のページを右クリックから`delete page`で削除していきます。
* ファイル名も適当に作業場としましょう
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/7470781a-9763-227b-f741-5aaf9532dc38.png)
* 作業場のColor Styleのprimaryとsecondaryを全部削除します。(それ以外は消さないで！)
* なんでprimaryとsecondaryを全部削除するのかというと、UIごとに設定が変わるからです。UI作るたびに手動で設定しましょう。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/bb314f39-d439-1cc0-6258-dce5228f83b9.png)

# 次のステップ

* figmaに関して最もまとまっている記事です。ぜひ読んでください。
 * [FigmaではじめるUI（Web）デザイン｜Part1 ](https://note.mu/sixa_nao/n/n7603a9bc7580)
 * [FigmaではじめるUI（Web）デザイン｜Part2 ](https://note.mu/sixa_nao/n/n91d39cea73eb)

* マテリアルデザインガイドをまとめました。
 * [デザインを何もしらない1日目の自分に "実践的" なマテリアルデザインの使い方を説明する - Layout Color Typography 編](https://qiita.com/ampersand-dev/items/28e3ba3dfd1871be9e78)


#リンク
* [デザインを何もしらないエンジニアが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)