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

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

Udemy Webデザイナー
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

レクチャーの数: 236 ⁄ 19.5 時間 ⁄ 初級

ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML ⁄ CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース Shunsuke Sawada

¥ 1,400

¥ 24,000

4.3

493件の評価