はじめに

この機能を使用できるユーザー

すべてのプランで利用できます

ファイルへの編集可アクセス権を持つすべてのユーザーは、過度の半径の調整とスムージングを行うことができます

インターフェースデザインでは、画面、アイコン、ボタン、カードなどの角が丸くなっています。目にとって、円や曲線を追うのは簡単ですが、鋭い角があると視線が乱れます。

Figmaは、角の半径を(密度非依存)ピクセルで表します。シェイプ全体またはベクターオブジェクトの各ポイントの角の半径を調整できます。

Figmaには丸い角を作成するための機能が2つあります。

• コーナー半径: 2本の線が交わる角を丸くします。角が丸いシェイプを作成するには、これを使用します。
• 角のスムージング: 丸みを帯びた角を調整して、連続したカーブを作成します。「スクワークル」を作成するには、この設定を使用します。

角の半径とスムージングは、以下に適用できます。

• フレーム
• 長方形、多角形、星形
• 閉じたシェイプのベクターネットワーク
• 四角形を含むブール演算

シェイプ全体の角の半径の調整

ベクターオブジェクトまたはシェイプの角の半径を調整する方法は複数あります。

デザインタブ

1. レイヤーを選択します。
2. 右サイドバーの[コーナー半径]フィールドにピクセル値を入力するか、カーソルをアイコンに合わせてクリックし、左にドラッグして縮小、または右にドラッグして拡大します。

キャンバス

キャンバス上の長方形、星形、多角形の角の半径を調整することもできます。

1. 更新するシェイプを選択します。
2. 調整する角の上にカーソルを合わせ、半径ハンドルを表示させます。
3. ドラッグして半径を調整します。

個々の角の半径の調整

Figmaはデフォルトで角の半径をシェイプ全体に適用します。個別の角の半径を調整する方法は複数あります。

個別の角の設定(フレームと長方形のみ)

個別の角の設定は、長方形とフレームで使用できます。

1. 更新する長方形またはフレームを選択します。
2. 右側のサイドバーの[個別の角]をクリックします。
3. [角の半径の詳細]パネルでは、以下が可能です。
   • 各角のピクセル値を入力
   • 4つの角の半径フィールドのいずれかで[バリアブルを適用]をクリックし、数字バリアブルを適用
   • スライダーを使用して角のスムージングを調整

1.  

キャンバス(長方形のみ)

キャンバス上で個別の角の半径を調整することもできます。これは長方形にのみ適用されます。

1. 更新するシェイプを選択します。
2. 修飾キーを長押しすると、1つの角を調整できます。
   • Mac: ⌥ Option
   • Windows: Alt
3. 調整する角の上にカーソルを合わせ、半径ハンドルを表示させます。
4. ドラッグして半径を調整します。

ベクター編集モード(シェイプと閉じたベクターネットワークのみ)

1. 更新するシェイプを選択します。
2. ツールバーで[オブジェクトの編集]をクリックするか、EnterまたはReturnキーを押してベクター編集モードに入ります。
3. キャンバス内の個別のポイントを選択します。
4. 右側のサイドバーのフィールドを使用して、角の半径を調整します。
5. [角の半径]フィールドにピクセル値を入力するか、カーソルをアイコンに合わせ、左にドラッグして縮小、または右にドラッグして拡大します。

スクワークルの角のスムージング

iOS7アプリのアイコンの丸角に違いがあることに気づいたデザイナーは、角のスムージングにより、通常の丸角では不可能な、継ぎ目のない連続したカーブを作成しました。

当社では、この特殊な効果を利用したシェイプを「スクワークル」と呼んでいます。四角と丸の中間のようなシェイプで、OS14を含むAppleの最近のデザインでも登場します。

スクワークルには数学的要素が多分に含まれています。詳細については、「Figmaエンジニアによるスクワークルの探求」をご覧ください。

角のスムージングの調整

角の半径を適用できるシェイプのすべてに角のスムージングを適用できます。角のスムージングは、角の半径とは異なり、シェイプ全体にのみ適用できます。

1. キャンバスまたは[レイヤー]パネルでレイヤーを選択します。
2. 右サイドバーの[デザイン]パネルを開きます。
3. [個別の角]アイコンをクリックして、[角の半径]パネルを開きます。
4. スライダーを使用して角のスムージングを調整するか、iOSをクリックして角のスムージングをiOSのデフォルトの60%に設定します。