はじめに
Figmaの楕円ツールは、Adobe XDと比べてより細かな設定が可能です。
今回は、Figmaの楕円ツールを活用して円グラフを作る方法を紹介したいと思います。
楕円ツールの使い方
まずは楕円ツールの操作方法を確認しましょう。
楕円ツール(ショートカットはO)を選択し、円を作成します。
右の方にカーソルを当てると、[Arc](もしくは[円弧])と表示されます。
白い丸を上下にドラッグすると、円に隙間ができます。
→右のサイドバーから、Start(開始)・Sweep(スイープ)・Ratio(比率)という3つの項目が編集できるようになります。
・Start(開始)：円弧の開始点の角度
・Sweep(スイープ)：Startからの円弧の割合
・Ratio(比率)：円を内側から切り抜く割合
これらを使って円グラフを作成してみましょう！
円グラフを作る手順
Step1 背景用の円を作成
まず、背景用にSweep(スイープ)が100％の円を作成します。
この時Ratio(比率)の数値を適宜変更して、希望する円グラフの形を作りましょう。
今回はRatioを80%にしました。
Step2 円を複製＆Sweepを調整
作成した円を複製し、Sweepの値を変更しましょう。
今回は60％の円グラフを作りたいのでSweepを60％にします。
Step3 Startを調整
text
今のままだと円弧の開始点がおかしくなってしまうので、Start(開始)の値を-90°にします。
Step4 色変更＆配置で完成！
text
色を変更し、背景用の円の上に配置して完成です！
お好みで円弧に角丸をつけることもできます。
まとめ
今回ご紹介した楕円ツールを活用すれば、円グラフを簡単に作成することができます。
是非試してみてください。
次回は、グラフにアニメーションをつける方法を解説します！お楽しみに！
この記事をシェアする
