Figmaについて

# はじめに
Figmaの使い方を学んだので、備忘録としてまとめました。
最近（2024/8ごろ）、UIが変わったので、戸惑う部分がありました。
画像も載せたので、ぜひ誰かの参考にもなればと思っております。

また後半には、少しですが、デザインのポイント（基礎レベル）などもまとめております。

# レイアウトグリッド
画面のレイアウトの指標を表示する。
（サンプル動画では、、、）
PC(横:1800px)では、列数12、余白250、ガターを20に設定。
スマホ（横：375）では、列数3、余白727、ガター15に設定。
タブレット（横：1024px）では、列数12、余白を418、ガター20をに設定。
※PC以外の余白は、PC画面から縮めているので、`（PC画面-作りたい画面幅）/2`の計算で算出。（スマホは若干割り切れないが。）

![Udemy練習-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/fc5dc88f-4e0a-bc7a-224a-323c247c99b4.png)

# ガイド線
レイアウトグリットに合わせて、ガイド線をひく。
shift + Rで定規を表示して、その定規からドラッグするとガイド線を表示できる。
![スクリーンショット 2024-08-25 15.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/014060c1-77d3-b46a-2714-e478949c25fc.png)

# フレーム化
cmd + option + G
:::note info
フレーム化とグループ化の違いは？
共通：要素をまとめる。
違い：オートレイアウトができ、レスポンシブのスタイル調整がしやすくなる（パディングが使えるようになる！）
参考：[【Figma】フレームの使い方マスター編　〜グループとの違いやオートレイアウトについても解説〜](https://implist.dev/entries/figma-frame-and-auto-layout-group)
:::

# 自動調整
フレームの中の要素を動かした時、フレームの大きさを自動調整できる。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/2188ed87-5f7d-2745-d870-1f09ebbb1b9f.png">

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/eec97550-d038-1f12-6199-dd6e196325de.png">

![Udemy練習-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/eba8ccdf-11ab-dc7a-60b2-966a4eda9e54.png)

# カラーの透過の注意点
背景色などの透過をすることができるが、コーディングする際に、実装がしづらくなる。
そのため、透過した後、再度塗りから、スポイドを選択し、カラーを抽出し、設定し直と良い。
![Udemy練習-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/f1602b5d-ec89-1cc1-08ec-3adf58c1228d.png)

# 制約
画面を拡大縮小する際に、左右に一緒に伸びて欲しいもの、左や右に固定したいもの、中央のままでいて欲しいものなどがある。その制約を設定できる。
![Udemy練習.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/aacfd64f-36e7-4438-fe82-2f8e7cf8dcb0.png)
※制約の位置が変わっていた。

# 図形への画像挿入
図形をダブルクリックして、コピーして、画像を図形にダブルクリックして貼り付ける。
縦横比が合っていない場合は、画像をダブルクリックして、「拡大」を選択する。
![Udemy練習-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/3f3bfe74-6786-f641-3a8f-2e746f8c35e5.png)

事前に他の画像が入っていた場合は、必ず（重なってしまうので）削除する。

:::note info
フリー画像は、Figmaのプラグイン「Unsplash」がおすすめです。

また画像の黄金比は、「1 : 1.618」と言われています。
考え方の例
縦 : 横 = 1 : 1.618
縦 = 406 ÷ 1.618
縦 = 250.93
:::

# 画像の制約
画像と文字などをフレームで囲っている場合に、画面の拡大縮小時に引き伸ばしたい場合は、画像自体と、フレーム自体の制約を「左右」にする。

# コンポーネント化
cmd + option + K
バリエーションがあるもの、複数回利用するものに関しては、まとめて変更できるようにコンポーネント化しておくと良い。
（例）ボタン、カード、見出しなど
コンポーネントの原本は、セクションなどにまとめて保管しておくこと。

# インスタンスの入れ替え
インスタンス：コンポーネントのコピーして貼り付け（以下、複製）したもの。
コンポーネント名を「〇〇 / △△」にして、「〇〇 / ××」などを増やして、各々をコンポーネント化すると、インスタンスにした後で入れ替えることができる。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/400e29e1-d9dc-c09f-d76d-69de802ab630.png">

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/8962c99e-8f62-bd58-a597-94a6f0627cb1.png">

# テキストのレイアウト
* 幅の自動調整：文章が長くなったときに改行せず、要素の幅を自動調整する
* 高さの自動調整：文章が横いっぱいになった場合は、改行し、幅を維持して、高さを自動調整する
* 固定サイズ：文字が増えても高さはそのまま

:::note info
テキストを画面幅に合わせて、拡大縮小させる時のポイント
* テキストのみ：制約を「左右」に設定。
* フレームで囲っている場合：フレーム自体の制約「左右」に設定、テキストの幅を「コンテナに合わせて拡大」に設定。
:::

「コンテナに合わせて拡大」が表示されない場合は、囲っているフレームがオートレイアウトになっているかを確認する！
なお、いくつかのフレームで囲まれている場合は、一番親の親要素の制約を「左右」にして、それまでの要素は全て「コンテナに合わせて拡大」にする。

# 手作り進む（戻る）ボタン
手順
1. 正方形の図形を作成
1. 塗りを削除し、図形の線を追加
1. 図形をダブルクリックし、左下の角の丸を削除する
1. -45°に回転させる
1. 丸い図形を作成し、重ねる
1. 丸い図形のエフェクト（影）を追加する

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/ef3bf781-3079-083d-3fc7-0576d2a705fc.png">

![Udemy練習.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/7a5a1994-f5ac-167b-fa01-de8d647fdce5.png)

# カラーの定義
カラーの定義をすることで、メインカラーなどを一気に変えたい時に、変えやすくなる。
画像の塗りの〇が4つのアイコンをクリックすると設定画面が開く。

![Udemy練習.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/82777758-32fe-65c3-745b-b11e6ac82f09.png)

:::note info
1サイトにカラーは3色くらいまでがベスト。
:::

# 間隔設定モード
フレームの中の要素を等間隔で配置してくれるもの。

FigmaのUIが変更したため、オートレイアウトの詳細での設定では無くなった模様。
以下は間隔設定モードになっている。
画像の青い部分をダブルクリックで切り替えができる。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/ff916579-10df-d448-fa38-245b867eca5d.png">

# 複製（等間隔で、同じものをコピーペーストできる）
cmd + D
コピーとペーストを同時に行うことができる。

# 線
Lを押しながら、ドラッグする（マウスをクリックしたまま動かす）と、線を引くことができる。
ちなみにRは、長方形の図形、Oは楕円の図形を作成できる。

# 図形をまとめる（Flatten Selection）
cmd + E
複数の要素を選択して、上記のショートカットを使用すると、要素の結合ができる。
なお、結合後は各要素の変更はできないので、結合する前にちゃんと整形すること。

:::note info
図形のまとめ方には、重なりを表現する方法もあり、いろいろできる。
以下が参考になりました！
[Figmaで描いた図形をまとめる](https://web-design.school/tutorials/figma/grouping)
:::



# レスポンシブデザインのはなし
### 作成順序
スマホが主流のものはスマホデザインから作る。
PCデザインから作った場合は、いきなりタブレットやスマホのフレームに載せるのではなく、一度、PCフレーム上でタブレット用に縮めてから、最後にタブレットフレームに載せる方が作業しやすい。
基本的に、端末が変わる場合は、コンポーネントをインスタンスから切り離して、再度作り直して使用する。
オートレイアウトはそのまま使うと良い。


# デザインのはなし
### 行間設定
2行までと、3行以上の文章だと、2行までの文章の行間は詰まっているほうが見栄えが良い。
（参考例）2行まで16pxの場合、行間28px　3行以上の場合は、行間33px

### カラーの確認
メインカラーを定義し、定義したものを使う。
デザインの確認次に、メインカラーを全く違う色に変えて、ちゃんと反映されているか、漏れがないか確認すると良い。

### ボタン
最近は、フラットデザインが流行っているが、ボタンはシャドウなどである程度、「押せる」ことを示す方が良い。
スマホが主流になってきているでもあるが、ホバーも忘れずにつけたい。

### デザインパターン
デザインがシンプルなのは良いが、単調なのは、長く見てもらうには不向き。
そのため、サイドの余白を一律で持たせるだけでなく、一部はサイド幅を全て使うデザインがあっても良い。
そうすることで抑揚がつく。

### デザインの統一
見出しやグローバルナビゲーションなど同じ意味を持つものは、ページを跨いでも同じデザインで作成するとよい。