キャンバス上で余白の値を確認できるようになりました！

※この記事は2026年05月05日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

See spacing values on the canvas

‍

デザインシステムを運用する中で、マージンやパディングのわずかなズレは発生しがちです。しかし、これまでは余白の値を確認するために、要素を選択してStyleパネルを開く必要がありました。

今回のアップデートでは、マージンやパディングの値をキャンバス上で直接確認できるようになりました。

要素を選択するだけで余白を表示

任意の要素を選択すると、その要素に設定されているマージンとパディングの値がキャンバス上に表示されます。

Canvas Settings内の「Spacing」を有効にするか、Cmd + Shift + D のショートカットを利用することで確認できます。

要素を選択せずに余白を確認

Alt（Option）+ Shift を押しながら要素にカーソルを合わせると、選択することなく余白の値を表示できます。

クリックや要素選択を行う必要がないため、作業の流れを止めることなくデザインを確認できます。

表示される値について

キャンバス上に表示される数値は、実際に適用されている計算後の値です。

Variablesによって設定されている値も反映されるため、デザイナー上で確認できる数値と、本番環境で適用される値が一致します。

編集は従来どおりStyleパネルから

今回のアップデートは、あくまで余白の「確認」をしやすくすることを目的としています。

余白の値を変更する場合は、これまでどおりStyleパネルから編集を行います。

確認と編集の操作を分けることで、デザインレビューや実装チェックをより効率的に行えるようになります。

‍