アイコンフォントをキーワード検索して挿入できるIcon Fontプラグイン - Sketch Plugin Advent Calendar 2016

Sketchプラグインを適当に選んで紹介していく、Sketch Plugin Advent Calendar 2016 22日目は、アイコンフォントをキーワード検索して挿入できる「Icon Fontプラグイン」です。

アイコンが並んだパネルを表示し、目視またはキーワードで検索しキャンバスへ挿入できます。

事前準備

プラグインを使うには、プラグイン以外のデータをインストールする必要があります。

まずはプラグインをインストールし、「Plugins → Icon Font → What is a Font Bundle?」を選択しウィンドウを表示します。

ウィンドウ中のボタンをクリックしGitHubへアクセスします。

右上の「Clone or Download」ボタンからポップアップを表示し、「ZIP Download」をクリックすると「font-bundle-master」というZIPファイルのダウンロードが始まります。

ダウンロードできたら、「ttf-files」内の4つのフォントをインストールします。フォントファイルを選択し、ダブルクリックして表示されるウィンドウ内の「フォントをインストール」ボタンからインストールできます。ただし、すでに最新版のフォントがインストールされている場合は不要ですので、フォントを検索して入っているかどうか確認しましょう。

Sketchに戻り、「Plugins → Icon Font → Install a Font Bundle」を実行します。

実行するとフォルダを選択するウィンドウが表示されますので、先ほど解凍したフォルダの直下まで移動し「開く」をクリックします。

ウィンドウ下にメッセージが表示されれば準備完了です。

プラグインを利用する

Font Bundleをインストールするとメニュー項目が変わります。

Grid Insert

サブメニューで選択したアイコンフォントを一覧で表示します。

一覧ウィンドウからアイコンをクリックすれば挿入、テキストレイヤーを選択している場合は挿入になります。上の検索ボックスでキーワードによる絞り込みもできます。インクリメントサーチになっていないので、キーワードを入力したらEnterキーを押しましょう。

All Insert

インストールしているアイコンフォントすべてを表示する以外は、Grid Insertと同様です。ショートカットはCommandControlAです。

Name Insert

文字に応じた名前を入力し、アイコンフォントを挿入します。ただし、名前が完全に一致する必要があります。ショートカットはCommandControlIです。

Details of Selected Icon

選択しているアイコンフォントの文字名・HTMLコード、文字コードの情報およびコピーボタンが表示されます。ショートカットはCommandControlUです。

Covert Icons [Outlines]

このプラグインで挿入したアイコンフォントをすべてアウトライン化します。単純にアウトライン化するのではなく、ベースのパスが挿入されます。

そのほかの機能(Install / Remove)

Configuration

Icon Fontの設定を行います。ショートカットはCommandControlOptionCです。

Zoomにチェックを入れると、挿入時にそこへズームします。

Sizeは挿入時のサイズを設定します。

Centeredにチェックを入れると、現在表示しているキャンバスのセンターへ挿入します。チェックを外した場合は、デフォルトの座標(大概はX:0 / Y:0)へ挿入します。

Replaceにチェックを入れると、テキストレイヤーを選択している場合には、その内容をアイコンフォントで書き換えます。

Colorは挿入時のフォントカラーです。

Install a Font-Bundle

フォント情報をインストールし、プラグインで使えるようにします。フォントデータそのものと、フォント情報を記載したJSONファイルが必要です。

JSONファイルは、Font Bundleでダウンロードしたフォルダに入っている、fonts.jsonおよびbundleフォルダ内のJSONファイルにあたります。fonts.jsonでそれぞれのフォント情報が記述されているJSONファイルを指定し、それぞれのJSONファイルで、キャラクターコードに対応した情報を記述します。

Export your Font-Bundle

現在インストールしているフォント情報をJSONファイルとして書き出します。実行し書き出すフォルダを指定すると、fonts.jsonとbundleフォルダへフォント情報のJSONファイルが書き出されます。

Install a Font [SVG]

SVGフォントを使えるようにインストールします。

Remove a Font

フォント情報を削除します。フォントデータ自体は削除されません。


それでは、楽しいSketchライフを。

tags