Figmaでアイコン変更可能なボタンコンポーネントをつくる方法
Figmaでボタンコンポーネントをつくる。誰もが最初にやったことはあると思います。
しかし、アイコンとテキストが両方入っているボタンコンポーネントを複製し、アイコンとテキスト両方を変えたい場合、どういったやりかたが一番効率が良いでしょうか？
私が考えたのは、アイコンをコンポーネントにして差し替えるという方法です。
Figmaにはコンポーネントのスワップ機能が備わっています。
１）まずは、アイコンをコンポーネント化します。
今回はよくあるパターンとして、編集、削除、コピーのSVGアイコンをマテリアルアイコンから用意しました。色はなんでもいいので（マテリアルアイコンそのままだと黒）、Figmaでコンポーネント化します。
２）ボタンコンポーネントを作成します。
この時、テキストとアイコンをオートレイアウトで「内容が変更されてもスタイルが保たれる」ようにレイアウトします。
今回は、ボタンの幅固定、上下マージン固定で上下左右真ん中そろえのボタンコンポーネントにしました。
この時、必ずアイコンは１で作成したアイコンコンポーネントのインスタンスを使用するようにしてください。でないとスワップできなくなります。
３）２でつくったコンポーネントからインスタンスを複製したものを実際に使用します。
メインコンポーネントはそれを編集してしまうと全部が変わってしまうので、別のページなどにまとめておきます。私であれば、スタイルガイドにまとめるようにしています。
ここでまずテキストを変更します。
４）アイコンコンポーネントを選択後、右側のパネルからSwap Instanceを選ぶと、１で作ったアイコンが選択できるようになっています！
なお、２でアイコンをテキストのサイズに合わせて変更していますが、そのままアイコンをスワップすると、同じくリサイズされています！とても便利です。ただし、この場合、マテリアルアイコンのように正方形でサイズ変更がしやすいものを選んだ方が良いかと思います。縦横で比率が異なると、リサイズ時に小数点が出たりして面倒なことになります。
色変更も可能です！
おまけ：アイコンを非表示にし、テキストだけのボタンにもできます
テキストだけのボタンにあとからアイコンを追加するにはコンポーネントから切り離さないと無理がありますが、コンポーネントに最初からアイコンが入っていれば、非表示にするだけです。
つまり、アイコンを使う可能性があるデザインの場合は、最初からアイコンを入れておいたほうが利便性が高まります。