Figmaで角丸を使った便利なテクニック集
今回は、Figmaでシェイプやパスに角丸を適用するテクニックを紹介します。シェイプに角丸を適用することで、丸っこいUIやグラフィックを表現できるため、柔らかさ・滑らかさといった印象づけをすることに役立ちます。
この記事のターゲット
Figmaで角丸の使い方を知りたい方
角丸のボタンやグラフィックを作りたい方
角丸の細かい設定方法が知りたい方
シェイプのすべての角に同じ角丸をつける方法
四角形や三角形などのシェイプに角丸をつける方法は次の通りです。
角丸をつけたいシェイプ・パスを用意する
シェイプを選択した状態で、右プロパティの上の方にある曲がったパスのアイコン（🌈 こんな形）の数値を好きな値（単位：px）に変更する
以上で、とても簡単に角丸をつけられます。
このほかに、以下の方法でも適用できます。
角丸をつけたいシェイプ・パスを用意する
シェイプを選択した状態でマウスカーソルをシェイプに乗せる
シェイプの角に小さい「○」アイコンのハンドルが表示されるので、これをシェイプの内側に向かってドラッグする
この方法だと、角丸の適用具合を直感的に調節できますね。
シェイプの選択した角にだけ角丸をつける方法
次は、シェイプの選択した角にだけ角丸をつける方法です。
まずは、四角形（Rectangle）のシェイプで適用する方法です。
角丸をつけたい四角形シェイプを用意する
シェイプを選択し、右プロパティの🌈 アイコンの右にある4つの角のようなアイコンをクリックする
左から「左上、右上、右下、左下」の順に角丸の値を設定できるので、適用したい箇所に値を入力する（cssのborder-radiusと似ていますね）
次に、角を直接選択して設定する方法です。
この方法であれば四角形以外のシェイプでも選択した角にだけ角丸を適用できます。
角丸をつけたい四角形シェイプを用意する
シェイプをダブルクリックし、パス編集モードにする
角丸をつけたいポイントを選択して、右プロパティの🌈 アイコンの値を編集する
これで四角形以外の複雑なシェイプ、または閉じられていないパスの角にも角丸を適用できます。
シェイプの拡大・縮小に合わせて角丸の大きさも変化させる方法
上で紹介した方法だと、シェイプを拡大しても角丸の大きさは設定した値で固定されているため、全体に対して角丸の大きさが変わることはありません。
UIコンポーネントなど、ガイドラインで角丸のサイズを固定したい場合には便利ですが、アプリアイコンやアバターアイコンなどの場合、シェイプを拡大したらそれに合わせて角丸も大きくなって欲しいですよね。
それに対応するには、次の方法で角丸をアウトライン化する必要があります。
アウトライン化したいシェイプを選択
拡大する前に、右クリックのメニューから「Flatten」をクリック
好きなサイズに拡大・縮小する
上記の手順で、全体の大きさに対して角丸のサイズも可変するようになります。
角丸の表現をさらに滑らかにする方法
iOS14のアプリアイコンなどは、実は純粋な角丸になっておらず、複数サイズの角丸を合成することで、直線との境界をより滑らかにする処理がされています。
Figmaでは、iOS14の角丸のスムージング処理に対応したオプション「Corner smoothing」が用意されていますので、その利用方法を紹介します。
角丸をつけたい四角形シェイプを用意する
シェイプを選択し、右プロパティの🌈 アイコンの右にある4つの角のようなアイコンをクリックする
4つの角のようなアイコンの下に表示される「...」のアイコンをクリックする
「Corner smoothing」というポップアップが開くので、スライダーを調節して適用する量を設定する
iOS準拠の値にしたい場合は、スライダー60%ぐらいにある「iOS」のあたりに設定してください
この処理は肉眼ではほとんど認識できないほどの処理なので、わかりやすいように処理が入っていない角丸に重ねてみてみると、差分がわかるかと思います。
Appleのデザインへのこだわりを感じるとともに、それに追従しようとするFigmaの執念を感じます。
ちなみに、これらはスーパー楕円と呼ばれる角丸の表現にあたります。
巷で話題になったClubhouseのアバターアイコンのような、さらに強めのスムージング処理をするには、標準のCorner smoothingでは表現することができません。
代わりに、パスの変形を利用して擬似的に再現する方法を紹介した記事がありますので、参考にしてみてください。
Figmaで簡単になめらかな角丸の「スーパー楕円」を作る方法
今回は、デザイナー界隈で話題になったトークルームアプリ「Clubhouse」のプロフィールのアバターに使用されている、なめらかな角丸のシェイプ、いわゆる「スーパー楕円」をFigmaで簡易的に再現する方法をまとめました。 ...
いかがだったでしょうか。
角丸は非常にベーシックな機能ですが、使いこなせるとさまざまな応用がきく非常に便利な機能の一つです。
ぜひさまざまな角丸のパターンを試してください！
この記事を読んだ方におすすめの記事
Figmaで様々なドロップシャドウ（影）を適用する方法
今回はFigmaで図形オブジェクトやパスに影（ドロップシャドウ、インナーシャドウ）をつける方法を紹介します。WebページのUIを作る上でマウスオーバー（hover）した時のボタンに影をつけたり、グラフィック上の効果をつけたいときによく使う方法になります。 ...
