N's Tech Blog

これさえいれれば、アイコンに困ることはなくなるでしょう。Sketch内でアイコンを手軽に利用できます。

「Icon Font」とは何か・利点

「Icon Font」はキーワード検索か、アイコンのボタンを押すことでアイコンを簡単に挿入できます。
少しインストール方法が他のプラグインと比べ、少し複雑ですが、順に見ていきましょう。

Sketch Toolboxからもインストールできます。

githubから、
sketch-iconfontとfont-bundlesのzipファイルをダウンロードしてください。

sketch-iconfontはファイルを解凍し、「iconfont.sketchplugin」をダブルクリックでインストールしてください。

font-bundlesも同じく解凍し「ttf-files」のファイル内のフォントを全てインストールします。

上部のメニューバー「Plugins」から「Install a Font-Bundle」を選択し、先ほどの「font-bundles-master」のファイルを選択します。

下のようなメッセージが出たら成功です。

アイコンを入れたいテキストエリアを選択し、「Plugins>Icon Font>Grid Insert」の中の任意を選択。

アイコンの一覧が出てくるので、お好きなアイコンを選択。

小さいですが、表示されました。

サイズ調節して完成です。

他にもフォントをアウトライン化することができたり、フォント情報をJSONファイルに書き出したりできるのでぜひ使いこなして見てください！

木下雄貴 (Kinoshita Yuki)

本来の目的に立ち返って考え、本質的な問題解決に挑むデザイナーを目指しています。今後分野を問わず様々なことを吸収し、表現していきます。