Figmaの直線ツールで×マークを作ると線がずれる
Figmaの直線ツールを使用して✕（バツ）印を作ると、整列をしても２本の線が微妙にズレてしまう事があります。細い線の場合はズレが目立たないのですが、線が太いとズレが目立ってしまいます。
このずれを解消する方法を解説します。
ズレの原因はバウンディングボックス
これは、直線のバウンディングボックスが線の中心を通っていないことが原因です。バウンディングボックスとは、Adobeのアプリで採用されている名称で、 オブジェクト全体を囲むように表示される四角い枠線のことです。
Figmaでは「バウンディングボックス」という名称を採用していないようですが、この解説では便宜上バウンディングボックスと表記します。
直線の場合はバウンディングボックスが四角く表示されないので分かりづらいのですが、
下図のように、線の下部分に表示されている線と左右の□がバウンディングボックスです。
線の中心にも青い線が見えますが、これは線の骨組みである『パス』です。
✕を作るとなぜズレるのか
直線ツールで線を作った場合、バウンディングボックスは先程の図のように線の中心からズレて表示されます。
この状態で線を回転、整列をして✕印をつくると、下図のように線がずれしまいます。
これは線を反転コピーして作った場合でも、回転コピーして作った場合でも同様です。
バウンディングボックスを位置を赤い線で表示したのが下図です。
バウンディングボックスだけを見てみると位置は揃ってきれいなバツになっているのですが、 黒い線を見てみるとずれてしまっていますよね。バウンディングボックスの片側だけに線の色がついているためにズレが発生してしまっているのです。
そこで、バウンディングボックスが線の中心を通るように変更する必要があります。
バウンディングボックスを中心にする方法
バウンディングボックスを線の中心にするには、線の設定を使用します。
画面右の【線パネル】から、線の種類を矢印に変えます。
矢印の種類は【なし】以外であればどれでもかまいません。
その後【なし】に戻します。
これでバウンディングボックスが線の中心になりました。
２本ともバウンディングボックスが中心を通るように設定できたら整列をします。きれいな✕印になりました。
気をつける点
バウンディングボックスを線の中心にした場合、一点気をつける事があります。
線が水平または垂直の時に線幅の数値が奇数だと、図のように線がピクセルにフィットせずに中途半端な位置に表示されてしまいます。 ピクセルにしっかりと合わせた状態でデザインを作りたい場合などは気をつけてください。
