1. Naming Rules
2. Layers
3. Symbols
4. Export

大文字から始める英単語で記載する。
単語と単語の区切りは半角スペースを空け、アンダースコアでつなげたりしない。
キャメルケースも使わない。

{{ Page Name }} - {{ 画面名とか状態とかパターンとか }} - {{ 画面名とか状態とかパターンとか }}

• Product Detail
• Product Detail - ◯◯◯◯
• Product Detail - ◯◯◯◯ - Empty
• Product Detail - ◯◯◯◯ - ◯◯のとき
• Product Detail - Book
• Product Detail - CD

{{ Element Name }} - {{ 画面名とか状態とかパターンとか }} - {{ 画面名とか状態とかパターンとか }}

• Table Cell
• Table Cell - ◯◯◯◯
• Table Cell - Book
• Table Cell - CD

• Arrow
  • Chevron
• Border
  • Divider
  • Separator
  • Key Line
• Background
  • Rectangle

OS標準UIは1番上にする（成立しない場合はこの限りではない）
わかりやすい粒度でグルーピングする。
Artboard直下とSymbol配下の重なり順は見た目に準じる。（上にあるものから下にあるものへ向かって重なり順）

• Section
• Navigation
• Title
• Item
• Image
• Text
• Label
• Button
• Icon
• Table Cell

適切な粒度でスラッシュ区切りとハイフン区切りのルールを決める（プロジェクトにあわせよう） ネストし過ぎにならないように注意。

• *iOS
• *Android
• Component
• Button
• Icon
• Label
• Form

※ OS標準UIはソート順で一番上にくるように * をつける

ex)
Icon/Like - Medium - Fill
Icon/Like - Large - Outline
Button/Primary - Large
Button/Secondary - Medium
Button/Secondary - W100
Button/Secondary - W200 - Orange

接続はアンダースコアに統一する。すべて小文字。

{{ Prefix }}_{{ View Name }}_{{ Name }}_{{ Size }}_{{ 色 }}_{{ 形状 }}_{{ 状態 }}

Prefixは以下の省略形式から採用する。

• ic_
• img_
• btn_
• bg_

Suffixは省略しない。状態・色・サイズなど。

• _xsmall
• _small
• _medium
• _large
• _xlarge
• _40

• _white
• _black
• _orange
• _blue
• _gray

• _fill
• _outline

• _on (Toggleのとき)
• _off (Toggleのとき)
• _disable

• 2017.12.27 v0.1

@wataame @urakey