コンポーネントインスタンスの作成と挿入 – Figma Learn - ヘルプセンター

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

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

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

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

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

ヒント: Dev Modeでインスタンスをready for devにすると、ファイルの構成を変えることなくコンポーネントインスタンスを開発に引き渡すことができます→

アセットパネル

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

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

左サイドバーの[アセット]タブを選択するか、次のショートカットを使用します。
- Mac: ⌥ Option 2
- Windows: Alt 2
使用したいコンポーネントを含むライブラリを選択します
使用するコンポーネントを見つけます
コンポーネントをクリックしてキャンバス上にドラッグし、そのコンポーネントのインスタンスを作成します。

ヒント: [アセット]タブの外観を自分の好みに合わせてカスタマイズできます。をクリックして、グリッド表示またはリスト表示に切り替えたり、サブフォルダを表示または非表示にできます。

注: 必要なライブラリが[アセット]パネルから見つからない場合は、をクリックして、チームまたは組織内で利用可能なライブラリを参照し、ファイルに追加します。

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

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

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

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

クイックインサートを使用して、キーボードからコンポーネントのインスタンスを挿入します。クイックインサートによりアクションメニューが開き、ファイルに追加されたライブラリからコンポーネントを見つけて閲覧することができます。

ヒント: インスタンスからメインコンポーネントを見つける必要がある場合、任意のインスタンスを右クリックして[メインコンポーネントに移動]を選択するか、次のキーボードショートカットを使用します。

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

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

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

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