Figmaの使い方（超初心者用）

# 初めに
Figmaを使ってみたので話題に挙げてみます。

これから新規のアプリを作ろうとしていて、画面イメージをメンバーと詰めていくためにFigmaを利用し始めてます。

最初は何が何だか分かりにくかったので、私の理解をこちらに記載していきます。







# Figmaとは

Figmaとは何ぞや。

chatGPTに聞いてみますか。
![スクリーンショット 2023-07-29 16.38.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/43a8198a-6648-1f0f-e6c6-2fc0ce9e2977.png)




色々言われちゃいましたが、アプリのでデザイン用ツールですね。

ブラウザでUIを比較的簡単に作れるのが特徴です。

なので、プロトタイプの作成、メンバーとの共同作業がこれまでよりも簡単にできるという素晴らしいサービスです。

こういうの、今時って感じでワクワクしますよね。




# Figmaの使い方

とりあえず、リンク貼ります。

https://www.figma.com/ja/




無料版と有料版が存在してますが、無料版でも十分に作業ができた印象です。

（有料版については調べてない）




アカウント登録がありますが、一瞬で終わりました。




まずは左タブのチームを選択して、デザインファイルの新規作成を押しましょう。

![スクリーンショット 2023-07-29 16.46.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/2a233cbe-f3f0-1890-ab3e-4c16508f1e3f.png)


すると以下のように新規のページが表示されます。


![スクリーンショット 2023-07-29 16.48.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/9756dcb9-ab22-4eeb-903c-29b40759b665.png)





ここがダッシュボードとなっていて、画面イメージや画面操作などを作成できます。

今回は簡単にiPhoneアプリで画面遷移を行う例を記載します。




# 使い方

左上のフレームを選択します。

すると右側にフレームの候補が表示されるので今回はiPhone14Proを選択します。

※ちなみに私のiPhoneは10sです。。。
![スクリーンショット 2023-07-29 16.50.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/3147dccf-f315-507c-2244-8d6995f266fa.png)

![スクリーンショット 2023-07-29 16.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/7470fef1-066e-835a-036f-500713b53d88.png)



はい、一瞬でフレーム作成できましたね。

ここに画面イメージを作っていきます。




今回は適当にヘッダーとボタンを作ってみようと思います。




ヘッダーは左上の図形を選択します。

それをフレーム上に持っていき、色付けやテキストの追加を行います。




ちなみに図形ごとに右のタブが出てくるので、レイアウトの調整を行えます。

結構よくあるパターンだと思うので、比較的使いやすいです。




アイコンを使いたかったので、プラグインを利用しました。

今回は「Material Design Icons」を選択しました。

以下の場所から利用できます。
![スクリーンショット 2023-07-29 16.58.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/34fb94db-611c-f63d-4a5e-976e0d956bf5.png)




実行すると、Material Design Iconsのガジェットが出てくるので、そこからアイコンを選択します。

![スクリーンショット 2023-07-29 17.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/e8eca008-e69e-af3d-5b8e-e8220bd3671b.png)






雑ですが、メニューとボタンを作ってみました。

「実行」を押すと、文字が出てくるという例で画面の挙動を作ってみます。




その場合は、もう一つ同様のフレームを用意します。

私の場合は、上記で作ったものをまるっとコピーしました。




下のようになりまして、左が実行前、右が実行後を想定してます。

![スクリーンショット 2023-07-29 17.09.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/874c4e59-572d-411b-d0a6-ca3e9d55052f.png)






これを結びつけるにはどうするか。

それでは右上のプロトタイプを選択してみましょう。




その状態で左フレームの実行ボタンにカーソルを持っていくと、＋アイコンが出てきます。

選択すると、線が伸ばせるので、以下のように実行後の画面に線をつなげてください。
![スクリーンショット 2023-07-29 17.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/22ca6b9f-feee-4c9b-b6e1-9524e73f7d65.png)







こんな感じ。

細かい設定は割愛しますが、これで画面が結びついたことになります。







では実際に確認してみましょう。

右上の実行（▷）を押します。

すると以下のようなイメージが表示されます。

（DEMOというのは無視してください、、）



![画面収録 2023-07-29 17.13.51.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749685/b9dfcad2-5a17-5ffd-dc19-e24fac4d84e7.gif)





うまく動作してますね。

この一連の流れを駆使して、画面イメージや操作感を作っていくのかなと思っています。

（ヘッダーがうまく表示できてませんね笑）




# おわり

以上、Figmaの共有でした。

新しいサービスを作る際に、いきなりコードを書くよりもこのようなツールを利用して画面イメージを膨らませる方が良いなと改めて感じました。

（ここからコードの自動生成とかできたらかなり便利そうですね、、）




また、画面以外にもER図とかフローチャートとかも書けそうだったので、もう少し色々使ってみようと思います！




では。