Sketchでよく使うスタイルを登録する

オブジェクトには線や塗りを設定することができますが、同じような設定はレイヤースタイルとテキストスタイルを使ってまとめてしまいましょう。 設定の組み合わせを保存しておくことができ、いつでも呼び出して使うことができます。

2020年4月現在では、下記のプロパティを保存しておくことができるようです。 APPEARANCEの下に配置されているプロパティが対象となると覚えておくと良いと思います。

• Opacity（透明度）
• Fills（塗り）
• Borders（線）
• Shadows（影）
• Inner Shadows（内向きの影）
• Blur（ぼかし効果）
• Radius（角丸）が設定できないのが残念ですね…

レイヤースタイル

レイヤースタイルを使うと、デザインの一貫性を保てるだけでなく、更新によってオブジェクトの見た目が一度に変更できるため、作業効率化に繋がります。

作成するには、オブジェクトを選択した状態で Create ボタンを押して、名前を付けてください。 選択中のオブジェクトのプロパティを用いてレイヤースタイルが作成されます。

作成されたものは左パネルの COMPONENTS / Layer Style から確認することができます。

テキストスタイル

テキストスタイルは、レイヤースタイルとほぼ同じですが、文字オプションを追加することができます。 レイヤースタイルと同じく、文字を選択した状態で Create を押し、名前を付けて保存します。

作成されたものは左パネルの COMPONENTS / Text Style から確認することができます。

スタイルを適応する

インスペクタパネルから

作成したスタイルを適応するには、オブジェクトを選択した状態で、APPEARANCE > This Document から該当のスタイルを選択します。

コンポーネントをドラッグ&ドロップ

もしくは、左パネルの COMPONENTS から該当のスタイルをドラッグ&ドロップすると、スタイルが適応された状態でオブジェクトを追加することができます。テキストスタイルはこちらの方が便利かもしれません。

スタイルのグルーピング

スタイルを作成する時に名前を付けますが、その際に / を使うと、スタイルをグルーピングすることができます。 例えば、下のような名前です。

• Button / Red
• Button / Green
• Button / Blue
• Icon / Default
• Icon / Active

このようにしておくと、 Button と Icon というグループの下に各スタイルが表示されます。整理整頓しておくと Sketch ファイルのメンテナンス性が向上します。