Sketch でシンボルをつくるときの命名やレイヤーの扱い

Sketch でシンボルつくるときに迷うことが多いので、今のつくり方を少しづつ残していく活動。

シンボルの命名

ライブラリー名/コンポーネント名（ページ名）/コンポーネントの構成要素名 にしてる。

• ライブラリー名はライブラリーが複数ある場合に使う
  • 例）mobile/list/item, web/list/item
• Sketch のページ名がコンポーネント名になるようにする
  • 
• コンポーネントに構成要素がない場合は、要素名の代わりにコンポーネント名をいれる
  • 例）button/button
• hover や active など、状態変化や見た目のバリエーション系のシンボルは、BEM の Modifier のように -- を使って名前をつける
  • 例）button/button--hover, button/button--large
• Modifier をつくりすぎない
  • 
• コンポーネント名やシンボルのパーツは、そのまま CSS に置き換えられる名前をつける

シンボルのレイヤー

• Override するレイヤー名はカテゴリーに分けて絵文字をつける
  • 🖊label, 🎨background, 💈border, 🔶icon
• Override するレイヤー名はコンポーネントを見なくても内容がわかるようにする
  • Override するレイヤーは名前がかぶらないようにする
  • 例）input コンポーネントであれば、🖊text と 🖊placeholder にするなど
• Override したくないレイヤーはロックする

（余談）シンボル作成に使うプラグイン

普段からよく使うプラグインばかりだけど、以下のプラグインはシンボル作成時にとくによく使う。最近 Paddy を使うようになった。

• Runner ... シンボルの呼び出し
• Smartboards ... アートボードの整列
• Rename It ... アートボードやレイヤー名の一括置換
• Paddy ... シンボルに余白（ padding ）をつける