Figma ⏰約30分

📖 これからやること

• アカウント登録（サインアップ）、パスワード変更、アカウント一覧表示ができるAndroidアプリをUI（画面）作成からフロンドエンドまで作成し、実際にアプリを動かしてもらいます
• 20thの皆様へ、卒論のデータに用いるため、これから学習をする際の学習時間を計っていただきたいです。ご協力よろしくお願い致します。

📚 Sign in figma

• ↑ここからサインアップとサインインをしてください

🌞 Figmaとは

• チームで画面デザイン（UI）を決めていくときに便利なWebサービスです
• チームで使うときは、複数人で同時作業もできます
• チームで開発するときにこの画面を見返すことによってどんなレイアウトだったか一目で確認することができます

🖊 作っていきます ⏰約30分

🌷↓今から以下のような画面のデザインを作ってもらいます！ 　
・
・
・
🌷 サインアップの後、この画面が表示されていたらブラウザの←ボタンを押してください
🌷これからの説明では、選択してほしいところをピンクで囲ったので、そこを追ってください
・
・
・
🌷 Draft（下書き）を押して、+Create new を押し、Design fileを押す

・
・
・
🌷 格子マークを押すと、Frameの種類が出てきます

・
・
・
🌷 一番上の Android Compact が Android 端末に一番近いサイズなので、選択しましょう

・
・
・
🌷 Frameを選択した状態でctrl+D を押すと重なるように複製されるので、以下のように3つ横に並べてください
⭐ 作成中もし間違えてもctrl+zを押すと戻れます
⭐ 作成中もし消したいものがでてきたら、消したいものを選択してキーボードのBackspaceを押すと消えます ・
・
・
🌷 Tのマークはテキストを配置してくれるので、選択し、画像のように適した位置を選択する
🌷 文字をSignUpと入力してみよう ・
・
・
🌷 以下の位置（画像右下）で文字のサイズを調節できます
・
・
・
🌷 Layersには先程配置した３つの画面の名前があるので、それぞれ右クリック→ RenameでSignUp, Settings, Accountalist に名前を変更しましょう。
～単語の先頭は大文字にするのが一般的～ 🌷 すると、先ほど作ったFrameの左上にグレーで書いてある名前が変わったのが確認できます
・
・
・
🌷 先ほどまではFileというところにいましたが、Assetsというところを押すと、素材のテンプレがあるので、似たような素材を持ってこれます（今回は Contact Us を選択してください） ・
・
・
🌷 すると、このようにテンプレが表示されると思います（SignUp画面とかぶってたら↓のように横に退けましょう
🌷 これからテンプレの入力欄のデザインをSignUpに持っていきたいです
🌷 テンプレは Examples/Contact Us という名前なのでそれを開いていき、その中のInput Field をctrl+d で複製してください
🌷 すると、Input Fieldが新しくできると思うのでそれをドラック＆ドロップしてSignUpの中にいれます
・
・
・
🌷 そしてそのInput Fieldを押すと画像のように紫で選択されます
🌷 これは何かと言いますと…入力欄です！ ・
・
・
🌷 びよーんとSignUpのほうまで連れてきます
・
・
・
🌷 小さくすると、入力欄がでてきました！このようにして、テンプレの素材を使えます ・
・
・
🌷 同じようにボタンも持ってきて位置を整えると以下のようなものが作れます
🌷画像と完璧に同じでなくていいです
（このデザインはあくまでコードを書いていく上での下書きのようなものだから） ・
・
・
🌷SignUpを複製するなどして以下のように作りましょう
🌷 次に右上のプロトタイプを押し、
・
・
・
🌷ボタンから飛んでほしい画面に繋げる ・
・
・
🌷On tap は「クリックしたとき」なのでこのままでいい。 同様に、ListボタンからAccountListにも繋げる。 ・
・
・
🌷▷を押すと、シミュレーションできる・
・
・
・
・
・
🌷 以上でfigmaは終わり🎉

1/5終わったよ🎊 何分かかかったかな？ 休憩してね☕

次はSwaggerでAPIの設計をしていくよ！