この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
デザイナーの たなか ゆきこ です。
統一感のあるデザインにするため、アプリの UI デザインを行う場合、最初にカラーとテキストのスタイルを定義します。
そこで、sketch の style 登録機能を使用するのですが、そのスタイルを他のファイルで使用したいということはないでしょうか？
そこで、便利な【Shared Text Styles】というプラグインをご紹介します。 Sketch 3.7 以上で使用可能と記載ありますので、ご自分が使用されている Sketch のバージョン確認をしましょう。
参照：https://github.com/nilshoenson/shared-text-styles
プラグイン Shared Text Styles を確認
こちらのプラグインですが、github にて公開されています。
https://github.com/nilshoenson/shared-text-styles
Sketch のプラグイン管理ツールでは、2018年3月5日現在確認ができませんでした ので、上記からダウンロードします。
github がでた瞬間に諦めモードになるデザイナーの気持ちもよくわかります。ですが、そこでくじけるのは惜しいぐらいとても簡単で、有用なプラグインです。
- 【clone or download】から【Download ZIP】を選択する。もしくは、下にスクロールした Installing の【Download the ZIP file】をクリックすれば、ダウンロードができます。
- ダブルクリックしてフォルダを解凍します。
- 解凍されたファイル【cshared-textstyles.sketchplugin】をダブルクリックすると、プラグインをインストール完了のダイアログが表示されますので、【OK】をクリックします。
- 念のため sketch を再起動しましょう。
Sketch Plugins メニューから【Shared Text Styles】で json ファイルを Export（出力）
以下のように定義したスタイルを出力します。
上部、【Plugins】から【Shared Text Styles】の【Export Text Styles...】を選択します。
ファイルの書き出し場所、ファイル名を任意に設定して、【Save】をクリックします。
これで、自分が作成したテキストスタイルが json ファイルで作成されます。
Sketch Plugins メニューから【Shared Text Styles】で json ファイルを Import（読み込み）
新規ドキュメントには、テキストスタイルが登録されていません。
上部、【Plugins】から【Shared Text Styles】の【Import Text Styles...】を選択します。
ファイルの選択画面になりますので、出力したjson ファイルを選択し、【Choose】をクリックします。
テキストスタイルがドキュメントに読み込まれますので、テキストを作成して、Text Style を適用しましょう。
自分なりのテンプレートをつくる
日々、業務に追われていると、もっと考えたいのにとかもう少し詰めたい。そんな気持ちはでてきます。そんな時は、短縮できる箇所は、短縮しよう！
いわゆる「車輪の再発明はやめよう」です。自分なりのテンプレートあると効率がよいです。デザイナーあるあるですが、業種やアプリの使用年代などを確認していると、おおよその文字サイズなどは決まってきます。何種類かタイプ別に作成しておくとよいでしょう。
ただ、あまり大量につくると、メンテナンスが大変なので、ほどほどにしておきましょう。
みなさまのお役にたてれば幸いです。
もし使わなかった場合のアンインストール方法
Sketch のプラグイン管理ツールが使用できなかったため、念のためにアンインストール方法を記載しておきます。
上部、【Plugins】から【Manage Plugins...】を選択します。ややこしいですが、Sketch アプリのプラグイン管理です。
ここから【Shared Text Styles】を選択し、下部の歯車アイコンから【Uninstall "Shared Text Styles"】を選択することで、アンインストールが可能となっています。
関連記事
この記事を読んで、クラスメソッドにデザイナーはいるんだ、気になると思ってくれた方は、こちらからエントリーしてみてください。
紹介した人の欄があるので私の名前「田中由希子」と書いていただければと思います。入社半年後にいいことがあるはず。