Figmaで円グラフの作り方を知りたい
この記事は上記の課題に向けて作成しています。
Figmaでは円グラフを簡単に作ることが出来ます。
作り方はわからない方は是非この記事を読んでください。
この記事を読むメリット
- Figmaで円グラフを作る方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDで円グラフを作る方法も紹介しています。詳しくは下記の記事をご覧ください。
あわせて読みたい
【XD】円グラフをプラグイン無しで作る方法を紹介！
XDで円グラフを作る方法が知りたい この記事は上記の課題に向けて作成しています。 XDでは円グラフを簡単に作ることが出来ます。 プラグインを使わずに作成出来るためXD...
目次
Figmaで円グラフを作成する方法
早速Figmaで円グラフを作る方法を紹介します。
今回は下記の円グラフを作ります。
円グラフの作成手順は下記の通りです。
Figmaで円グラフを作る手順
- 正円を作る
- 円をグラフの割合に合わせる
- 細身の円グラフに変形させる
- 円グラフを複数し重ねる
正円を作る
始めに正円を作ります。
Figmaでは「シェイプツール」から正円を作ることが出来ます。
「楕円」を選択して「Shift」を押しながら配置すると正円が作れます。
円をグラフの割合に合わせる
続いて円をグラフに割合に合わせていきます。
正円を選択すると右側に白い⚪︎（円弧）があります。
円弧を選択した状態でカーソルを移動させると円が割れていきます。
円が割れると円弧のオプションが表示されるので、ここから微調整を行なってください。
円弧のオプション内容は下記の通りです。
円弧のオプション
- 開始：どの位置から円が割れ始めるかを設定出来ます。上から割れ始めるようにするには「ー90°」にする必要があります。
- スウィープ：どの程度円を割るか設定出来ます。
- 比率：円の中心から隙間ができ、細くすることが出来ます。
細身の円グラフに変形させる
先ほど作成した円グラフを細身に変形させます。
円弧オプションの「比率」から調整します。
円グラフを複数し重ねる
最後に同様の円グラフを複数個作成し重ねます。
すると最初に見せたような円グラフの完成です。
Figmaで円グラフを作成するのは簡単
この記事ではFigmaで円グラフを作成する方法を紹介しました。
Figmaでは簡単に円グラフを作ることが出来ます。
まだやったことのない方は是非実施してみてください。
リンク
Figmaに関する他の記事はこちら
あわせて読みたい
Figmaで画像の背景を透過する方法を紹介！
Figmaで画像の背景を透明にしたい この記事は上記の課題に向けて作成しています。 画像の背景を透明に切り抜いて使用することがあると思います。 Figmaでは簡単に画像の...
あわせて読みたい
【Figma】コンポーネント化を解除する方法！
Figmaのコンポーネント化を解除する方法を知りたい この記事は上記の課題に向けて作成しています。 Figmaで制作中にコンポーネント化した要素を解除したい場合がありま...
あわせて読みたい
【Figma】オブジェクトを上下左右に反転させる方法！
Figmaでオブジェクトを上下左右に反転させる方法を知りたい この記事は上記の課題に向けて作成しています。 Figmaは既存の機能でオブジェクトを上下左右に反転させるこ...