Figmaで円グラフを作る方法を紹介！

2024年12月4日2025年5月4日

この記事では「Figmaで円グラフを作る方法」と「円グラフが作れるメリット」の2つの内容を紹介します。

Figmaで円グラフを作成する方法

早速Figmaで円グラフを作る方法を紹介します。

今回は下記の円グラフを作ります。

円グラフの作成手順は下記の通りです。

Figmaで円グラフを作る手順

始めに正円を作ります。

長方形ツールを右クリックして「楕円ツール」を選択します。

「Shift」を押しながら配置すると正円が作れます。

円弧オプションは始めから表示されている訳では無いため、表示させる必要があります。

正円を選択すると右側に白い⚪︎（円弧）があります。

円弧を選択した状態でカーソルを移動させると円が割れ、右サイドバーの「外見」に3つの円弧ツールが表示されます。

円弧オプションを使って円グラフ用に変形させます。

円弧オプション

今回は「Start（開始）：-90°」、「Sweep（スイープ）：65%」、「Retio（比率）：60%」にします。

最後に同様の円グラフを複数個作成し重ねます。

すると最初に見せたような円グラフの完成です。

それぞれ色を変えることで分かりやすい円グラフになりますよ。

Figmaで円グラフを作れるようになると、5つのメリットがあります。

Figmaで円グラフが作れるメリット

ビジュアル資料の効率的な作成
- 円グラフはデータを視覚的にわかりやすく表現できるため、プレゼン資料やWebデザイン内のインフォグラフィックスに最適です。
- デザインの一部として自然に組み込めるため、視覚的な一貫性を保ちやすくなります。
外部ツール不要で作業効率アップ
- ExcelやGoogleスプレッドシートでグラフを作って画像として貼り付ける手間が省け、すべてFigma内で完結できます。
- 修正もその場で即時に行えるため、作業スピードが向上します。
カスタマイズ性の高さ
- カラー、フォント、アニメーション、サイズなど、グラフィックとして細かくデザインを調整可能。
- ブランドガイドラインに合わせたスタイル調整も簡単です。
チームとのコラボレーションが容易
- Figmaは共同編集ができるため、チームメンバーとリアルタイムでグラフの確認や修正が可能。
- プレゼンやデザインレビューでも即座に調整できます。
再利用性とコンポーネント化
- よく使う円グラフスタイルをコンポーネント化しておけば、他のプロジェクトでも流用可能。
- 一括でスタイルの更新もできるため、メンテナンスが楽になります。