テキストスタイルの自動生成プラグイン「Sketch Styles Generator」とテキストスタイルの作り方を解説!

更新日:2018年11月7日

みなさんはSketchを使ってデザインを作るとき、テキストスタイルやレイヤースタイルをしっかりと設定していますでしょうか?案件のボリュームや工数にも寄るかもしれませんが、ほとんどの方は無料配布されているデザインキットを使ったりしていると思います。
大きなプロジェクトになればなるほど、最初のデザイン規則は後に大事なものとなります。
今日はそんなスタイル生成の作り方と、ワンクリックでテキストスタイルが作れるプラグインを紹介します。

作り方の順序

まず最初にSketchはもちろん、テキストスタイルを作れるプラグインも入れておきましょう。

1.基本的なタイポグラフィの設定(サイズ、太さなど)

テキストスタイルに登録したいフォント、サイズ、不透明度、文字組みをそれぞれ設定しておきます。

2.レイヤー名の設定

ここは非常に重要な箇所です。Sketchはレイヤーの命名方法に基づきスタイルを階層表示してくれます。きちんと反映されるようにそれぞれのテキストに合わせて相応のレイヤー名をつけましょう。

左のように「サイズ/色/透明度 - 位置」の順だと分かりやすい。

3.量産し、色や不透明度の設定をする

とにかくたくさんあればどんな時にも便利ですが、絶対に必要なさそうなものまで作るとファイルが重くなってしまうこともあるので、必要に応じて作りましょう。

作り終えたら全てを選択し「Styles Generator → Generate Shered Styles」で待つだけです。
量が多い場合それだけ生成時間がかかりますが、 ある程度の量ならすぐに終わります。

4.完成

InsertからDocumentを確認すると、テキストスタイルが全て反映されているのが分かります。こうしてタイトルや本文の文字サイズの調整をひとつひとつ修正する必要がなくなり、より効率的なデザイン作成に役立てることができます。

この状態になれば完成です

もちろんこの方法はテキストだけではなく、カラーガイドの生成にも使えます。

この方法はテキストスタイルだけではなく、カラーガイドにも応用可能

この方法をうまく使ってドキュメントに登録していけば、プルダウンだけでデザインのカスタマイズができたりとよりSketchを便利に使いこなすことができます。

それでも作る時間がない・難しいという方へ

それでも他業務に追われ時間がなかったり、様々な要因によって1からテキストスタイルを設定するのが難しい方もいるかと思います。そこで、テキストスタイルのみならず様々なSketchデザインキットを無料配布しているサイトを紹介します。
メールアドレスの登録が必要となりますが、上記のテキストスタイルだけではなく、アイコンやイラストもあるのでぜひ一度のぞいてみてはいかがでしょうか。

ダウンロードはこちらから

UX Power Tools

Sketch Styles Generator

書き手: もりむし
未経験×独学からデザイナーになりたくてなった人。 フルスタック修行中。
Twitter: @moriom_d

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事