🔢

Figma Dev Modeの線は「外側」扱いでCSS表示される

2025/07/02に公開

CSS

Figma

tech

 要点Figmaにおける線の位置のデフォルトは内側
Dev ModeのCSS出力は、線の設定に関わらず要素の外側

外側以外を設定している場合、線の太さだけサイズが大きくなる

これにより起こり得るデザインと実装のズレについて、チーム内で認識を合わせておくことが重要

 Figmaにおける線のデフォルトは内側Figmaでは、オブジェクトの線の位置を3種類から選択できます。
内側
外側
中央（本記事では取り上げません）

 内側デフォルトでは内側が指定されています。線がオブジェクトの幅・高さの内部に含まれます。
例として、100pxの正方形を作成し、1pxの線を設定したとします。

このとき、オブジェクトのサイズは指定通り100pxの正方形で、領域内で最も外側の1pxずつが線として表示されます。

 外側外側では、線がオブジェクトの幅・高さの外側に追加されます。
こちらの設定で100pxの正方形に1pxの線を設定すると、線を含めたサイズは102pxの正方形となります。

オブジェクトの上下左右の外側に1pxずつ線が表示されるためです。

 Dev ModeのCSS生成における線は常に外側Dev Modeは、フロントエンドエンジニアの実装を支援するFigmaの機能です。

機能のひとつとして、FigmaデザインをもとにCSSを生成してくれます。

このとき、線の位置に関係なく、HTML要素の外側に線を追加するCSSが生成されます。

 問題点内側の場合、線の太さ分サイズが大きい状態のCSSが生成されています。

100pxの正方形に1pxの線を設定した場合、線の2pxが外側に足された102pxの正方形を表示するCSSとなります。
外側の場合でもCSSは同一です。このため、外側のFigmaオブジェクトとCSSの整合性は取れています。

 解決案
 前提デザイナーとエンジニア双方の視点をもとに、以下の点をチーム内で共通認識を持つことが重要だと考えます。
上記で記載したDev Modeの仕様
Figma上は内側のほうがオブジェクト間の距離を測定しやすい

外側はオブジェクトのサイズに線が含まれず、距離の測定時に計算が必要

CSSの線（border）はデフォルトで外側に追加される
そのうえで、チーム内で取り得る解決案を記述します。

 案1：誤差を許容する最も調整が少なくて済む方法は、線の太さによる誤差を許容することです。

デザイナーは線を外側にする必要はなく、エンジニアはDev ModeのCSS生成どおりに実装します。

特定の箇所については誤差なく実装する必要がある場合、デザイナーからエンジニアに伝達をする必要があります。

 案2：デザイナーが外側で作成するデザイナーは、オブジェクトの線を全て外側で作成します。

エンジニアは、CSS生成どおりに実装します。
この場合、オブジェクト同士の間隔に影響が出てくる点に注意が必要です。

前述のとおり、外側はオブジェクトサイズに線が含まれません。このため、Figmaで表示される測定値から線の太さを除いて考える必要があります。

次の画像では、オブジェクト間の白い部分は4pxとして表示されています。ただし両方とも線が外側のため、測定上は線が間隔として含められて6pxと表示されています。


 案3：エンジニアがボーダー揃えに沿って線を実装するデザイナーは、内側または外側で線を作成します。

エンジニアは、Dev Modeでボーダー揃え（＝位置）を確認し、内側と外側で実装方法を変更します。

 位置の指定の確認方法Dev Mode上でオブジェクトの線の位置を確認できるのは、次の箇所です。
右ペイン > インスペクトタブ > レイヤープロパティ > リスト > ボーダー揃え
外側の場合、Dev Modeで表示されているとおりの実装となります。
width: 100px;
height: 100px;
border: 1px solid #000;
内側の実装は複数の方法があります。

 width,heightによる調整要素自体のサイズを線の太さだけ減らしています。
width: 98px;
height: 98px;
border: 1px solid #000;

 box-sizingによる調整widthやheightが指定されている場合は要素の内側に線が表示されます。指定されていない場合は線の太さだけ要素が大きくなるため、厳密に要素の内側とはなりません。
width: 100px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;

 box-shadowによる調整border（線プロパティ）ではなく、box-shadow（影プロパティ）を使っているため、標準的なCSSの使用方法と異なることは留意が必要です。
width: 100px;
height: 100px;
box-shadow: inset 0 0 0 1px #000;