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

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

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

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

ファイルの閲覧のみアクセス権があるユーザーは、そのライブラリから取得したコンポーネントを使用できます。

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

コンポーネントは、デザイン全体で再利用できる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