Figmaで円グラフを作る方法をわかりやすく解説します

はじめに

Figmaの楕円ツールは、Adobe XDと比べてより細かな設定が可能です。
今回は、Figmaの楕円ツールを活用して円グラフを作る方法を紹介したいと思います。

楕円ツールの使い方

まずは楕円ツールの操作方法を確認しましょう。

楕円ツール(ショートカットはO)を選択し、円を作成します。

右の方にカーソルを当てると、[Arc](もしくは[円弧])と表示されます。

白い丸を上下にドラッグすると、円に隙間ができます。
→右のサイドバーから、Start(開始)・Sweep(スイープ)・Ratio(比率)という3つの項目が編集できるようになります。

 

・Start(開始)：円弧の開始点の角度
・Sweep(スイープ)：Startからの円弧の割合
・Ratio(比率)：円を内側から切り抜く割合 

これらを使って円グラフを作成してみましょう！

 

円グラフを作る手順

Step1

まず、背景用にSweep(スイープ)が100％の円を作成します。

この時Ratio(比率)の数値を適宜変更して、希望する円グラフの形を作りましょう。
今回はRatioを80%にしました。

 

Step2 

作成した円を複製し、Sweepの値を変更しましょう。
今回は60％の円グラフを作りたいのでSweepを60％にします。

 

Step3

今のままだと円弧の開始点がおかしくなってしまうので、Start(開始)の値を-90°にします。

 

Step4

色を変更し、背景用の円の上に配置して完成です！ 
お好みで円弧に角丸をつけることもできます。

 

まとめ

今回ご紹介した楕円ツールを活用すれば、円グラフを簡単に作成することができます。
是非試してみてください。

次回は、グラフにアニメーションをつける方法を解説します！お楽しみに！

---

---