Help us understand the problem. What is going on with this article?

Sketchでiconフォントを使う

More than 3 years have passed since last update.

はじめに

以前はiconをCSS Spriteにして使用していましたが、iconフォントを使うとCSS Spriteには戻れなくなります。

デザインする場合もsketch-iconfontを使うことで、より簡単にiconフォントを使ってデザインすることが出来ます。

今後はiconを作ることすら無くなってしまって、私のようなオジサンは世間からも家庭からもいらなくなるでしょう。

使用方法

sketch-iconfontの使用方法は簡単です。

1. sketch-iconfontをダウンロード

こちらからsketch-iconfontをダウンロードします。
ダウンロードしたファイルを解凍し、「iconfont.sketchplugin」をダブルクリックしてプラグインをインストールします。
※Sketch ToolboxからインストールしてもOKです。

2. font-bundlesをダウンロード

こちらからfont-bundlesをダウンロードします。

ダウンロードしたファイルを解凍して、「ttf-files」の中にあるフォントをダブルクリックしてインストールします。

3. Sketchにbundleファイルをインストールする

Sketchを開きメニューのPluginsから「Icon Font」を選択します。
メニューの中にある「Install a Font-Bundle」を選択し、手順2でダウンロードした、 「font-bundles-master」 フォルダを選択します。

CXV6LUnWsAEtP3_.png

4. Sketchでiconフォントを使う

Sketchを開きメニューのPluginsから「Icon Font」を選択します。
メニューの「Grid Insert」を選択し、使いたいフォントを選択します。

2.png

あとは、好きなアイコンを選択すればOKです。

3.png

その他

フォントなので、アウトラインをとることもできて後から編集もできます。

4.png

終わり

iconフォントを使うことで、デザイン作業の圧縮だけでなくコーディングも楽になるので、オリジナルを作りたいという気持ちは抑えて使っていきたいと思います。

nogson
へっぽこデザイナーです。
https://satofaction.net/
willgroup
個と組織をポジティブに変革する「チェンジエージェントグループ」
https://willgroup.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした