HOME
本記事は執筆時点（2026年03月24日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
Webデザインの標準ツールとして欠かせない「Figma」。
私自身、現在進行形でFigmaの操作を習得中なのですが、学べば学ぶほどその奥深さに驚く毎日です。
今回は、自分自身の学習の備忘録も兼ねて、初心者がまず習得したい「プルダウンするセレクトボックス」の実装手順をまとめました。
セレクトボックスは「クリックしたらプルダウンで選択肢が表示される」という仕様が重要です。
Figmaでこの動きをどう表現すれば良いのか、自分なりの整理も兼ねて、プルダウンで選択肢を表示するセレクトボックスをバリアント機能を使って作成する手順を詳しく解説します。
セレクトボックスの実装手順
セレクトボックスのおおまかな作成の流れは以下の通りです。
- セレクトボックスを用意
- 選択肢をコンポーネント化
- 選択肢にバリアントを追加し、マウスオーバー状態を準備
- 複数の選択肢をひとまとめにし、クリックされたら表示するよう設定
セレクトボックスのデザインはバリエーションが多いので、今回は下図のようなセレクトボックスを作ってみたいと思います。
セレクトボックスを用意する
まずは1つのセレクトボックスの作ります。
長方形ツールとテキストツールを使ってボタンの形状を作成します。
今回はクリックでプルダウンが開くことをわかりやすくするため、三角矢印アイコンも配置しました。
右クリックでメニューを表示し、「コンポーネントを作成」を実行します
コンポーネント化するとバウンディングボックスが紫色の線に変わります。
続いてコンポーネントを右クリックし、「メインコンポーネント」から「バリアントの追加」を実行します。
追加したバリアントと元のコンポーネントは右サイドバーで名前を「開いた状態」「閉じた状態」にそれぞれ変更しておきます。
「開いた状態」（バリアント）は、背景色と矢印アイコンの向きを変えます。
選択肢を作成する
次に長方形ツールとテキストツールを使って選択肢を一つ作成します。
作成したらコンポーネント化しバリアントを追加します。
バリアントを名前は「マウスオーバー時」、元のコンポーネントは「通常時」に変更します。マウスオーバー時（バリアント）は背景色と文字色も変更します。
選択肢をマウスオーバーした際に色が変わるように設定しておきます。
「通常時」を選択し、右サイドバーの「プロトタイプ」タブにてインタラクションを追加します。
インタラクションは以下のように設定しました。
アセットを開くと「選択肢」コンポーネントが追加されているので、ドラッグアンドドロップで配置します。
コピーして複数の選択肢を配置したらひとまとめにフレーム化し、オートレイアウトで縦に整列させます（今回はドロップシャドウも加えました）。
フレームをコンポーネント化し、アセットからセレクトボックスのバリアントの下部へ配置します。
クリックに応じた処理を設定する
最後にセレクトボックスがクリックされた時の動作を設定していきます。
まず「閉じた状態」をクリックした時に「開いた状態」に変更するように設定します。
「閉じた状態」を選択肢、右サイドバーのタブを「プロトタイプ」に切り替えたらインタラクションを追加します。
インタラクションは以下のように設定しました。
| トリガー | クリック時 |
|---|---|
| アクション | 次に変更 |
| プロパティ1 | 開いた状態 |
| アニメーション | 即時 |
設定すると「閉じた状態」から「開いた状態」へ矢印が伸びます。
同様に「開いた状態」から「閉じた状態」へもインタラクションを設定します。
プロトタイプで動作確認を行う
プロトタイプで動作を確認するために適当なフレームを作成します。
左サイドバーからアセットを開き、作成したセレクトボックスをドラッグアンドドロップでフレーム内に配置します。
フレームを選択した状態で右サイドバーからプロトタイプを表示して確認します。
各ボタンをクリックしたときに切り替えができたら成功です。
まとめ
今回は、Figmaでプルダウンで選択肢を表示するセレクトボックスを実装する基本の手順をご紹介しました。