ノウハウのハウノ

macOSアプリ用アイコンをFigmaで自作し、アプリに反映する手順

—

by

ハウノの犬
in

新しくダウンロードしたmacOS用アプリやChromeアプリのアイコンが、macOSのデフォルトアプリと雰囲気が違うことがある。
雰囲気を寄せるアイコンをFigmaで自作する手順と、自作したアイコンを反映し、統一感を出す手順について解説する。

1. 土台をつくる

参考画像を取得

  1. /Applications/Safari.app 右クリック「パッケージの内容を表示」
    ※ ベースにしたいアプリであれば、どれでも良い
  2. /Applications/Safari.app/Contents/Resources/AppIcon.icns プレビュー.app で開き、「ファイル > 書き出す…」でPNG出力

Figmaで再現

Figmaで新規ファイルを作成し、512×512のFrameの中に、書き出したPNGを配置。Rectangleを配置し、影を再現する

作例:

    影用のRectangleと、マスク用のRectangleを配置。マスクの中に、自作または公式のSVGを配置する。

    作例:

    最後に、PNGをExportする。

      自作したアイコンをアプリに反映

      macOS アプリ

      1. /Applications/ 反映したいアプリを右クリック「情報を見る」
      2. ウィンドウ左上のアイコン部分に、書き出したPNGをドラッグ&ドロップで反映
      3. 次回アプリ起動時に反映される

      Chrome アプリ（ショートカット）

      macOS アプリと手順は同じだが、アプリが格納されている場所が違う。
      /Users/ユーザー名/Applications/

      注意点

      • アプリ側のアップデートでアイコンが元に戻ることがある。都度同じ手順で差し替えること