[sketchプラグイン] テキストスタイルをjsonファイルにExport（出力）したり、jsonファイルでImport（読み込み）する Shared Text Styles #sketch

デザイナーの たなか ゆきこ です。

統一感のあるデザインにするため、アプリの 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 がでた瞬間に諦めモードになるデザイナーの気持ちもよくわかります。ですが、そこでくじけるのは惜しいぐらいとても簡単で、有用なプラグインです。

1. 【clone or download】から【Download ZIP】を選択する。もしくは、下にスクロールした Installing の【Download the ZIP file】をクリックすれば、ダウンロードができます。
2. ダブルクリックしてフォルダを解凍します。
3. 解凍されたファイル【cshared-textstyles.sketchplugin】をダブルクリックすると、プラグインをインストール完了のダイアログが表示されますので、【OK】をクリックします。
4. 念のため 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"】を選択することで、アンインストールが可能となっています。

関連記事

[sketch] Prottyping機能を試してみました #sketch

[Sketch作業効率化]色を一気に変更できるプラグインChainの使い方

この記事を読んで、クラスメソッドにデザイナーはいるんだ、気になると思ってくれた方は、こちらからエントリーしてみてください。

紹介した人の欄があるので私の名前「田中由希子」と書いていただければと思います。入社半年後にいいことがあるはず。