SmartHR Design System

デザインデータ設計ガイド

デザインデータ作成時のルール・作成ガイドをまとめました。

はじめに

SmartHR UIをデザイナーが新たに作成・更新する場合、デザインツールでUIの設計をおこなう場合があります。

この項目ではデザインデータを作成する際に必要な情報と、守って欲しいルールをまとめています。

ツール

SmartHRで利用しているデザインツールは以下の通りです。これらツールを利用開始したい場合は、社内情シスに利用申請を行ってください。

ツール名用途
SketchUIデザインツール
AbstractSketchファイルのバージョン管理
InVisionUIデザインのモックアップ確認環境(更新停止中)
Contrast色のアクセシビリティをチェックするためのユーティリティソフト

設計ルール

前提

  • Sketchを使ったデザインファイル作成を前提としています。
  • Sketch上ではシンボル化されたオブジェクトのことを、コンポーネントとして扱います。
  • Sketchでの作業は実装と同義です。コードと設計ロジックに乗っ取り、可能な限り実装を意識した表層・コンポーネントの設計を心がけてください。
  • シンボルを利用する際も極力SmartLayoutとOverridesを使って単一コンポーネントとして運用をしてください。

SmartLayoutとResizing

  • シンボル化する際はコンポーネントが内部のデータにより可変かどうかを考慮して適切にSmartLayoutとResizingを設定してください。

レイヤーの順序

  • 実際の設計に即したレイヤー構造で作成してください。
  • レイヤーの順序は表層の表示順に合わせてください。

Abstractの運用

アイコン

  • アイコンはFont Awesome(solid)を利用しています。
  • 現状Sketchファイルには利用するアイコンのみしかインポートされていません。
  • Sketch上に存在しない場合は、リソースサイトからダウンロードし、必要に応じてインポートしてください。

アートボードの整理

  • シンボルはSymbolOrganizerプラグインを利用して整えます。
  • 新規にコンポーネントを作成した場合などは、プラグインを実行して整頓してください。
  • 設定項目は以下の通り(デフォルト設定)です。

SymbolOrganizerの設定画面

アートボードの命名規則

アートボードはSketchのArtboard機能を指します。

対象命名規則
コンポーネント(Symbol)パスカルケースPrimaryButton
ステートキャメルケースPrimaryButton/iconRight/hover
アイコンfa-{アイコン名(小文字のスネークケース}Icon/fa-hoge-hoge2
上記以外キャメルケースPrimaryButton/assets

コンポーネント名

  • コンポーネント単体でユニークな名称にしてください。
  • 基本的にReactコンポーネントの名称と一致させます。

ステート名

  • コンポーネントの状態名を指します。
  • hoverdisabledなどコンポーネントの状態を示します。

defaultについての補足

  • コンポーネント内でデフォルト値をつけたい場合は、アートボードのコンポーネント名に接頭辞(default)をつけます。
    • ディレクトリの中でコンポーネントが並列に並んだ際に、どのコンポーネントが標準で使われるか表すために使います。
    • この接頭辞を付けるかどうかは任意です。
  • assets内でコンポーネントに対してdefaultとして表現したい場合は、アートボードは(default)と命名します。
  • バリュエーション名が標準でdefaultであれば()は付けません。

assetsによるグループ化

  • メインのコンポーネントに利用するシンボルを作りたい場合、assetsでグループ化します。

アイコンについての補足

  • 名前の先頭にfa-を付ける理由は、Font Awesomeアイコンを利用しており、その命名規則に準拠しているためです。

レイヤーの命名規則

対象命名規則
コンポーネントコンポーネント名PrimaryButton
レイヤー(複数あり)レイヤー名 + スペース + 番号
(1始まりで加算)
ComboBoxSelectItem 1
ComboBoxSelectItem 2
アイコンIconIcon
テキストtexttext
ホバー用シェイプhoverhover
下地用シェイプbasebase

アイコンについての補足

  • アイコンの命名規則をパスカルケースにしている理由は、Icon自体がコンポーネントのためです。

作成後のチェック

  • 他コンポーネントから流用可能なパーツを新たに作っていないか?
  • グループ名、コンポーネント名、ステート名は命名規則に則っているか?
  • レイヤー順序、レイヤー名は設定されているか?
  • 塗りやフォントはレイヤースタイルを使用しているか?
© 2021, SmartHR, Inc.