Google Chrome 拡張のアイコンを Figma で作成する

こんにちは、CX事業本部 Delivery部の若槻です。

以前に次の記事のような Google Chrome 拡張を作成しました。（ストア未公開）

上記執筆時点ではアイコンを作成していなかったため、デフォルトのアイコンが表示されていました。

Google Chrome 拡張のアイコンは、128x128 や 48x48 などのサイズをラスター形式で指定する必要があります。サイズや個数の条件はなく、指定された画像データを Chrome 側で最適な箇所で使用してくれます。

今回は、Google Chrome 拡張のアイコンを Figma で作成してみました。

手順

作成の手順は結果として次のようになりました。

フレームの挿入

フレームを挿入します。

フレームのサイズを 128x128 にします。

フレームの Fill color は後ほど透過するため、何でも構いません。むしろフレーム内に収まるようにアイコンを作成する際に残してておいた方が便利です。

アイコンの作成

フレーム内に収まるようにアイコンを作成します。

フレームの透過

フレームの透過度を 0 にして背景を透過させます。

これをしなければエクスポートされたアイコン画像の背景にフレームの色が反映されてしまいます。

フレームとアイコン素材のグルーピング

フレームとアイコン素材をすべて選択して、グルーピングします。

これにより、エクスポート時にフレームとアイコン素材を合わせて出力するようにします。

エクスポート

データを倍率指定 1 倍（1x）と、サイズ指定 48w でエクスポートします。形式は PNG です。

サイズ指定は必要に応じて 36w や 16w なども追加してください。

manifest での指定

エクスポートされた画像ファイルを manifest.json で指定します。

{
  // ...
  "icons": {
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

アイコンを反映させる

Chrome 拡張をアップデートして反映させます。

すると拡張一覧にアイコンが表示されました。

拡張詳細にも表示されました。

URL バー横にも表示されました。

おわりに

Google Chrome 拡張のアイコンを Figma で作成してみました。

Figma をまともに触ったのは今回が初めてでしたが、Chrome 拡張のアイコンを簡単に作成することができました。エクスポート時に倍率やサイズのパターンを指定できるのはすごく便利ですね。

以上