Figma使ってみた

# 目次
[事前準備](#事前準備)
[使ってみよう](#使ってみよう)
[成果物の共有方法](#成果物の共有方法)

# 事前準備
**①Figma公式サイトにアクセスする**
https://www.figma.com/

**②サイトの最下部にある「Try Figma for free」からアカウントを作成する**
<img width=250 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/ddad5823-df60-cd86-5a2e-63fe6b245849.png">

**③言語を日本語にする**
<img width=700 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/76e80249-27a0-d06e-c451-cf5d9bcba1b9.png">
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/57366b02-753d-5666-4ed5-bcb04e6321e7.png">

**④デスクトップアプリのダウンロード**
https://www.figma.com/ja/downloads/
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/d278a6b3-25c0-d084-aaf2-33b84db0d808.png">

# 使ってみよう
**・左メニューの チーム->プロジェクト のプラスボタンから「デザインファイルを新規作成」する**
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/1f0ecfc4-7133-0aa3-f2eb-f3949d19efee.png">

**・左上のメニューから「フレーム」を押して、右メニューに出てきたフレームから好きなものを選択する**
<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/d3ddcd58-cbdf-2f38-529d-6ac3e1ad7247.png">   <img width=200 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/a0cb5610-3d8c-a6c5-b0a7-684b633374d7.png">

**・左上のメニューからテキストだったり図形だったりを追加してみる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/9666a510-b368-119d-a808-7a5f6487d0a9.png)

**・画面遷移をしたいので左上のメニューから「フレーム」を追加する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/319f15ab-815f-92d1-7a20-5b035b7a5f0f.png)

**・遷移後の画面にもいろいろ追加してみる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/ccc7cb35-04d9-51e5-e2cd-2748e3268fa0.png)

**・遷移のトリガーになる要素をクリックして、右メニューの「プロトタイプ」をクリックしよう**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/07a3077b-98e1-9bcd-6aeb-6bf1f7d40539.png)

**・インタラクションにあるプラスボタンを押す**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/f4669bc4-fe43-a55b-1fb4-f7e15566302d.png)

**・インタラクションの詳細を設定する**
<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/5e9b5537-fb63-2df1-cde1-bd5aad22826c.png">

**・同様に、遷移後の画面のインタラクションを設定する。押したら遷移前の画面に戻るインタラクションを設定する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/4cb24854-4984-aa2a-45b7-9c763a6c05e7.png)

**・完成品**
https://www.figma.com/proto/O1K9mQyjBJwII1C4ZByiPV/%E7%84%A1%E9%A1%8C?page-id=0%3A1&node-id=1%3A3&viewport=232%2C343%2C0.19&scaling=scale-down&starting-point-node-id=1%3A3

# 成果物の共有方法
**①右上のプレゼンテーション実行ボタンを押してプレゼン画面に行く**
![スクリーンショット 2022-11-29 15.16.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/b549f83b-33fc-d911-c36d-244eb276c47b.png)

**②右上のプロトタイプを共有ボタンを押す**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/faf74c98-a8fc-a45f-23e2-b1490ab55b29.png)

**③リンクをコピーするボタンを押す**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/11115ebd-91cf-8d31-bdf7-7a70268a5a40.png)

:::note info
URL共有した際に画面のサイズがおかしい時は、右上のオプションから「画面に合わせる」を選択すると良い感じになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526938/2b19a570-bec3-a58e-1066-29b7ddd90dcf.png)
:::