明日から使えたり使えなかったりするFigmaの豆知識20選

## これは何

- デザインツールFigmaにおける、Tipsや豆知識をまとめた記事です
    - 過去に人に教えた際「そうなの？知らなかった！」という反応が多かったものを書き出しました
- すぐに使えるものから、知ってても使う機会がなさそうなものまで、色々用意しています

## Auto layoutのPadding around itemsはスペースまたはカンマ区切りで上下左右別々の値を指定できる

![スペース区切りでpaddingを複数指定している動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/2b41e5ff-a585-1b4b-2216-3ca67c6089f7.gif)

複数の値を指定した際の数値の適用のされ方は、CSSのpaddingと同じ仕組みです。

| 指定の例 | 結果 |
| --- | --- |
| 10 | 上下左右10px |
| 10 20 | 上下10px 左右20px |
| 10 20 30 | 上10px 左右20px 下30px |
| 10 20 30 40 | 上10px 右20px 下30px 左40px |

毎回このウィンドウを開いて1つずつ入力するよりも、この入力の方が少し早くなります。

![Alignment and paddingのウィンドウを開いたスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/37ebff99-f8d1-0fe1-f033-aee612388ae6.png)

ちなみに、角丸はこの書式で複数の値を指定しても受け付けてくれません。

## widthやheightに0.001と入力すると幅や高さが0になる

:::note alert
2022年5月11日に行われたアップデートにより、このテクニックはほぼアンチパターンと化しました。
詳細はこちらの記事をご覧ください。
https://qiita.com/xrxoxcxox/items/df8752598b4000a3b02d
:::

![幅や高さに0.001pxを指定し、0pxのオブジェクトを作っている動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/a39dcd8d-1233-c3af-f5cd-004dd106585f.gif)

正確に言うと`0.006`より小さければ`0`になり、`0.006`以上なら`0.01`になります。

親Frameの幅や高さを0にして`Clip content`のチェックを外すと、地味に使い勝手が良いときがあります。
例えば、Auto layoutだけど枠からはみ出したような表現も出来るようになります。

![Auto layoutの中で、枠からはみ出したような表現](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/08754d40-4dee-7388-3971-8f6cc2628103.gif)

※何を寝ぼけているのかカンマの位置が間違っています。記事の本筋とは関係ない場所なので目を瞑ってください……。

## 画像に書き出さずともpngとしてコピーできる

要素を選択した上で`⇧ + ⌘ + C`を押すと、pngとしてコピーできます。
Figma上で貼り付けるのはもちろん、Slackにも持って行けるので地味に便利です

![Figma上でコピーしたpngをSlackに貼り付けている動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/1b7dd252-f1d2-2225-b704-bb6034a05c7b.gif)

## スペースキーを押しながらドラッグするとAuto layoutに組み込まれない

通常、要素をドラッグしてAuto layoutな要素の上に重なると強制的にAuto layoutの中に組み込まれてしまいます。
説明のためのテキストを上に被せておきたいなど、この挙動を無視したいときもありますよね。

そんなときは`要素をクリック → スペースキー押下 → ドラッグ`でOKです。
通常のドラッグとスペースキーを押したままのドラッグを比較したgifが以下のものです。
（スペースキーを連打してるっぽく見えますが、押しっぱなしです）

![通常のドラッグと、スペースキーを押しながらドラッグを比較した動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/bded3b4a-ff8a-aed5-0df4-7520597d964d.gif)

## 角丸の丸まり方を滑らかに指定できる（スーパー楕円っぽいものが作れる）

`Independent corners`を押して初めてこのオプションが出現するので気付かれづらいようです。
iPhoneのアプリアイコンや、Clubhouseのアイコンで使われているような、滑らかな角丸を実現できます。

![Corner smoothingを調整している動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/e736c095-9eaf-d28c-069b-b2c8d16ecde5.gif)

ちなみに、Corner smoothingが何%かかっているかはInspectやFigma APIからは取得できません。
GUI上から確認しないといけない項目なので、少し注意が必要かもしれません。

## 複数のコンポーネントを一気に作れる

単に複数の要素を選んでCreate component(`⌥ + ⌘ + K`)を実行しても、複数の要素がひとまとまりになった1つのComponentができるだけです。

が、画面上部にある`Create multiple components`を選べば複数の要素をそれぞれ1つずつComponentにできます。
デフォルトでのショートカットは割り当てがないので、必要とあらば各自用意しましょう。

![一気に複数の要素をコンポーネント化している動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0c2c3cad-a901-ee0a-8191-6a1482f39412.gif)

## 矢印や⇧ + 矢印を押したときの移動量は変えられる

`Nudge amount`という設定を開いて数値を変えればOKです。
`Small nudge`が単に矢印キーを押したときの移動量で、デフォルトは`1`。
`Big nudge`は⇧と矢印キーを押したときの移動量で、デフォルトは`10`です。

↓の動画では、極端に100にまで大きくしてみました。
一気にたくさん動いているのがお分かりでしょうか。

![Nudge amountを変更している動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/ed858a6c-7a06-2850-5ecc-b1b3969d179a.gif)

## variantsを設定したときのpaddingはBig amountの2倍

Componentにvariantを設定すると、自動でpaddingが付与されますよね。
先ほどのNudge amountのうち、Big amountの2倍の値がこのpaddingの値になります。

EditorによってBig amountの値が違うとpaddingが変わるので「Aさんの作ったComponentのpaddingは16pxだけどBさんのは20px」とかが起きる可能性があります。
そう大した問題ではないですが、認識しておくとデータ整理には役立つかもしれません。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/f4f5a4c2-2e1a-d914-7bd1-561c3689afd7.gif)

## Frame移動のショートカットがある

![ショートカットでFrameを移動している動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/97759f7b-99b3-e473-3bbb-610c8b84f07c.gif)

- 次のFrameに進む：N
- 前のFrameに戻る：⇧ + N

一連の流れを人に見せるようなとき、スクロールで移動すると画面が揺れて視線がぶれますが、ショートカットで移動するとスムーズです。

## ⌘を押しながらFrameを拡大縮小すると中身のConstraintsを無視できる

例で示しているのは、Constraintを上下左右ともにCenterに指定した要素を持ったFrameです。
普通に拡大縮小すると常にグレーの四角が真ん中にきますが、⌘を押しながらの拡大縮小は最初の位置をキープしています。

![ignore-constraints.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/a016c841-a6a1-703b-bf25-3276afc67ac5.gif)

## 1つのアンカーポイントから複数の線が引ける

Figmaは1つのポイントから複数の線を引けます。
そのため、線が交わる箇所の多い図形を書くときが少し楽だと思います。
（Illustratorだと、どの線を結合させるかで端の処理が汚くなってしまうので悩む場合がある）

![1つのポイントから複数の線を引いている動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/73424b72-c7b5-77ab-dcda-a492488962d7.gif)

## Paint bucketを使うと1つのパスの中で塗ったり塗らなかったりできる

Material iconのTwo toneのようなデータが簡単に作れます。

![1つのパスの中でも塗ったり塗らなかったりしている動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/44255f4e-9fe1-dbe0-9c5e-8b8e3ccb7d3d.gif)

しかし、1色しか使えないのに気をつけてください。
あくまで1つ要素が線や色の情報を持っているだけで、1つ1つのエリアが情報を持っているわけではないためです。

ちなみに何故かPenとBucketツールの動画だけ普通にgifに書き出したら40MBくらいになってしまい、極端にフレームレートを下げています。
何故だろう……。

## Figmaを開かずとも、ターミナルからコメントできる

トークンの取得は`Settings > Account > Personal access tokens`より可能です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/2c164db9-35d7-c576-64dc-28b7f773d324.png)

また、`Share > Copy link`でコピーしたリンクが次のようなルールになっているので適宜当てはめてみてください

```
https://www.figma.com/file/Fileのid/Fileの名前?node-id=そのとき選択しているnodeのid
```

座標0, 0へのコメント

```shell
curl -X POST -H 'X-FIGMA-TOKEN: 取得したトークン' -H "Content-Type: application/json" 'https://api.figma.com/v1/files/ファイルのid/comments' -d '{"message":"コメント"}'
```

座標100, 200へのコメント

```shell
curl -X POST -H 'X-FIGMA-TOKEN: 取得したトークン' -H "Content-Type: application/json" 'https://api.figma.com/v1/files/ファイルのid/comments' -d '{"message":"コメント"},"client_meta":{"x":100,"y":200}}'
```

あるコメントへの返信

```shell
curl -X POST -H 'X-FIGMA-TOKEN: 取得したトークン' -H "Content-Type: application/json" 'https://api.figma.com/v1/files/ファイルのid/comments' -d '{"message":"コメント"},"comment_id":"リプライしたいコメントのid"}'
```

ある要素へのコメント（要素の左上の座標へのコメント）

```shell
curl -X POST -H 'X-FIGMA-TOKEN: 取得したトークン' -H "Content-Type: application/json" 'https://api.figma.com/v1/files/ファイルのid/comments' -d '{"message":"コメント","client_meta":{"node_id":"nodeのid"}}'
```

ある要素へのコメント（要素の左上から右に10px、下に50pxずらした位置へのコメント）

```shell
curl -X POST -H 'X-FIGMA-TOKEN: 取得したトークン' -H "Content-Type: application/json" 'https://api.figma.com/v1/files/ファイルのid/comments' -d '{"message":"コメント","client_meta":{"node_id":"nodeのid","node_offset":{"x":10,"y":50}}}}'
```

## Teamで使うデフォルトのLibraryを指定できる

Teamの設定の中の`Enable libraries`を選び、任意のLibraryをオンにしておけば、そのTeam内で新規Fileを作成した瞬間からLibraryが有効になります。

![Settingsの中のEnable librariesを選択しているスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/2be0e8db-2df8-1306-b5aa-a4a3369097e3.png)

## 画像を⌥ + ダブルクリックするとトリミングできる

わざわざマスクを作らなくてもOKです。

![⌥ + ダブルクリックでトリミングモードに入っているスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/ac867f18-77a7-ba55-c304-96a539731c79.png)

## 線のMiter angleのデフォルト値は28.96

![Miterの値](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/2728c592-51ba-1df2-f1b7-ce6a79f98953.png)

Illustratorだと10です。
28.96という数値の根拠は分かりませんでしたが、急にこの数値が表れても「あーデフォルトのMiter angleね」とどっしり構えていられます。

https://www.figma.com/developers/api#files

## fillのtypeにEMOJIという謎のプロパティが存在している

![謎のEMOJIプロパティ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/fe24d48c-c3bb-78aa-eab0-fbb4a891fb90.jpeg)

自分では究明できませんでした
普通の選択肢の中からは選べないし、絵文字を打ってみてもSOLIDとして扱われているようです。

![普通の選択肢として表示されるfillのプロパティ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9a802dcc-7114-82d7-801a-0889f6c2de18.png)

![APIを叩いて絵文字のfillを調べてみた画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/268d14da-91dc-39f0-8659-da55fb3a74a0.jpeg)

## GroupやFrameを作ると、同一Page内に存在する番号に+1した名前で作られる

もし不意にFrameを作ったときに名前が`Frame 15`とかになっていたら、それはちゃんと名前をつけていないFrameが存在していて、かつそいつの名前は`Frame 14`である証拠です。

ちなみにPageをまたぐと番号は共有されていないようです。
（あるPageでは`Frame 14`が存在していても、新規PageでFrameを作ったら`Frame 1`が生まれる）

## ピクセルグリッドへのスナップは解除できる

デフォルトはピクセルへスナップされているので自由曲線っぽいイラストを描くのが難しいかもしれませんが、`⇧ + ⌘ + '`を押せばスナップが解除できます。
再びスナップするときも同じショートカットでOKです。

## どちらかの辺が4096px以上ある画像は勝手に縮小される

極端に長いページのスクリーンショットを配置すると勝手に縮小されて荒れてしまう……ってシーンが多い気がします。

[Insert Big Image](https://www.figma.com/community/plugin/799646392992487942/Insert-Big-Image)というプラグインを使えば見た目上解決はできます。
（4096pxごとに分割した画像にして貼り付けてくれるため、原寸のまま荒れることなく貼り付けられる）

なお、もう少し詳細に説明した記事を書きました。

https://qiita.com/xrxoxcxox/items/c376181bf821704c335c