Figmaの基本的な使い方を理解する

# 1. はじめに
* Windowsクライアントアプリを開発するために、デザイン性が良いUIスケッチが作成したい
* デザインシートを作成して、画面のガイドラインを統一したい

# 2. 開発環境
* Windows10
* Figma DeskTop版

# 3. 事前準備

## 3.1. Figmaのインストール

* Web版、DeskTop版があり、Mac, Windowsのどちらでも使用できる

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

## 3.2. フォント

> Mac版

* SF Pro 英数字 ※20pt以上:Display、16Pt以下:Text

  https://developer.apple.com/fonts/

* Hiragino Sun 日本語

* Not Sans JP 日本語 

  https://fonts.google.com/specimen/Noto+Sans+JP

  

> Windows版

* Roboto 英数字

  https://fonts.google.com/specimen/Roboto

* Not Sans JP 日本語

  https://fonts.google.com/specimen/Noto+Sans+JP



# 4. Figmaの基本操作

## 4.1. フレームの作成

* `#フレーム`を選択する(ショートカット：F)
![image-20221101201900848.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/6c99e729-2870-4fe0-b063-8d2b19f06d9e.png)


* ドラッグ&ドロップする
![image-20221101201917953.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/aa130628-43a8-5c33-a449-2f6236ebd0b5.png)


## 4.2. ページの作成

* フレームを集約することで、Webページ別にわけることができる

* Page1の下の `+` ボタンをクリックする
![image-20221101202255754.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/ec1076a8-5843-73e6-ec64-5042cc118ee0.png)

* 新しいページが作成できる
![image-20221101202320794.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/b948cb7a-b21c-9ce1-0ad4-9c500d873ae1.png)
  

## 4.3. キャンバスの移動

* スペースキーを押すとアイコンが手のマークになり、キャンバスを移動することができる
![image-20221101203044995.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/863c953f-8a74-dc3b-2694-594826b41ca5.png)


## 4.4. 画面の拡大/縮小

* 拡大：`Ctrl` + `+` ( + `Shift`)
* 縮小：`Ctrl` + `-`



## 4.5. Codeの表示

* インスペクト > コード を選択すると、CSS/iOS/Androidの確認ができる

![image-20221101203640389.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/5b56914c-8fc2-d509-f958-f16e985f2480.png)



## 4.6. 図形描画の方法

* 下記メニューから各種図形が作成できる
* `Shift`キーを押したままドラッグ&ドロップすると正方形などが作成できる

![image-20221101204230129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/c393815a-7f5a-54a4-4234-03848b0ccef4.png)


## 4.7. 楕円の編集

* 右中心の`〇`をドラッグ&ドロップする

![image-20221101204611141.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/7377fb73-6711-6ae1-a80d-0be1721e1ba1.png)

![image-20221101204638297.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/a566e2ee-4c04-acb0-3869-75dba472f77f.png)


* 真ん中の`〇`をドラッグ&ドロップする
![image-20221101204905257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/2076e5ea-523d-b3d3-e0f1-99655ccdf759.png)

## 4.8. 多角形の作成

* デザインの下記の数字を編集すると多角形が作成できる

![image-20221101205231508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/17b89cb6-612b-3606-76f8-3e252d109806.png)


## 4.9. テキストの作成

* `T`ボタンをクリックする
![image-20221101205631018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/94b2fd7e-a1e6-de63-776e-fbdfc44d79e1.png)


* Frame上でドラッグ&ドロップし、文字を入力する

![image-20221101205847591.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/d2d0d3d6-c6c0-0031-431e-12f25d372fa5.png)


## 4.10. 複数図形の拡大/縮小

* 複数の図形をドラッグ&ドラッグで選択する
![image-20221101205957308.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/facac1aa-fa29-5cc9-2fa8-7697abc4cab8.png)

* 四角の端にある`□`をドラッグ&ドロップする
![image-20221101210125365.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/ada41235-9fd3-3003-403e-79642ba178bc.png)


* 上記の場合、三角形のみ大きくなり文字の大きさが変わらない。その場合、下記の`拡大/縮小`をクリックする

![image-20221101210437277.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/e06a25a3-058b-6a26-74de-99342cdd632f.png)


* 三角形、文字ともサイズが拡大/縮小できる
![image-20221101210522680.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/ba95e0b5-ad8f-f317-03f9-98901cb6928a.png)

## 4.11. 図形の縦横比を変える

* デザイン > 下記マークをクリックして、縦横比の固定を解除する
![image-20221101210903690.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/00e93212-6cfc-9095-dc4e-5a86819097b7.png)


* `Width` と `Height` を別に値に設定できる
![image-20221101211044692.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/e17bc1f4-b12f-a9d1-1f17-c5fb3061fe7c.png)

## 4.12. 図形を回転する

* 図形の少し外側にカーソルを置くと、回転マークが表示される
![image-20221101211354441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/e3ec7304-0a32-ee1b-cb41-5c7dc6afa63e.png)

* ドラッグ&ドロップすると図形が回転する
* `Shift`キーを押したままドラッグ&ドロップすると15度毎に回転する
![image-20221101211554761.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/cd675ea1-b23f-a08f-c405-4895bd1c2247.png)


## 4.13. 図形の反転

* 元の図形
![image-20221101212028288.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/04865b5e-53b7-f174-275d-1f1e9684f2b6.png)

* 水平方向: `Shift` + `H`
![image-20221101211934753.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/e26db6ba-a8a8-1198-cb49-5038e150604f.png)


* 垂直方向: `Shift` + `V`
![image-20221101212042708.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/126a4614-8cbb-88ab-eabd-0234a2fe5776.png)


* インスペクト > コード を選択すると、CSS/iOS/Androidの確認ができる
![image-20221101203640389.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/1862410d-65a1-8e8b-83ea-0703b6381a24.png)

# 5. 参考文献
https://web-design.school/tutorials/figma/getting-started