Web制作で知っておくべきFigmaの学習 #Day14「Component Properties（コンポーネントプロパティ）」

Component（コンポーネント）とValiants（バリアント）が理解できたら、 ボタンなどのパーツを再利用しながら、デザインを変更させるという管理ができるようになります。 コンポーネントの内部構造が複雑になると、使う側が困ることがあるんですよね。 例えば、アイコン付きのボタンを作ったとします。

・ボタンの文字を変更したい ・アイコンを表示したり、非表示にしたい ・アイコンを別のものに交換したい ・ボタンの状態を「通常」から「無効」に切り替えたい

こう言う場合、毎回コンポーネントの内部に入ってレイヤーを探して変更するのでは、使い勝手がよくありません。 そこで使うのが、今回学習をする、Component Properties（コンポーネントプロパティ）です。 コンポーネントの中にある設定を、インスタンスを使う人が扱いやすい形で公開する仕組みです。 いよいよインタラクティブ・デザインとしてのFigmaの真骨頂機能ですね！

Component Propertiesの4つの種類

Figmaのコンポーネントプロパティには、主に次の種類があります。 4番のVariant propertyは、前回学習したバリアントのプロパティの事です。 今回は1番と2番の学習を進めていきたいと思います。

Text property

文字を変更できるようにするプロパティです。

1. 前回作ったValiableでFrameを選択する

2. テキストプロパティの追加

右パネルの「プロパティ」欄にある「+」ボタンをクリックして、「テキスト」を選択します。

3. ポップアップパネルに入力

表示されているポップアップに、入力して、「プロパティを作成」ボタンをクリックします。

4. プロパティが追加される

右パネルに、登録した内容が追加されるのを確認。

5. Valiantsの文字を選択

メインコンポーネントの中にある文字の部分を選択します。

6. バリアブルプロパティを選択

このアイコンをクリックします。

7. テキストプロパティを選択

先ほど作った、テキストプロパティがリストに表示されているので、選択します。

8. ボタンの文字列が変更される

メインコンポーネントのテキストと、作成したテキストプロパティが紐付けされると、プロパティで記入した文字の表示に切り替わります。

この機能について

テキストプロパティ機能を使うと、ボタンなどの文字列を、プロパティでコントロールすることができるようになります。 オブジェクトのテキスト欄を直接書き換えなくても、管理がしやすくなる機能ですね。

Boolean property

アイコンの表示を切り替える機能です。

1. ボタンにアイコンを追加

適当なアイコンをボタンの中に追加してみました。 アイコンは、Figmaで作っても良いですが、SVGファイルをそのままドラッグしても簡単に追加できます。

2. Boolean propertyを作成

Frame(Valiants)を選択した状態で、 プロパティの「+」をクリック。 表示されたプルダウン項目の「ブール値」を選択。

3. プロパティの値を入力

名前は、わかりやすい名前にしておくのがいいです。（今回は「アイコンを表示」と入力）

4.アイコンとブール値を紐づける

アイコンを選択して、「外見(Appearance)」の箇所に、紐付けアイコンがあるのでクリック。 リストが表示されるので、先ほど作ったブール値を選択 選択するとこんな感じになる。

5. プロパティの切り替えチェック

コンポーネントのプロパティでブール値の true/false を切り替えると、 アイコンが表示したり、隠れたりします。 スイッチングする様子

この機能について

アイコンが非表示になった時でも、アイコンオブジェクト自体は存在しているので、 表示を表示するか消すかを、プロパティを使ってコントロールすることができるようになります。 ブール値がOFF(false)の時に別のアイコンをセットしておくと、アイコンが切り替わった様な効果にすることもできます。

あとがき

今回の学習は、とにかく複雑でややこしい。 ネットの記事や、AIに聞いてもFigmaの古いインターフェイスの情報で説明されるので、まったく意味もわからないし、 書いてある通りにやっても、押すべきボタンがなかったり、場所がまったく違っていたりと・・・ なので、自分が作業したキャプチャ画像中心で進めてみました。 今後、Figmaのバージョンが上がる事で、この記事も陳腐化するかもしれませんが、とりあえず、この記事でも場所を見失ったり、意味がわからない箇所があれば、ご連絡くださいませ。 ※Instance swap propertyは、現時点では後回しにします。