figma-nested-instance-property-setting
公開日: 2022.09.23  | 更新日: 2022.09.23

Figmaでコンポーネントに内包されたインスタンスのプロパティを効率的に変更する方法

今回は、子インスタンスを内包(ネスト)した親コンポーネントを作成する際に、親のインスタンス内で子のプロパティを効率的に設定する方法を紹介します。テキストの説明だけだとやや難解なので、記事内の動画もあわせて参考にしてください。

これまではコンポーネント内のインスタンスがプロパティを持つ場合、私のインスタンスを直接選択しなければプロパティを変更できませんでした。

2022年9月のアップデートで、例えばボタン・コンポーネントを内包したダイアログ・コンポーネントの場合、ダイアログのプロパティからボタンのプロパティを直接変更できるようになります。

この記事のターゲット

  • Figmaでインスタンスをネストしたコンポーネントを利用している方

  • コンポーネント内のインスタンスのプロパティを頻繁に変更する方


0. ネスト構造を持つコンポーネントを用意する

ネスト構造とは、コンポーネントの中に、別のコンポーネントのインスタンスを含むコンポーネントのことです。

今回は、過去の記事で作成したサイドメニュー・コンポーネントを利用します。

構造的には、メニュー内のボタンコンポーネントのインスタンス(子インスタンス)と、それをまとめたサイドメニューコンポーネント(親コンポーネント)の親子構造になっています。

作り方や実際のデータについては以下の記事を参考にしてください。

Figmaでシンプルなサイドメニュー・コンポーネントを作る方法

今回は、Figmaでシンプルなサイドメニュー・コンポーネントを作る方法を紹介します。一般的なサイドメニューを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-side-menu

1. コンポーネントの設定から「新しいオーサリング機能をためす」の設定を有効にする

2022年9月現在はベータ機能のようですが、新たに「コンポーネントプロパティ」という項目が追加され、「新しいオーサリング機能をためす」が設定できるようになりました。

新しいオーサリング機能をためす

ネストされたインスタンスの公開、インスタンス入れ替えの優先値の設定、すべてのインスタンスの簡素化が可能です。

これにより、親コンポーネントからネストされた子インスタンスのプロパティを参照できるようになります。

設定の手順は次のとおりです。

  1. 任意のコンポーネントを選択する

  2. 右メニューのコンポーネント名の右側の設定アイコンをクリック

  3. コンポーネント設定のポップアップの「新しいオーサリング機能をためす」のスイッチをON

nested instance1

コンポーネントやファイルごとに設定する必要はなく、一度設定するとアカウントがアクセスできる他のファイルでも共通で有効になるようです。

2. ネストが含まれる親コンポーネントのプロパティで「ネストされたインスタンス」を追加する

1で設定を有効化したことで、子インスタンスを親コンポーネントのプロパティに追加できるようになったので、プロパティに追加していきます。

手順は次のとおりです。

  1. 親となるコンポーネントを選択

  2. プロパティで「+」ボタンをクリック

  3. プルダウンメニューから「ネストされたインスタンス」を選択

  4. コンポーネントに含まれるインスタンスの一覧からプロパティで表示するものを選択

nested instance2

これで、選択されたインスタンスが親コンポーネントのプロパティに表示されるようになります。

3. 親コンポーネントのインスタンスのプロパティで、子インスタンスのプロパティを変更する

これで、親コンポーネントのインスタンスから子インスタンスのプロパティを直接変更できるようになりました。

以下はコンポーネントからインスタンスを作成し、実際に子インスタンスのプロパティを変更している様子です。

インスタンスごとにプロパティの値は維持されます。

nested instance3


この記事を読んだ方におすすめの記事

FigmaのPaddingやカーソル移動のデフォルト値を設定する方法

今回はFigmaでオブジェクトをカーソル移動するときや、Auto layout使用時にPaddingに設定される値(10px)などの初期値を変更する方法を紹介します。デザインシステムなどを利用していて4や8の倍数を基準にしたい場合などにおすすめです。 ... 続きを読む

figma-set-small-and-big-nudge-values

Figmaで汎用的なUIコンポーネントを作る方法

今回はFigmaで汎用的なUIコンポーネントを作る方法をいくつか紹介します。この記事の方法では、プラグインなどは利用せずにFigmaの基本機能のみで作成できます。実際のサンプルデータもあわせて用意しているので、参考にしてみてください。 ... 続きを読む

figma-how-to-design-ui-components

FigmaのComponent propertiesとVariantsの使い分けの考察

今回は2022年5月11日に公開されたFigmaの新機能「Component properties」の使い方を検証しつつ、類似する既存機能「Variants」との使い分けについて考察してみます。自由研究形式で追記しながら記事を更新しています。 ... 続きを読む

figma-component-properties-vs-variants

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告