コンポーネントインスタンスの作成と挿入

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

すべてのプランで利用可能

有料チーム内でファイルの編集可アクセス権があれば、ユーザーはコンポーネントプレイグラウンドにアクセスできます。

ファイルへの閲覧のみアクセス権を持つユーザーは、そのライブラリのコンポーネントを使用できます

コンポーネント入門: スタイルおよびコンポーネントライブラリのガイド →

コンポーネントは、デザイン全体で再利用できるUI要素です。

• メインコンポーネントは、要素のプロパティを定義します。
• インスタンスは、デザインで再利用できるコンポーネントのコピーです。

コンポーネントインスタンスを作成してデザインに挿入する方法はいくつかあります。

• 左サイドバーのアセットパネルから
• コンポーネント詳細モーダル(アセットパネルからアクセス可能)から
• クイックインサートを使って
• インスタンスをコピーまたは複製して

アセットパネル

左サイドバーのアセットパネルで、ファイルに追加するコンポーネントを検索できます。アセットパネルに表示するライブラリを選択できます。

アセットパネルを開くには、次の手順に従います。

1. 左サイドバーの[アセット]タブを選択するか、次のショートカットを使用します。
   • Mac: ⌥ Option 2
   • Windows: Alt 2
2. 使用するコンポーネントを見つけます。
   • 現在のファイル内に作成されたローカルコンポーネントを表示します
   • 有効なライブラリからコンポーネントを見つけ、ライブラリモーダルを開いて、利用可能なライブラリを管理します
   • とを使用して、グリッドビューとリストビューを切り替えます
   • 検索フィールドを使用して、アクセス権があるライブラリ内でコンポーネントを見つけます。これには、少なくとも閲覧のみアクセス権があるチームまたは組織のライブラリとファイルが含まれます
   • コンポーネントの上にマウスポインターを移動すると、使用可能なバリアントが存在する場合はその数が表示されます
   • コンポーネントをクリックしてコンポーネントの詳細モーダルを開きます
3. コンポーネントをクリックしてキャンバス上にドラッグし、そのコンポーネントのインスタンスを作成します。

• ドラフトのライブラリの管理
• デザインファイルのライブラリの管理
• チームのライブラリの管理
• デフォルトの組織ライブラリの管理

コンポーネント詳細モーダル

コンポーネント詳細モーダルには、以下が表示されます。

• コンポーネントのドキュメント
• コンポーネントが含まれているライブラリ
• コンポーネントのデフォルト状態のプレビュー

有料チームのライブラリに編集可アクセス権を持っている場合、コンポーネントのプレイグラウンドに追加アクセスできます。

コンポーネントのプレイグラウンドでは、次のことができます。

• コンポーネントのバリアントをプレビューする
• コンポーネントのプロパティを表示し、設定する
• ネストされたインスタンスが公開されている場合は、ネストされたコンポーネントのプロパティを表示し、設定する
• コンポーネントに適用されるすべてのバリアブルのバリアブルモードを表示し、変更する
• コンポーネントをキャンバスに挿入する

1. 左サイドバーの[アセット]タブを選択するか、次のショートカットを使用します。
   • Mac: ⌥ Option2
   • Windows: Alt2
2. コンポーネントを見つけて選択し、コンポーネントの詳細モーダルを開きます。
3. コントロールを使用してコンポーネントを設定します。
4. インスタンスを挿入するには、[インスタンスを挿入]をクリックするか、プレビューをキャンバスにドラッグします。

クイックインサート

クイックインサートを使用して、キーボードからコンポーネントのインスタンスを挿入します。クイックインサートでは、[リソース]モーダルが開きます。このモーダルで有効なライブラリでコンポーネントを検索して表示することができます。

リソースモーダルで検出されるコンポーネントは、[アセット]パネルに表示される内容を反映しています。

1. クイックインサートを開くには、ショートカットShift Iを使用します。
2. コンポーネントを見つけるには、次のいずれかを実行します。
   • 検索バーを使用して特定のコンポーネントを検索するか、矢印キーを使用して関連コンポーネントに移動します。
   • アイコンとアイコンを使用して、グリッドビューとリストビューを切り替えます。
   • 全ファイルの中で最近使用されたコンポーネントから選択するか、有効なライブラリから選択します。ライブラリが表示されない場合、最初にライブラリを有効にしておく必要があります。 デザインファイルでのライブラリの管理 →
3. 入れ替え: インスタンスを選択するか、インスタンスの上にマウスポインターを移動し、Macの場合は⌥ Optionキー、Windowsの場合はCtrlキーを押したままにします。コンポーネントとインスタンスの入れ替え →

コピーまたは複製

キーボードショートカットを使った複製

同じファイルで作業している場合は、コンポーネントを複製してインスタンスを作成できます。以下のキーボードショートカットを使用して複製してください。

• Mac: ⌘ Command D
• Windows: Ctrl D

ドラッグしてコピー

同じファイル内でコンポーネントをドラッグしてコピーすることもできます。

1. Macの場合は⌥ Optionキー、Windowsの場合はAltキーを押しながらドラッグしてインスタンスを作成します。
2. マウスボタンは、修飾キーを離す前に離します。キーを先に離すと、コンポーネントの複製ではなく、移動が行われます。

コピーと貼り付け

同じファイル内の任意のコンポーネントをコピーして貼り付け、インスタンスを作成できます。

コンポーネントインスタンスと公開済みのメインコンポーネントを、ファイル間でコピーして貼り付けることができます。

• Mac: ⌘ CommandCおよび⌘ CommandV
• Windows: CtrlCおよびCtrlV