【動画あり】Figmaのプラグイン『Redlines』の使い方｜オブジェクトのサイズなどを記載しよう。

Post：2024.03.19 / Rewrite : 2024.03.19

View

207 views

Figmaでは、「option」を押しながら要素を選択すると、要素間の距離が表示されます。
それでも特に注意して欲しい場所やコンポーネントなどは、あえて記載することでデザイナー間でもルールを共有しやすくなります。

動画で見る｜Figmaのプラグイン『Redlines』の使い方
Figmaのプラグイン『Redlines』の使い方

動画で見る｜Figmaのプラグイン『Redlines』の使い方

Figmaのプラグイン『Redlines』の使い方

figma-plugin-redline

1.リソースから「Redlines」を検索、実行します。

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

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

Color：文字や線の色。
Space Between Items：要素間の幅。
Dimensions：寸法の表示。
Font Size：文字サイズ。
Measurement Units：サイズに単位を追加する。
Unit Value：」追加する単位の設定。
Outlines：「Outlines」タブでは、薄い赤色で長方形を追加できます（色はカスタマイズ可能です）。

「Outlines」タブ。
Color：線や塗りの色。
Opacity：塗りの透明度。

塗りの背景を設定したり、テキスト表示領域を点線で囲ったりする事もできます。

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

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