Figmaで要素のサイズを図って追加するするプラグイン「Redlines」

最近は実装時はデザインデータのインスペクトを見て判断したり、optionを押しながら要素を選択すると、要素間のマージンが表示されたりします。

そのため、実装のために要素間のサイズを図ってわざわざ記載することは少なくなっています。

しかし、それでも特に注意して欲しい場所は記載したり、コンポーネントなどはあえて記載することでデザイナー間でもルールを共有しやすくなります。

今回紹介するFigmaのプラグイン「Redlines」を使えば、要素間のサイズをワンクリックで追加できるようになります。

Redlines

Figma

Figma

https://www.figma.com/community/plugin/781354942292031141

Figma Community plugin - As designers, when preparing our work for developer hand-off, there comes a time where we need to annotate our designs with detailed measurements, specs, and intricate redlines—we all know how time-consuming this process can be.Alas! There is light at the end of the tunnel. 🙌Figma Redlines is...

RedlinesはFigmaで選択した要素のサイズをワンクリックで追加するプラグインです。
選択してボタンを押していくだけなので、非常に早く追加して回れます。

基本的な使い方

まずは「Redlines」モーダルを表示します。

あとは要素を選択して「Measuring Lines」ボタンをクリックすると、アイコンに表示された位置にサイズと線が追加されます（要素は複数選択して一括追加も可能です）。

また、アイコンの下で描画するサイズや線の設定ができます。

Outlines

「Outlines」タブでは、薄い赤色で長方形を追加できます（色はカスタマイズ可能です）。

マージンを設定するときに塗りの背景を設定したり、テキスト表示領域を点線で囲ったりするときに使えます。

Parallel Lines

「Parallel Lines」タブでは、選択した要素の上下や左右に実線や点線を追加できます。

Single Lines

「Single Lines」タブでは、1本の実線や点線を追加できます。
図形に対して行う場合は、図形の「上」と「左」に線が追加されます。