デザインデータ(Figma)の作り方

概要

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

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

ツール

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

ツール名用途
FigmaUIデザインツール、兼モックアップ作成ツール
Contrast色のアクセシビリティをチェックするためのユーティリティソフト

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

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

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

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

設計ルール

前提

Figmaを使ったSmartHR UIのコンポーネントのデザインモック作成を前提にした設計ルールですが、SmartHR UIのFigmaライブラリを利用してプロダクトのUI設計をする場合にも流用可能です。

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

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

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

Branchの利用

意図しない更新から保護するために、SmartHR UIのFigmaファイルはBranch機能の利用が必須になりました。(2022年4月より)

Branchの利用によって、誰でも安全に更新できるようになります。

Publishやコミュニティへの公開は管理者メンバーのみ実施できます。
具体的な使用方法は、FigmaのSmartHR UI(UIコンポーネントライブラリ)に追加や編集を加えて適用する方法|DocBaseを参照してください。

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

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

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

AutoLayoutとResizing

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

レイヤー順序

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

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

アイコン

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

Figmaファイル上に存在しない場合は、Font Awesomeから必要に応じてインポートしてください。 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への公開方法

管理者権限を持っているメンバーのみが可能です。

Branchの利用が開始したことにより、Reviewerに管理者メンバーを含めることで、Merge後にCommunityへ公開(Publish)します。
お急ぎの場合は、社内Slack#ext_design_systemチャンネルでお知らせください。