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

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

概要

SmartHR UIのコンポーネントをデザイナーが追加・更新する場合、デザインツールでUI設計する場合があります。

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

ツール

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

2021年5月現在、メインのデザインツールをSketchからFigmaへの移行しています。 ツールを併記していますが、新規で利用する場合はFigmaの利用を推奨します。

ツール名用途
Figma推奨のUIデザインツール、兼モックアップ作成ツール
SketchUIデザインツール
AbstractSketchファイルのバージョン管理
InVisionSketchで作成したUIデザインのモックアップ確認環境
Contrast色のアクセシビリティをチェックするためのユーティリティソフト

Figmaライブラリへのアクセス方法

利用申請後、Figmaにログインし「SmartHR UI」プロジェクトにアクセスしてください。

作成したコンポーネントライブラリはFigma Communityにも公開しています。

https://www.figma.com/community/file/978607227374353992

設計ルール

前提

Figmaを使ったSmartHR UIのコンポーネントのデザインモック作成を前提としています。Sketch版はこちらです。(更新停止中)

実装を意識したコンポーネントの設計

Figmaでの作業は実装と同義です。 コードと設計ロジックも踏まえ、可能な限り実装を意識した表層・コンポーネントの設計を心がけてください。

FigmaのAutoLayoutを活用することで実装(CSS)に近いコンポーネントの設計が可能です。 また、InstanceやVariantsを使用して、単一コンポーネントとして運用をしてください。

AutoLayoutとResizing

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

レイヤー順序

実装に合わせたレイヤーの順序や構造を意識してください。

ただし、FigmaでAutoLayoutを設定すると、レイヤーの順序が下にいくほどFrame内では上部に表示されるため、レイヤーの順序は表層の表示順の逆順とします。

コンポーネントのFrameの整理

Page: Components内で、コンポーネント単位にFrameをつくって管理しています。 コンポーネントのFrameは、Page内でアルファベット順に左から並べるようにしてください。

コンポーネントのFrameの並び順の例

Version historyの活用

2021年5月現在、SketchからFigmaへの移行期であることから、ライブラリのバージョン管理を厳密にしていません。 自由に修正し、適度にPublishしてください。破壊的変更を加える場合は、事前に#design_systemで共有しましょう。

破壊的変更の可能性がある作業や、一度に多くのコンポーネントを修正する作業をする際は、Restoreのしやすさから新しいversionを作成して作業することを推奨します。

https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history

アイコン

アイコンはFont Awesome(solid)を利用しています。 Figmaファイルには、利用している最低限のアイコンのみインポートされています。

Figmaファイル上に存在しない場合は、Font AwesomeのWebサイトから必要に応じてインポートしてください。 Text StyleでフォントファミリーをFont Awesome 5 FreeSolidとすることで、テキスト内に表示することも可能です。

https://help.figma.com/hc/en-us/articles/360040449513-Add-icons-to-text-layers-with-icon-fonts

コンポーネントの命名規則

対象命名規則
コンポーネントパスカルケースPrimaryButton
バリエーションキャメルケースPrimaryButton/iconRight
ステートキャメルケースPrimaryButton/iconRight/hover
アイコンIcon/Fa + アイコン名(パスカルケース)※Icon/FaInfoCircle
上記以外キャメルケースassets/Dialog/titleArea
  • ※ 名前の先頭にIcon/Faを付ける理由は、Font Awesomeアイコンを利用しているReactコンポーネントの命名規則に準拠しているためです。

コンポーネント名

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

バリエーション名、ステート名

コンポーネントの種類や状態を指し、FigmaではVariantsやレイヤー名で表現されます。

  • バリエーション名は、iconRighticonLeftなどのコンポーネントの種類を示します。
  • ステート名は、hoverdisabledなどコンポーネントの状態を示します。

assetsによるグループ化

コンポーネント内で再利用するコンポーネントを作る場合は、assetsでグルーピングします。

レイヤーの命名規則

レイヤー名は、命名を検討する時間を省き、作業者によるブレを低減させるために、以下にしたがって機械的に命名します。

役割の名前(ボタンをグルーピングするレイヤーにbuttonsとするなど)は、以下の種類を除いて原則割り当てないようにしてください。

対象命名規則
コンポーネントコンポーネント名 ※1PrimaryButtonあるいはButton
Heading
レイヤー(複数並ぶ場合)レイヤー名 + スペース + 番号
(1始まりで加算)
ComboBoxSelectItem 1
ComboBoxSelectItem 2
アイコンIcon ※2Icon
テキストtexttext
線状シェイプborderborder
下地用シェイプbasebase
ホバー用シェイプhoverhover
その他のシェイプshapeshape
マスクmaskmask
レイヤーグループ ※3groupgroup
  • ※1 Variantsや、Instanceの変更、Styleの上書きが発生することからバリエーション名やステート名は含まないようにします。
  • ※2 パスカルケースにしている理由は、Icon自体もコンポーネントであるからです。
  • ※3 複数のレイヤーをグルーピングするレイヤーを指します。FigmaにおいてはGroupやFrameが該当しますが、これらの概念とは関連していません。

作成後のチェック

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

Figma Communityへの公開方法

管理者権限を持っているメンバーのみが可能です。 追加・修正したコンポーネントを公開(Publish)したい場合は#design_systemでお知らせください。

© 2021, SmartHR, Inc.