デザインで再利用するためのコンポーネントの作成

オブジェクトまたはレイヤーのコレクションからコンポーネントを作成することができます。シェイプ、ボタン、フィールドのような単純なものから、カードやメニューのような複雑なデザインのものまで作成することができます。

コンポーネントの作成

レイヤーのコレクションから単一のコンポーネントを作成することができます。または、オブジェクトのセレクションから個別のコンポーネントを一括で作成することができます。

単一のコンポーネントの作成

コンポーネントを作成する方法は複数あります。最初に、コンポーネントに含めるレイヤーを選択する必要があります。

1. コンポーネントに含めるレイヤーを選択します。
2. コンポーネントは、次のようにいくつかの方法で作成することができます。
   
   • [プロパティパネル] > [コンポーネントを作成]にあるセレクション名の横のをクリックします。
   • セレクションを右クリックして[コンポーネントを作成]を選択します。
   • キーボードショートカットを使用します。
     • Mac: ⌥ Option - ⌘ Command - K
     • Windows: Ctrl + Alt + K
3. Figmaでは、レイヤーが特殊コンポーネントフレーム内にネストされます。紫のアイコンをクリックして、[レイヤー]パネルのコンポーネントを特定します。
4. 右側のサイドバーで、コラボレーターのために[説明]と[ドキュメンテーションリンク]に入力してください。コラボレーターと開発者はさまざまな場所で説明とドキュメンテーションを閲覧できます。

コンポーネントの一括作成

デフォルトでは、{コンポーネントを作成]アクションにより、セレクションから単一コンポーネントが作成されます。

コンポーネントを一括で作成することもできます。この場合、複数のグループまたはフレームを選択して、複数のコンポーネントを作成します。複数のコンポーネントは、次のものから作成することができます。

• 複数フレームの複数のオブジェクトとレイヤー
• 複数グループの複数のオブジェクトとレイヤー
• パスまたはベクターネットワークのような単一レイヤー
• ブール演算のレイヤー

1. コンポーネントの作成に使用するレイヤーを選択します。
2. プロパティパネルでセレクション名の横のをクリックします。
3. オプションで[複数のコンポーネントを作成]を選択します。
4. コンポーネントは、各フレーム、グループ、ブール演算またはパスに対して作成されます。

コンポーネントの削除

コンポーネントはいつでも削除することができます。

メインコンポーネントを削除しても、ファイルに含まれるコンポーネントのインスタンスは削除されません。

1. 削除するコンポーネントを選択します。
2. deleteキーを押します。

コンポーネントの復元

削除されたコンポーネントのインスタンスが存在していれば、そのインスタンスを使用してコンポーネントを復元できます。

インスタンスの詳細情報→

インスタンスからコンポーネントを復元する方法は複数あります。

右側のサイドバーから

1. 削除されたコンポーネントの現存しているインスタンスを選択します。
2. 次のいずれかの操作でコンポーネントを復元します。
   • メインコンポーネントが存在していたライブラリファイルで作業している場合は、右側のサイドバーのプロパティパネルで[コンポーネントを復元]ボタンをクリックします。
   • メインコンポーネントが存在していなかったファイルで作業している場合は、 [ライブラリのメインコンポーネントに移動]アイコンをクリックします。次に、ダイアログウィンドウの[復元]ボタンをクリックします。

右クリックメニューで復元

1. キャンバスのインスタンスを右クリックします。
2. 次のいずれかの操作でコンポーネントを復元します。
   • メインコンポーネントが存在していたライブラリファイルで作業している場合は、[メインコンポーネント]オプションにカーソルを合わせて[メインコンポーネントを復元]クリックします。
   • メインコンポーネントが存在していなかったファイルで作業している場合は、[メインコンポーネントに移動]をクリックします。次に、ダイアログウィンドウの[復元]ボタンをクリックします。