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