figma アイコン付きボタンの作成
2025 年 7 月 31 日 by marukorアイコン付きボタンコンポーネントの作成
アイコン付きボタンの、アイコンの部分を切り替えられる汎用的はボタンの作成方法を紹介します。
1.コンポーネントを作成する
まずはボタンコンポーネントの作成と、iconを複数用意します。
2.iconに名前を付ける
すべてのアイコンを画像のように、「button_icon/」のようにしてください。
hogehoge/という名前で記載された場合、figmaはhogehogeフォルダの中のhogehogeアイコンとして判断してくれるようになります。
3.アイコンをコンポーネント化
名前を変更したらすべてのアイコンを別々にコンポーネント化します。
この時、まとめてコンポーネント化してバリアントにならないように注意してください。
4.アイコンを複製しボタンコンポーネントに入れる
先ほどコンポーネント化したアイコンをどれか一つ複製して、ボタンコンポーネント内に入れます。
以上でアイコン切り替え式ボタンの完成になります。
アイコン付きボタンの使い方
先ほど作成した、アイコン付きボタンコンポーネントを複製します。
アイコンを選択 ＞ 赤枠のセレクトボックスを選択
先ほど作成したアイコンたちが選択できるようになっています。
例えばここでmailアイコンにしたい場合mailのアイコンを選択すればこのようにアイコンが切り替わります。
これはとっても便利なテクニックで、この考え方が使える場面は多々あるため絶対に覚えておきましょう！
タグ: figma
