デザインデータ（Figma）の作り方

概要

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

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

ツール

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

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内でアルファベット順に左から並べるようにしてください。

AutoLayoutとResizing

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

レイヤー順序

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

アイコン

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

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

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

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

• ※ 名前の先頭にIcon/Faをつける理由は、Font Awesomeアイコンを利用しているReactコンポーネントの命名規則に準拠しているためです。

コンポーネント名

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

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

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

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

assetsによるグループ化

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

レイヤーの命名規則

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

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

• ※1 Variantsや、Instanceの変更、Styleの上書きが発生することからバリエーション名やステート名は含まないようにします。
• ※2 パスカルケースにしている理由は、Icon自体もコンポーネントであるからです。
• ※3 複数のレイヤーをグルーピングするレイヤーを指します。FigmaにおいてはGroupやFrameが該当しますが、これらの概念とは関連していません。

作成後のチェック

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

Figma Communityへの公開方法

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

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

• FigmaのSmartHR UI（UIコンポーネントライブラリ）に追加や編集を加えて適用する方法｜DocBase