【Sketch Iconsプラグイン】超便利!SVGファイルからアイコンライブラリを作る方法

Design

Sketch iconsプラグインとFont Awesomeを使って、便利なアイコンのライブラリを作成する方法を紹介していきます。

何ができるかというと、

アイコンを簡単に追加できる
色の変更も簡単

必要な知識は、シンボルの使い方・ライブラりの使い方です。

では参りましょう〜

スポンサードリンク

Sketch iconsを使ってSVGファイルからアイコンライブラリを作る

手順は以下

  • Sketch icons / Font Awesomeの準備
  • 色のシンボルを作成
  • Sketch iconsでFont Awesomeをインポート
  • ライブラリに追加

Sketch icons / Font Awesomeの準備

Sketch iconsからプラグインをダウンロードします。

Font Awesomeもダウンロードします。

ダウンロードしたSketch iconsのZIPファイルを解凍し、赤枠のsketchファイルをダブルクリックしプラグインをインストールしましょう。

インストール完了

Font AwesomeのZIPファイルを解凍し、以下のフォルダを確認しておく。
advanced-options/raw-svg

後ほどこのフォルダを使います。
*なお、Font Awesomeじゃなくてもraw-svgというファイルがあれば同じように使えます。

色のシンボルを作成

Sketchを開いて、アイコンに使いたい色のシンボルを作ります。

こんな感じでとりあえずmain/dark/lightの3種類を作っています。

Sketch iconsでFont Awesomeをインポート

Plugins/Sketch Icons/Import iconsにいきます

すると、以下のような画面になります。

Color SourceでFrom Symbolsを選択することで、先ほど作ったシンボルの色を使用可能です。

この設定でContinueをクリックすると、インポートするアイコンファイルを選択する画面になりますので、先ほどのadvanced-options/raw-svgのフォルダを探します。

そしてそのフォルダの中のregularを選択し、command + aで全てのファイルを選択します。

すると、こんな感じでアイコンがズラーっとインポートされます。

colorにシンボルのカラーが使われていて、アイコンがマスクになっています。

なので、アイコンのマスクを外すと、こうなります。

ライブラリに追加

これをライブラリとして使いたいので、このファイルをcommand + sで保存します。

PreferencesでLibraryを選択します。

Add Libraryをクリックし、先ほどシンボルを保存したsketchファイルを開きます。

すると、Libraryにそのファイルが追加されています。

以上で完了です。

作成したライブラリを使ってみる

command + nで新しいsketchファイルを開き、Libraryを使ってみましょう。
こんな感じで、アイコンを簡単に選択できます。

アイコンの変更も簡単!

色のシンボルを作成したので、色も簡単に変更できます。

長便利ですね(^^)

シンボルの色を変えてみる

先ほど作ったシンボルのページに戻り、色を変えてみます。

保存して、先ほどの新しいファイルに戻ると、右上にこんな感じでNotifications(通知)が来ています。

クリックすると、シンボルをアップデートするかどうか聞かれますので、Update Symbolsをクリック

すると、変更したmainの色が変わります。

以上です。

めっちゃ簡単に使えて、便利なので試してみてください。