FigmaはアップデートでUIが頻繁に変わるのがクソ
WebサイトやLPのモックアップを一人でまったりゆったり作成する時にプロパティという機能を使う価値はあまりないと思う。
けれど、他人から「Figmaのプロパティわかるよね?(上から目線)」と言われた時に、「え? プロパティって、よくファイルを右クリックした時に出てくる詳細情報みたいなやつだっけ(頭の中)」という状態からアップデートし、実際にFigmaのプロパティを使えるようになるための講座をお届けする。
UdemyとかYouTubeの動画講座とか書籍は、古いUIのFigmaで操作手順がかなり違ったり、日本人が日本人向けに解説しているのに謎すぎる英語UIだったりするから、2026年2月時点のUIかつ、俺は日本語UIでお届けする。
主な対象者、環境
前半は座学だけど、後半は実際にFigmaを操作しながら読むと効果的。Figmaは習ってから慣れないと覚えられないよ。
- Figmaを起動したことがある
- Webデザイナーっぽいことをしたことがある
- コンポーネントをなんとなく作ったことがある
- プロパティと言われると頭が混乱する
- UIデザイナーやアプリデザイナーではない
プロパティのタイプは4種類ある
俗にFigma界隈でプロパティという言葉が発せられた状況の裏には、主に3つの種類が存在する。
バリアント
プロパティと言ったら、ほぼバリアントと思ってもいいかもしれない。
エイリアンの一種のように思いがちだけど、なんのことはない、日本のカタカナ英語でよく聞く「バリエーション」を格好つけて言っているだけ(たぶん)。エイリアンみたく、無限に種類を作れるし、万能タイプなイメージ。
ブール値
プログラミングとか、Excelとかにも出てくるTrueかFalseかという、2者択一の選択肢。設定箇所が微妙に忘れやすい。
テキスト
その名の通り、テキストの部分をFigmaの右側パネルからいじれるようにするだけのやつ。UI素人には存在価値がわかりにくい。
インスタンスの入れ替え
ボタンに使うアイコンとかをFigmaの右側パネルから切り替えたいという欲望を満たす機能。
プロパティは何のために存在するか
プロパティなんて使わなくても、一枚もののLPとかのモックアップを一人で作って上司やクライアントに見せるだけなら、はっきり言って必要性がゼロ。事実、XDとかPhotoshopとかでモックアップを作っていた時代においては、こんな機能は使わなかったし、そもそも機能的にそれらのソフトには存在していない(はず)。
では、何のためにプロパティを使うかというと、プロパティを設定するとFigmaの右側パネルからFigmaの機能としてデザイン自体を編集することなく、見た目だけを簡単かつ安全にいじることができるから。
つまり、エンジニアとかディレクターとか複数人で作業する時に、デザイナー以外はデザイン部分をいじらない(いじれない)という暗黙のルールが敷かれていることは多々あるから、こういう機能が存在しているように思う。
普通のWebサイトだとそこまで一つのボタンやデザインパーツにバリエーションはいらないと思うが、スマホアプリや巨大なサイト、またはECサイト系だとこの機能が実用的なのかもしれない。
実践編 Figmaのプロパティの設定方法
ここからは実際に手を動かしてみよう。
プロパティはコンポーネントのオプション扱いの機能だから、まずは適当にコンポーネントを作ってくれ。
コンポーネントの作り方を一応解説すると、適当にフレームを作って右クリックから「コンポーネントを作成」でOKだ。
バリアントの設定と使い方
コンポーネント化したやつを選択すると右側パネルに「プロパティ」とかの欄があるので「バリアント」を選択する。
そうすると、元々作ったコンポーネントのバリアント、つまり色とかアイコンとか文言違いとかのバリエーションを設定できるようになる。見本では色と文言を変えて計3つ作成した。
そして、アセットパネルなどから、そいつのインスタンスを挿入すると、右側パネルからポチっとバリエーション違いを表示できるようになる。これがバリアントというエイリアンの正体であり、プロパティのすべてでもある。
実務においては、それぞれの名前を変えたりしてわかりやすくするとよいだろう。
ブール値の設定と使い方
コンポーネントを作る所まではバリアントと同じだけど、赤いボタンの右側にあるピンクの部分を選択した状態で、そこのプロパティの設定をブール値にする。
ブール値はONとOFFのスイッチなので、ONとOFFを切り替えたい場所に設定するのがミソ。
次に、右側パネルの中段あたりに「外見」という箇所を探して、なんとも言えぬアイコンから、ピンク色の箇所に対したブール値を割り当てる。
バリアントの時と同じようにインスタンスを作成すると、トグルスイッチによって設定箇所のONとOFFを切り替えられる。
実際の使用方法としては、ログイン時だけ表示されるパーツだったり、特定の条件によってのみ表示される部分とかを再現する時に使う。他のプロパティにも言えるが、Figmaの特徴であるオートレイアウトと組み合わせると真価を発揮する。
テキストの設定と使い方
これまで同じくコンポーネントを作成して、今度はテキストというプロパティを設定する。文字通りテキストに適用するので、適当な文字列も作っておいてくれ。
ここはミソだが、プロパティを作成する時の「値」にその適当な文字列を入力する。これが本チャンの文字列だと思ってくれ。
次に矢印の箇所の怪しいアイコンの箇所から、入力した「プロパティを適用」させる。この手順は少しややこしい。
そうすると、インスタンスを生成すると右側パネルからテキストを入力、編集できるようになる。
1人で作業しているデザイナーやディレクターからすると「だから何?」って感じだけど、複数人で開発しているアプリデザインとかの領域だと有用なのかもしれない。
インスタンスの入れ替えについて
ここまで順当に手順を踏んできたなら、なんとなくプロパティのキモはもうわかってると思う。もしインスタンスの入れ替えを使う必要があるなら、上の画像を参考にして似たような手順で自分でできるはず。
プロパティはとっつきにくい機能だけど、公式でもうちょっとわかりやすいチュートリアルやウィザードみたいのをわかりやすいところにアップしておいてほしいよね
あと、解説しておいてナンだが、この手の機能はシステム開発チームが絡むようなECサイト(構造的にはアプリみたいなもん)や、スマホアプリ開発で使うことが多い開発者寄りの機能だと思うから、そのチームでの運用のやり方や手順を学んだ方がよいと思う。
その手のチームや職場は、デザイナーよりもエンジニアに主導権が握られていることが多いから、Figma運用の権力者から聞いた方が間違いない。
FigmaはWebデザインツールとしては機能が多すぎる
FigmaはXDやPhotoshopでしんみり黙々とモックアップを使っていた時代とは違って、大規模サイトやアプリとかのUIデザインツールとしての使われ方に主軸があるから、単純なWebデザインのツールとしては高機能すぎるという面もある。
とりあえず、UIのアップデートで使い方や手順が変わるのは本当うざいよね、というシメで今回の講座は終わりとする。
