FD4B: 楕円を円弧にする

では、最後のシェイプに進みます。再現するデザインを見てみましょう。Figma Designでは、多くのことと同様に、このシェイプを作る方法はいくつもあります。ブール演算を使う方法や、ペンツールで一から描く方法もありますが、少し手間がかかります。ここでは時間を節約して、楕円のアークプロパティを調整してみましょう!

楕円のアークプロパティを使うと、単なる楕円をリングやウェッジのような形に変えることができます。カスタムアイコンやイラストを作る際に、とても便利な機能です。

スライスシェイプを作成する

1. 40 x 40の楕円をシェイプ5フレームに追加します。
2. 楕円の上にカーソルを重ねると、円弧ハンドルが表示されます。あなたはこのハンドルを使って円弧のスイープを制御します。
3. 楕円の円弧上でハンドルをクリックしてドラッグすると、円弧プロパティにアクセスできます。
4. 2つの追加ハンドルが表示されます:開始ハンドルは弧が始まる位置を制御し、比率ハンドルは楕円をリングに変更するのを可能にします。同じ設定は右サイドバーの 外観セクションでも利用可能になります。
5. 楕円を選択し、プロパティを変更するための方法のいずれかを使用します:

• • 開始を180に設定
  • スイープを25に設定
  • 比率を15に設定

シェイプと弧のバウンディングボックス

楕円のバウンディングボックスが依然として 40 x 40であることに気付くかもしれませんが、シェイプ自体は視覚的にはそのスペースの一部しか占めていません。これは今まで遭遇したことのない状況なので、何が起きているのか詳しく見ていきましょう。

楕円の円弧プロパティを変更しても、キャンバス上での外見が変わるだけで、シェイプの実際の寸法は変わりませんでした。ブール演算と同様に、楕円の円弧プロパティを変更することは、非破壊的なアクションです。シェイプのバウンディングボックスは、後で円弧を再度変更したくなった場合に備えて、スペースを確保するために同じサイズのまま保持されました。多角形や星形のポイント数を変更する場合も、同じ原理が適用されます。シェイプレイヤーの編集についてもっと学ぶ。

シェイプを統合する

私たちのシェイプは見た目は良いですが、他のレイヤーの隣に配置する際に、バウンディングボックスがシェイプの形状により適合していると便利です。これを行うためには、レイヤーを統合することができます。

1. レイヤーを右クリックして、統合を選択します。素晴らしい!これでバウンディングボックスが新しいシェイプにぴったり沿うようになりました。
2. シェイプがまだ小さすぎるので、右サイドバーのサイズフィールドを使用して40 x 40にサイズを変更します。
3. フレーム内で必要に応じて、シェイプを中央に配置します。
4. フレームの名前をスライスに変更します。

オブジェクトの統合について

統合することにより、オブジェクトのレイヤーを単一のベクターレイヤーにマージし、デザインを簡素化し、ファイルサイズを削減し、アセットの互換性を向上させます。

ベクターレイヤーの選択を統合して、複雑なベクター形状に統合することができます。テキストレイヤーを統合して、ロゴやワードマーク用に書体の一部をカスタマイズすることもできます。フレームやセクションのようなコンテナレイヤーをフラット化すると、その子レイヤーが1つに統合され、コンテナレイヤー自体はキャンバスから削除されます。

統合は破壊的アクションです。オブジェクトを統合すると、その個々のレイヤーを再び分離することはできなくなります。オブジェクトを統合するには、右クリックして統合を選択するか、キーボードショートカットを使用します。誤って何かを統合した場合は、戻るショートカットを使用するか、ファイルのバージョン履歴を使用して以前のバージョンを復元できます。

クリーンアップしてコンポーネントを作成

私たちのカスタムシェイプは素晴らしい見栄えです!まず、スキルリストで使えるようにするため、いくつかの整理作業を始めましょう:

1. 全てのフレームを選択して、塗りセクションのマイナスをクリックしてフレームの塗りを削除します。
2. フレームを選択したままで、右サイドバーの複数のコンポーネントを作成を使用します。
3. コンポーネントを右クリックし、ページに移動 > コンポーネントを選択してコンポーネントページに移動します。