Figmaの便利な機能紹介

今回は、Figmaで作業効率が上がる便利な機能をいくつか紹介します。
テキストの変更を簡単にできる「テキストプロパティ」や、表示のオン・オフを切り替えられる「ブール値プロパティ」、コンポーネントを使うときに役立つ機能です。

テキストプロパティ

テキストプロパティとは、プロパティパネルからテキスト変更を行えるようにできる機能です。ここではボタンを例に説明します。

このままだと、コンポーネントを複製しても
すべてのボタンの文字が 「ボタン」 のままになります。

テキストを選択し、右のメニューからコンテンツ→コンポーネントプロパティーを作成。

これで設定は完了です。ボタンの文字に テキストプロパティを設定すると、
同じボタンデザインのまま 文字だけ変更できるようになります。

Figma のコンポーネントで、要素を表示する／非表示にする（ON / OFF）を切り替えるための機能です。

アイコンにブール値プロパティを設定することで、インスタンスごとにアイコンの「表示／非表示」を切り替えられるようになります。

これで設定完了です。

それでは、表示 – 非表示を切り替えを行ってみましょう。右の♢buttonの下にあるトグルをオン・オフしてみると、アイコンがついたり消えたりします。

アイコン付きボタン、アイコンなしボタンを１つのコンポーネントとして管理できるので、制作時にコンポーネントを差し替える手間を省くことができます。