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

URL: https://webrandum.net/figma-plugin-redlines/
公開日: 2022-10-04
更新日: 2022-10-04
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

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

## Redlines

![Redlines](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_10-scaled.jpg)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/6658488ae24da65f891ad018df20c232fedcad558bc78c0587505225bcdabce1.webp)Figmahttps://www.figma.com/community/plugin/781354942292031141Figma 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...](https://www.figma.com/community/plugin/781354942292031141)

RedlinesはFigmaで選択した要素のサイズをワンクリックで追加するプラグインです。

選択してボタンを押していくだけなので、非常に早く追加して回れます。

## 基本的な使い方

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

![「Measuring Lines」](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_1-1.png)

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

![サイズの表示](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_5.png)

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

| 項目 | 内容 | デフォルト |
| --- | --- | --- |

| Color | 文字や線の色 | #E8178A |
| --- | --- | --- |

| Space Between Items | 要素間の幅 | 8px |
| --- | --- | --- |

| Dimensions | 寸法の表示 | true |
| --- | --- | --- |

| Font Size | 文字サイズ | 14px |
| --- | --- | --- |

| Measurement Units | サイズに単位を追加する | false |
| --- | --- | --- |

| Unit Value | 追加する単位の設定 | px |
| --- | --- | --- |

### Outlines

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

![「Outlines」タブ](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_2-1.png)

| 項目 | 内容 | デフォルト |
| --- | --- | --- |

| Color | 線や塗りの色 | #E8178A |
| --- | --- | --- |

| Opacity | 塗りの透明度 | 24% |
| --- | --- | --- |

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

![Outlineの追加](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_7.png)

### Parallel Lines

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

![「Parallel Lines」タブ](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_3-1.png)

| 項目 | 内容 | デフォルト |
| --- | --- | --- |

| Color | 線や塗りの色 | #E8178A |
| --- | --- | --- |

![Parallel Linesの追加](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_8.png)

### Single Lines

「Single Lines」タブでは、1本の実線や点線を追加できます。

図形に対して行う場合は、図形の「上」と「左」に線が追加されます。

![「Single Lines」タブ](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_4-1.png)

| 項目 | 内容 | デフォルト |
| --- | --- | --- |

| Color | 線や塗りの色 | #E8178A |
| --- | --- | --- |

![Single Linesの追加](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_9.png)