figma-how-to-use-corner-radius
公開日: 2021.07.23  | 更新日: 2021.08.31

Figmaで角丸を使った便利なテクニック集

今回は、Figmaでシェイプやパスに角丸を適用するテクニックを紹介します。シェイプに角丸を適用することで、丸っこいUIやグラフィックを表現できるため、柔らかさ・滑らかさといった印象づけをすることに役立ちます。

この記事のターゲット

  • Figmaで角丸の使い方を知りたい方

  • 角丸のボタンやグラフィックを作りたい方

  • 角丸の細かい設定方法が知りたい方


シェイプのすべての角に同じ角丸をつける方法

四角形や三角形などのシェイプに角丸をつける方法は次の通りです。

  1. 角丸をつけたいシェイプ・パスを用意する

  2. シェイプを選択した状態で、右プロパティの上の方にある曲がったパスのアイコン(🌈 こんな形)の数値を好きな値(単位:px)に変更する

add-corner-radius

以上で、とても簡単に角丸をつけられます。

このほかに、以下の方法でも適用できます。

  1. 角丸をつけたいシェイプ・パスを用意する

  2. シェイプを選択した状態でマウスカーソルをシェイプに乗せる

  3. シェイプの角に小さい「○」アイコンのハンドルが表示されるので、これをシェイプの内側に向かってドラッグする

edit-corner-radius

この方法だと、角丸の適用具合を直感的に調節できますね。

シェイプの選択した角にだけ角丸をつける方法

次は、シェイプの選択した角にだけ角丸をつける方法です。

まずは、四角形(Rectangle)のシェイプで適用する方法です。

  1. 角丸をつけたい四角形シェイプを用意する

  2. シェイプを選択し、右プロパティの🌈 アイコンの右にある4つの角のようなアイコンをクリックする

  3. 左から「左上、右上、右下、左下」の順に角丸の値を設定できるので、適用したい箇所に値を入力する(cssのborder-radiusと似ていますね)

add-corner-radius-only-in-selected-part

次に、角を直接選択して設定する方法です。

この方法であれば四角形以外のシェイプでも選択した角にだけ角丸を適用できます。

  1. 角丸をつけたい四角形シェイプを用意する

  2. シェイプをダブルクリックし、パス編集モードにする

  3. 角丸をつけたいポイントを選択して、右プロパティの🌈 アイコンの値を編集する

edit-corner-radius-only-in-selected-part

これで四角形以外の複雑なシェイプ、または閉じられていないパスの角にも角丸を適用できます。

シェイプの拡大・縮小に合わせて角丸の大きさも変化させる方法

上で紹介した方法だと、シェイプを拡大しても角丸の大きさは設定した値で固定されているため、全体に対して角丸の大きさが変わることはありません。

fixed-corner-radius

UIコンポーネントなど、ガイドラインで角丸のサイズを固定したい場合には便利ですが、アプリアイコンやアバターアイコンなどの場合、シェイプを拡大したらそれに合わせて角丸も大きくなって欲しいですよね。

それに対応するには、次の方法で角丸をアウトライン化する必要があります。

  1. アウトライン化したいシェイプを選択

  2. 拡大する前に、右クリックのメニューから「Flatten」をクリック

  3. 好きなサイズに拡大・縮小する

create-corner-radius-outline

上記の手順で、全体の大きさに対して角丸のサイズも可変するようになります。

角丸の表現をさらに滑らかにする方法

iOS14のアプリアイコンなどは、実は純粋な角丸になっておらず、複数サイズの角丸を合成することで、直線との境界をより滑らかにする処理がされています。

Figmaでは、iOS14の角丸のスムージング処理に対応したオプション「Corner smoothing」が用意されていますので、その利用方法を紹介します。

  1. 角丸をつけたい四角形シェイプを用意する

  2. シェイプを選択し、右プロパティの🌈 アイコンの右にある4つの角のようなアイコンをクリックする

  3. 4つの角のようなアイコンの下に表示される「...」のアイコンをクリックする

  4. 「Corner smoothing」というポップアップが開くので、スライダーを調節して適用する量を設定する

  5. iOS準拠の値にしたい場合は、スライダー60%ぐらいにある「iOS」のあたりに設定してください

add-corner-smoothing

この処理は肉眼ではほとんど認識できないほどの処理なので、わかりやすいように処理が入っていない角丸に重ねてみてみると、差分がわかるかと思います。

figma-corner-smoothing

Appleのデザインへのこだわりを感じるとともに、それに追従しようとするFigmaの執念を感じます。

ちなみに、これらはスーパー楕円と呼ばれる角丸の表現にあたります。

巷で話題になったClubhouseのアバターアイコンのような、さらに強めのスムージング処理をするには、標準のCorner smoothingでは表現することができません。

代わりに、パスの変形を利用して擬似的に再現する方法を紹介した記事がありますので、参考にしてみてください。

Figmaで簡単になめらかな角丸の「スーパー楕円」を作る方法

今回は、デザイナー界隈で話題になったトークルームアプリ「Clubhouse」のプロフィールのアバターに使用されている、なめらかな角丸のシェイプ、いわゆる「スーパー楕円」をFigmaで簡易的に再現する方法をまとめました。 ... 続きを読む

figma-super-ellipse

いかがだったでしょうか。

角丸は非常にベーシックな機能ですが、使いこなせるとさまざまな応用がきく非常に便利な機能の一つです。

ぜひさまざまな角丸のパターンを試してください!

この記事を読んだ方におすすめの記事

Figmaで様々なドロップシャドウ(影)を適用する方法

今回はFigmaで図形オブジェクトやパスに影(ドロップシャドウ、インナーシャドウ)をつける方法を紹介します。WebページのUIを作る上でマウスオーバー(hover)した時のボタンに影をつけたり、グラフィック上の効果をつけたいときによく使う方法になります。 ... 続きを読む

figma-how-to-use-dropshadow

Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ... 続きを読む

figma-how-to-crop-and-mask

Figmaで簡単に円グラフや棒グラフを作る方法

今回はFigmaで細身の円グラフ・棒グラフを簡単に作成する方法を紹介します。慣れれば1分で作成でき、パターンを用意しておけばいつでも必要な時にサッと書き出せるようになるのでおすすめです。 ... 続きを読む

figma-how-to-create-pie-chart

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告