/ita-sketch-guideline

itachoco sketch guideline

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

1. Naming Rules

Pages & Artboards & Layers & Symbols

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

ex) Artboards

{{ Page Name }} - {{ 画面名とか状態とかパターンとか }} - {{ 画面名とか状態とかパターンとか }}
  • Product Detail
  • Product Detail - ◯◯◯◯
  • Product Detail - ◯◯◯◯ - Empty
  • Product Detail - ◯◯◯◯ - ◯◯のとき
  • Product Detail - Book
  • Product Detail - CD

ex) Layers

{{ Element Name }} - {{ 画面名とか状態とかパターンとか }} - {{ 画面名とか状態とかパターンとか }}
  • Table Cell
  • Table Cell - ◯◯◯◯
  • Table Cell - Book
  • Table Cell - CD

Similar name

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

2. Layers

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

Element Name

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

3. Symbols

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

Element Name

  • *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

4. Export

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

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

Prefix

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

  • ic_
  • img_
  • btn_
  • bg_

Suffix

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

サイズ

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

色

  • _white
  • _black
  • _orange
  • _blue
  • _gray

形状

  • _fill
  • _outline

状態

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

Changelog

  • 2017.12.27 v0.1

Author

@wataame @urakey