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

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

作り方の順序

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

GitHub

lucaorio/sketch-styles-generator

https://github.com/lucaorio/sketch-styles-generator

Generate hundreds of Sketch Shared Styles in a matter of seconds. - lucaorio/sketch-styles-generator

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

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

2.レイヤー名の設定

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

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

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

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

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

4.完成

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

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

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

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

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

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

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