LP-UIKITで使えるボタンコンポーネントにアイコンを追加したり、別のアイコンに変更する方法を紹介します。
Figmaのオートレイアウトを使うことで効率よくアイコンの配置ができるようになります。
コンポーネントのボタンにあるアイコンを変更する方法
UIKITのコンポーネントに登録しているボタンにはあらかじめアイコンが配置されています。
このアイコンを変更するには以下の手順で作業を行います。
- Figmaにアイコンをインポートする
- ボタンのアイコンを差し替える
以下で詳しく解説します。
Figmaにアイコンをインポートする
まずはFigmaに差し替えたいアイコンをインポートします。
すでにSVG画像などがある場合はFigmaの画面にドラッグ&ドロップすればインポートできます。
アイコンがまだない場合は、以下の方法でアイコンを取得することができます。
- Figmaプラグインを使う: Open iconなど
- アイコンギャラリーサイトから取得: MingCute Iconなど
アイコンを差し替える
アイコンを用意できたらすでにあるボタンのアイコンと入れ替えます。
アイコンをボタンにドラッグ&ドロップしてボタンの中に配置します。子コンポーネントの場合は配置できないので、一旦コンポーネントを解除してから配置してください。
あとは古いアイコンを削除すれば入れ替え完了です。
ボタンにアイコンを追加する方法
アイコンのないボタンにアイコンを追加するには以下の手順で作業を行います。
- Figmaにアイコンをインポートする
- ボタンにアイコンを配置する
- オートレイアウトや絶対配置で位置を調整する
以下で詳しく解説します。
Figmaにアイコンをインポートする
アイコンのインポート方法は上記のボタンアイコンの変更でやった方法と同じです。
ボタンにアイコンを配置する
ボタンにアイコンを配置します。ここも入れ替えの時と同じようにドラッグ&ドロップで配置します。
ボタンがコンポーネント(枠の色が紫色)だと要素を追加できないため、一旦コンポーネントを解除してください。
オートレイアウトや絶対配置で位置を調整する
あとはアイコンの位置を調整すれば完了です。
オートレイアウトを使う場合は、以下のように両端に揃えたり、テキストとアイコンの間隔を調整してください。
ボタンのテキストを中央に配置して、アイコンを右寄せにしたい場合は絶対配置を使います。
絶対配置で調整する場合はアイコンだけを、右側のパネルにある絶対配置ボタンで絶対配置に切り替えて位置を調整します。
まとめ
ボタンにアイコンを入れる場合はオートレイアウトを使うと楽です。
最初はオートレイアウトを使わない方が効率良いように感じますが、ボタンのサイズを変更したり文字の長さが変わったときに、オートレイアウトなら自動的にボタンのサイズやアイコンの位置が調整されます。