Figmaで図形を使用する

# 1. はじめに

* Windowsクライアントアプリを開発するために、デザイン性が良いUIスケッチが作成したい
* デザインシートを作成して、画面のガイドラインを統一したい
* 「Webデザイナー独学入門」を参考にFigmaで実際にデザインしてみたい

# 2. 開発環境

* Windows10
* Figma DeskTop版

# 3. 図形をまとめる

## 3.1. グループの作成

* オブジェクトをドラッグ&ドロップで選択する

  ![image-20221124211703984](https://s2.loli.net/2022/11/24/6OGejU1qasIK97E.png)

* `Ctrl` + `G` または、右クリックで「選択範囲のグループ化」を選択する

![image-20221124211927150](https://s2.loli.net/2022/11/24/Ou3xQV8wHAcPfhj.png)

![image-20221124211851288](https://s2.loli.net/2022/11/24/HMvCka8OEUAZQpS.png)



## 3.2. オブジェクトの結合

### 3.2.1. 選択範囲の結合

* 複数の図形を結合できる
* 画面上部より `選択範囲の結合` を選択する

![image-20221124212406768](https://s2.loli.net/2022/11/24/2KDYrqgHLiMhNyX.png)



![image-20221124212438538](https://s2.loli.net/2022/11/24/gipCJxNIMuEV9FA.png)



### 3.2.2. 選択範囲の型抜き

* レイヤ最上部の図形の一部を型抜きすることができる
* 画面上部より `選択範囲の型抜き` を選択する

![image-20221124212628706](https://s2.loli.net/2022/11/24/DBlJwyExXFTvuVW.png)

![image-20221124212644658](https://s2.loli.net/2022/11/24/JuDf1yvXxCdTk6g.png)

### 3.2.3. 選択範囲の交差

* 複数図形の重複部分のみを切り出すことができる
* 画面上部より `選択範囲の交差` を選択する

![image-20221124212802308](https://s2.loli.net/2022/11/24/1ONuj6lJMmSDrBk.png)

![image-20221124212846259](https://s2.loli.net/2022/11/24/ewu7nBXgE45lCxM.png)



### 3.2.4. 選択範囲の中マド

* 複数図形の重複部分以外を切り出すことができる
* 画面上部より `選択範囲の中マド` を選択する

![image-20221124212933987](https://s2.loli.net/2022/11/24/gDdfbUZFC38SHri.png)

![image-20221124212951092](https://s2.loli.net/2022/11/24/gkMTRNJaUruCnHG.png)



### 3.2.5. 選択範囲を結合

* 結合した図形を1つの図形として扱うことができる
* 画面上部より ```選択範囲を結合```を選択する

![image-20221124213119773](https://s2.loli.net/2022/11/24/jRgf9qt3a4wzysO.png)

![image-20221124213134575](https://s2.loli.net/2022/11/24/SB8VRQmudwNr9iH.png)



* 1つの図形をして加工することができる

![image-20221124213220357](https://s2.loli.net/2022/11/24/NXqpax6OWZFk47L.png)



## 3.3. フレームの作成

* オブジェクトをドラッグ&ドロップで選択する

  ![image-20221124211703984](https://s2.loli.net/2022/11/24/6OGejU1qasIK97E.png)

* `Ctrl` + `Alt` + `G` または、右クリックで「選択範囲のフレーム化」を選択する

![image-20221124213540256](https://s2.loli.net/2022/11/24/2Gc3B6Qrflxbpvo.png)

* フレーム外のコンテンツを切り抜くことができる

![image-20221124213706717](https://s2.loli.net/2022/11/24/n9E2cY3OePIfmHR.png)

![image-20221124213717347](https://s2.loli.net/2022/11/24/cArhvkBbgoFnzxu.png)

![image-20221124213729263](https://s2.loli.net/2022/11/24/EnrVOU4vBzh8gJF.png)

* レイアウトグリッドを使用することができる

![image-20221124213751342](https://s2.loli.net/2022/11/24/ZuA9G2NLKwhRkd4.png)

![image-20221124213800254](https://s2.loli.net/2022/11/24/1RGpwSf7sa4TNkC.png)

# 4. 立方体を描く

* Rectangleを2つ作成する

![image-20221124214541698](https://s2.loli.net/2022/11/24/7iEd8LgKQJ9VaWs.png)

* 上のRectangleを選択して、`Enterキー`をクリックする(頂点編集モード)

![image-20221124214638638](https://s2.loli.net/2022/11/24/eUts8iWFBhGO4AT.png)

* Rectangleの上部2つの角を選択して、右へドラッグする

![image-20221124214730693](https://s2.loli.net/2022/11/24/1fsuUG6OoVMxBEz.png)

![image-20221124214743323](https://s2.loli.net/2022/11/24/hTMID214sXBSLdc.png)

* もう一度`Enterキー`をクリックして、頂点編集モードを解除する

![image-20221124214818094](https://s2.loli.net/2022/11/24/SyjoPfVvuDgiA7Z.png)

* 同様にRectangleを追加して、側面を作成する

![image-20221124214908388](https://s2.loli.net/2022/11/24/vcxNzyhQaurBAqD.png)

![image-20221124214922724](https://s2.loli.net/2022/11/24/FiekjnUhapdvm3Y.png)

![image-20221124215043612](https://s2.loli.net/2022/11/24/lDerCLbosuRVTtJ.png)

![image-20221124215023166](https://s2.loli.net/2022/11/24/1UlP53v2b7E6CHL.png)



# 5. カスタムシェイプを描く

* 画面上部より `ペン` を選択する

  ![image-20221206210406817](https://s2.loli.net/2022/12/06/J89YzhGsoM1KwxW.png)

* 点をクリックすると通常の図形以外の図が描ける
  ![image-20221206210625815](https://s2.loli.net/2022/12/06/ozC7EKyqexOIAGR.png)

* ポイントをドラッグ&ドロップすると図形を変形できる
  ![image-20221206210846032](https://s2.loli.net/2022/12/06/vb4J8TnR6PEhr5l.png)



# 6. ベジ字曲線を描く

* ペンツールでドラッグ&ドロップすると曲線が描ける
  ![image-20221206211205365](https://s2.loli.net/2022/12/06/2uc4PJZyDBfkgKv.png)

* `Enter`キーで頂点編集モードにすることで傾きを編集できる
  ![image-20221206211337403](C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20221206211337403.png)

* Mirror Angle ・・・ 左右対称になる

* No Mirroring  ・・・ 左右対称にならない

* Mirror angle and Length ・・・ 傾きと長さが同期する

  

# 7. テキストを追加する

* 画面上部の`T`を選択する

![image-20221206211849315](https://s2.loli.net/2022/12/06/nTIZw4fLYk81KhX.png)

![image-20221206211920044](https://s2.loli.net/2022/12/06/dGbkMSOUI4Y1wNZ.png)

* デスクトップ版の場合、インストールしているフォントを使用することができる

* サイドパネルでフォントをプロパティを変更できる

  ![image-20221206212411736](https://s2.loli.net/2022/12/06/vtPZWBNDuO3V26f.png)

  

  ![image-20221206212432944](https://s2.loli.net/2022/12/06/oSAXnaM3uYqOzNf.png)

# 8. パスをアウトライン化する

* `Ctrl` + `/`キーを押す

  ![image-20221206212749123](https://s2.loli.net/2022/12/06/5WR8ArcVmPsGQCH.png)

* 線のアウトラインの表示を選択する
* テキストを画像として扱うことができる

![image-20221206213156959](https://s2.loli.net/2022/12/06/oi2qzvG3yZc7kDV.png)

* 頂点編集モードで画像として変更することができる

  ![image-20221206213309338](https://s2.loli.net/2022/12/06/24SNHt1FxEOBYKX.png)



# 9. 最適な画像サイズ

https://www.iloveimg.com/ja

* RESIZE IMAGE ・・・ 画像のサイズを変更する
* COMPRESS IMAGE ・・・ 画像ファイルを圧縮する

# 10. 画像を読み込む
## 10.1. ドラッグ&ドロップする
* 画像ファイルをドラッグ&ドロップでFigmaへ配置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/60d2d74a-3858-4eee-1604-74630aebf889.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/3cce6a15-02c1-dace-e1f4-53f5ce174e02.png)

## 10.2. ツールバーから読み込む
* 画面上部より```画像/動画を配置...```をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/1f2e3ac1-3245-dbe5-35d6-6bcad3c39726.png)
* 対象の画像を選択して```開く```ボタンをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/8c9a06f7-4a2b-f242-3c37-c41f44bf143c.png)
* Figmaに配置して終了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/0558c52a-e0ff-57ec-11d1-00cbbd79d795.png)

## 10.3. シェイプの塗りで画像を指定する
* 画面上部より```長方形```をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/ed464d14-312a-ab05-3956-bb9344fec4ff.png)
* 長方形を配置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/966dc875-2e0e-a749-1b92-25cd8e950096.png)
* デザインの塗りから```単色```から```画像```に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/5d9e7c8a-fa0f-cc5e-28bc-ac5f96c55474.png)
* 画像を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/98a0d7c6-8fe1-e733-94c7-248bc01e1e8c.png)
* 対象の画像を選択して```開く```ボタンをクリックする
    * Tips: ファイルを複数選択すると連続で作業できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/9a53e6cf-e75b-8f71-81f6-dbe14ed4ef90.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/86177730-5c69-c4cb-36fb-c16a92d9b693.png)


# 11. 参考文献
https://web-design.school/tutorials/figma/grouping