Figmaで様々なグラフ・チャートが作れて、詳細な見た目の設定もできるプラグイン「Chart」

Figmaでグラフ・チャートをつくるとなると少し面倒です。
今回はFigma上で入力したデータをもとにグラフ・チャートを作成できるプラグインの「Chart」についてまとめておきます。

Chart

https://www.figma.com/community/plugin/734590934750866002/Chart

Figma Community plugin — Chart is a plugin for Figma that uses real or random data to create the most popular charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.Key features:— 16 types of charts out-...

Figmaでチャートを作成できるプラグインで、下記のようにデータをもとにして作成します。

入力したデータをもとに作成する
Google Spreadsheetのデータをもとに作成する
CSVファイルやJSONファイルのデータをもとに作成する
ランダムなデータで作成する

作成できるチャートの種類は無料版だと2種類しかありませんが、有料版にすることで残りの14種類が使えるようになります。

Line chart（無料版）：折れ線グラフ
Area chart（無料版）：面グラフ
Pie chart：円グラフ
Donut chart：ドーナツグラフ
Sparkline：スパークライン
Stream graph：ストリームグラフ
Candlestick：ローソク足チャート
Stacked area chart：積層型エリアグラフ
Vertical bar chart：棒グラフ
Horizontal bar chart：水平棒グラフ
Grouped bar chart：グループバーチャート
Progress bar：プログレスバー
Scatter plot：散布図

基本的な使い方

メニューバーの［Plugins］→［Chart］→［Create chart］を選択するとパネルが表示されるので、必要な情報を入力してグラフの作成をします。

［Data］タブではデータの設定、［Style］タブでは見た目の設定をして、サイドバーで作成したいグラフの種類を選択します。

「Show preview」でプレビューを表示できて、問題なければ「Create chart」でアートボード上に追加できます。

Data：データの設定

まずは作成するチャートのデータを設定します。
タブが［Random（ランダム）］［Table（入力・CSV）］［JSON］の3種類があり、使用したい方法を選択します。

Random

［Random］ではデータをランダムに生成します。

項目	内容
Number of lines	線の数（縦の数）を指定する
Number of points	点線の数（横の数）を指定する
Select data distribution	下記5つの中から選択する Random Trend up Trend down Normal distribution Mixed
Min value	最小値を指定する
Max value	最大値を指定する

Table

［Table］では手入力でデータを入力するか、Google SpreadsheetやCSVからデータを取り込めます。

テーブルが表示されているので、手入力の場合はここに入力していきます。

Google Spreadsheetからインポートしたい場合は「Google Sheets」と書かれた青いリンクをクリックして「Link with Google Sheet」にSpreadsheetのリンクを入力して「Sync with GC」をクリックするとインポートできます。

CSVをインポートしたい場合は「CSV」と書かれた青いリンクをクリックして、CSVファイルを選択するだけでインポートできます。

JSON

［JSON］ではJSONファイルからデータを取り込めます。

ネット上にあがっているJSONファイルをインポートしたい場合は、「HTTPS link」と書かれた青いリンクをクリックして、「HTTPS link to JSON」にJSONファイルのリンクを入力して「Sync JSON」をクリックするとインポートできます。

ローカルファイルのJSONファイルをインポートしたい場合は「Local JSON」と書かれた青いリンクをクリックして、JSONファイルを選択するだけでインポートできます。

Style：見た目の設定

［Style］では見た目の設定ができます。

Colors

［Colors］タブではチャートで使用する色を設定できます。
ラベルや線の色ではなく、グラフの色（折れ線グラフの場合は折れ線の色）を選択します。

上から順に優先して使われていくので、線の数が少ない場合は下の方の色は使われません。
各色の右に表示されている「三本線アイコン」をドラッグして並び変えられるので、それで調整しましょう。

Settings

［Settings］タブではグラフ全般の設定ができます。

項目	設定内容
Type of line	線の種類を選択する Curved：曲線 Straight：直線 Spline：スプライン曲線
Dots	ドットの種類を選択する Without dots：ドットなし Filled dots：ドットあり Unfilled dots：塗りなしのドット
Thickness of line, px	線の太さを指定する
Diameter of dot, px	ドットの直径を指定する

Labels

［Labels］ではグラフの端に表示されるラベルの設定ができます。

項目	設定内容
Labels	ラベルの表示を選択する Without labels：ラベルなし X&Y labels：X軸とY軸のラベルを表示する Y labels：Y軸のラベルを表示する X labels：X軸のラベルを表示する
Line height, px	行の高さを指定する
Font name	フォント名を指定する
Letter spacing, %	文字間を指定する
Font style	フォントスタイルを指定する
Text case	文字ケースを選択する Original：そのまま表示 Upper case：全て大文字で表示 Lower case：全て小文字で表示 Title：最初の文字が大文字で表示
Font size	文字サイズを指定する
Color	文字色を指定する
Data labels	データラベルの表示を選択する Show：表示 Hide：非表示
Data labels font size	データラベルの文字サイズを指定する
Data labels color	データラベルの文字色を指定する
Allow overlap of data labels	データラベルの重複を許可する No：許可しない Yes：許可する
Rotate labels	ラベルの回転する No：回転しない Auto：ラベル幅が狭いときに自動で回転する Always：常に回転する
Angle	開店時の角度を指定する

Grid

［Grid］ではグラフのグリッド線の設定ができます。

項目	設定内容
Grid	グリッドの表示設定を選択する Without grid：グリッドを非表示 Full grid：グリッドを表示 Horizontal grid：水平線のみ表示 Vertical grid：垂直線のみ表示
Color	グリッド線の色を指定する
Thickness of grid line, px	グリッド線の太さを指定する

項目

設定内容

Grid

グリッドの表示設定を選択する

Without grid：グリッドを非表示
Full grid：グリッドを表示
Horizontal grid：水平線のみ表示
Vertical grid：垂直線のみ表示

Color

グリッド線の色を指定する

Thickness of grid line, px

グリッド線の太さを指定する

Legend

［Legend］では凡例の設定ができます。

項目	設定内容
Legend	凡例の表示設定を選択する Without：凡例を非表示 Bottom：凡例をグラフ下に表示 Right：凡例をグラフ右に表示
Font size	凡例の文字サイズを指定する
Color	凡例の文字色を指定する

項目

設定内容

Legend

凡例の表示設定を選択する