WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

Redlines

Redlines

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

基本的な使い方

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

「Measuring Lines」

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

サイズの表示

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

項目内容デフォルト
Color文字や線の色#E8178A
Space Between Items要素間の幅8px
Dimensions寸法の表示true
Font Size文字サイズ14px
Measurement Unitsサイズに単位を追加するfalse
Unit Value追加する単位の設定px

Outlines

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

「Outlines」タブ

項目内容デフォルト
Color線や塗りの色#E8178A
Opacity塗りの透明度24%

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

Outlineの追加

Parallel Lines

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

「Parallel Lines」タブ

項目内容デフォルト
Color線や塗りの色#E8178A

Parallel Linesの追加

Single Lines

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

「Single Lines」タブ

項目内容デフォルト
Color線や塗りの色#E8178A

Single Linesの追加

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね