Figmaで角丸の図形を作りたい
この記事は上記の課題に向けて作成しています。
デザイン作成時に長方形などの角を丸くすることがあります。
Figmaは他のデザインツールと同様に簡単に角を丸く出来ます。
この記事ではFigmaで角を丸くする方法を紹介します。
この記事を読むメリット
- Figmaで図形の角を丸くする方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDで角丸図形を作る方法についてはこちらの記事を参考にしてください。
Figmaで角を丸くする方法
早速Figmaで角を丸くする方法を紹介します。
Figmaで角を丸くする手順は下記の通りです。
Figmaで角を丸くする手順
- 図形を用意する
- 「角の半径」で角丸を調整する
図形を用意する
始めに図形を用意します。
長方形ツールから図形を作成してください。
「角の半径」で角丸を調整する
続いて図形を角丸にします。
図形を選択した状態で「角の半径」の数値を調整します。
すると図形の角が丸くなります。
また、右側にある「個別の角」では1箇所の角のみ調整することが出来ます。
「角のスムージング」で角丸をさらに滑らかにする
作成した図形の角丸をさらに滑らかにする方法があります。
「角のスムージング」という機能を使うことで実装できます。
手順は下記の通りです。
「角のスムージング」機能の手順
- 図形を選択する
- 「個別の角」を選択する
- 「角のスムージング」で調整する
図形を選択する
まずは図形を選択します。
「個別の角」を選択する
続いて先ほど説明した個別の角を選択します。
「角のスムージング」で調整する
「角のスムージング」で調整します。
すると丸角がより滑らかになります。
少しわかりにくいですが、変化前のものと重ねてみるとよくわかります。
※iOSのアプリアイコンは通常の角丸ではなくより滑らかな角丸が採用されています。滑らかな角丸のFigmaでは作成することが可能なのです。
Figmaで角を丸くするのは簡単！
この記事はFigmaで角を丸くする方法を紹介しました。
Figmaでは簡単に角を丸くすることが出来ます。
さらに「角のスムージング」を使うことで、iOSのアプリアイコンの様な滑らかな角丸が作れます。
まだやったことの無い方は是非実施してみてください。
Figmaに関する他の記事はこちら
