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

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

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

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

Chart

Chart

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]タブでは見た目の設定をして、サイドバーで作成したいグラフの種類を選択します。

Chartパネル

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

Data:データの設定

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

Random

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

Chartパネル

項目内容
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からデータを取り込めます。

[Table]タブ

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

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

「Link with Google Sheet」

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

JSON

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

[JSON]タブ

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

「HTTPS link to JSON」

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

Style:見た目の設定

[Style]では見た目の設定ができます。

Colors

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

Colors

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

Settings

[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]

項目設定内容
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]

項目設定内容
Grid

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

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

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

Thickness of grid line, pxグリッド線の太さを指定する

Legend

[Legend]では凡例の設定ができます。

[Legend]

項目設定内容
Legend

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

  • Without:凡例を非表示
  • Bottom:凡例をグラフ下に表示
  • Right:凡例をグラフ右に表示
Font size

凡例の文字サイズを指定する

Color凡例の文字色を指定する

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

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

Twitterをフォロー Facebookでいいね