Figmaでシンプルな棒グラフを生成するプラグインの紹介
今回は、FigmaとFigJamで任意の値を入力して、目盛り付きの棒グラフを生成できるプラグイン「シンプルな棒グラフの生成」の紹介です。スライド資料用のグラフや、ウェブサイトに掲載する簡単な棒グラフが手っ取り早く欲しい時などに便利です。
ちなみに、このプラグインは当サイトのオーナーが作成・公開したものになります。
棒グラフをFigmaで作成しようとすると、各グラフの長さ（高さ）を相対的に計算する必要があるので非常に手間です。
このプラグインではその課題を解決し、値に対応する棒の高さの計算を自動化することで、効率的に棒グラフやヒストグラムが作成できます。
この記事のターゲット
Figma・FigJamでシンプルな棒グラフやヒストグラムを作成したい方
Figma・FigJamで色やテキストを後から編集できる棒グラフを素早く作成したい方
「シンプルな棒グラフの生成」の使い方
Figma・FigJamでリソースツールからプラグイン名で検索できます。また、Figma Communityの「シンプルな棒グラフの生成」ページからもアクセス可能です。
プラグインを起動すると、ポップ アップウインドウが開きます。グラフ生成の手順は次のとおりです。
グラフに適用する色を選択する
グラフに表示したい値の数に合わせて、グラフの値を追加・削除する
グラフに表示したい値を上から順番にテキストボックスに入力する
必要に応じてオプションを選択する
枠線・目盛り：チェックすると、背景付きの枠線と目盛りが表示されます
ヒストグラム：チェックすると、棒グラフの間隔（マージン）を無くしたヒストグラムになります
「グラフを生成」をクリックする
生成した棒グラフを後から編集する方法（Figma）
このプラグインは、簡単にシンプルな棒グラフを作成することに特化しており、サイズの設定、目盛りの基準値指定、２系統以上のグラフ表示、項目テキストの編集、枠線や影などのリッチな表現、任意の色の指定といった複雑な機能はありません。
代わりに、後から編集できるようにグラフや目盛りを出力していますので、以下のようにグループを解除して、シェイプやテキストとして個別にスタイルの調整などをしてください。
なお、FigJamでは編集機能に制限がありますので、サイズ・色・目盛りのテキスト以外を変更したい場合は、Figmaで生成してください。
以下に編集例をいくつか紹介します。
グラフと目盛りのサイズを変更する
グラフと目盛りを選択した状態で、メニューのカーソルアイコンをクリックすると表示される「拡大縮小」ツールを使ってサイズを変更してください。
目盛りのテキストを変更する
目盛り内のテキストを直接編集してください。
グラフと目盛りの色を変更する
グラフと目盛りのグループを選択した状態で、右プロパティの「選択範囲の色」を変更すると、選択しているオブジェクトに適用されている該当の色を一括で変更できます。個別に選択して変更することも可能です。
グラフに枠線を追加する
棒グラフ内のすべてのシェイプを選択し、右プロパティから枠線を追加してください。
注意事項として、一部の値のグラフにのみ枠線を追加する場合、視覚的に認識できる面積比率が実際の値に対して変化する可能性があり、誇大表現にあたる可能性があるため、一部への適用は推奨しません。
ドロップシャドウを追加する
棒グラフ内のすべてのシェイプを選択し、右プロパティの「エフェクト」で「ドロップシャドウ」を追加してください。
注意事項として、一部の値のグラフにのみドロップシャドウを追加する場合、視覚的に認識できる面積比率が実際の値に対して変化する可能性があり、誇大表現にあたる可能性があるため、一部への適用は推奨しません。
よりリッチなスタイルを追加する
基本的なスタイルの他に、プラグインでスタイルを調整する方法もあります。 例えば、以下の記事で紹介している「Morph」などを使うと、よりリッチなスタイルを追加することができます。
Figmaでネオンやガラスの質感を手軽に使えるプラグイン「Morph」の紹介
今回は、Figmaで簡単にハイクオリティなエフェクトを適用できるプラグイン「Morph」の紹介です。サムネイルのような様々な種類のエフェクトが、たった一つのプラグ インで再現できるので、ちょっとした素材を作るのに大変便利ですのでおすすめです。 ...
他のスタイルもぜひ試してみてください。
この記事を読んだ方におすすめの記事
Figmaでシンプルな円グラフを生成するプラグインの紹介
今回は、FigmaとFigJamで任意の値を入力して、パーセント表示付きの凡例と円グラフを生成できるプラグイン「シンプルな円グラフの生成」の紹介です。スライド資料用のグラフや、ウェブサイトに掲載する簡単 な円グラフが手っ取り早く欲しい時などに便利です。 ...
