コンポーネント構築指針

コンポーネントはデザインシステムを支える欠かせない要素であり、デザイナーやエンジニアなど多様な職種間での共通言語として機能します。コンポーネントは一貫した指針に基づいて追加・改善することで、関係者間のコミュニケーションがより円滑化され、プロダクト全体の品質や整合性が向上します。

このドキュメントでは、Sparkle Designにおけるコンポーネントを構築する上での指針を紹介します。

ここではFigmaでのコンポーネント構築指針を示します。他ツールを利用する場合でも基本的な方針は共通しています。ツール特有の機能や用法がある場合は各ツールに合わせて最適化してください。

レイヤーの順序と構造

レイヤーは上位要素から下位要素へ、論理的な順序で並べ、読み手がすぐに構造を把握できるようにします。

デザインライブラリにおいてはコードベースに準拠して順序と構造を定義します。

レイヤーの命名

レイヤー名はタイトルケースで統一し、要素の役割が一目でわかるシンプルな名称を用います。

コンポーネントの命名

役割や機能を表現したユニークな名称を実現する命名を行ってください。
命名にはタイトルケースを用いますが、CheckboxやTextareaなどのHTMLに準じた単語については例外的に固有名詞として扱います。

コンポーネントを拡張して構成するコンポーネントはそのコンポーネント配下に配置します。

コンポーネントの内部で繰り返し使用するが、直接インスタンスとして使用しないコンポーネントは Parts 配下に配置します。

コンポーネント名の先頭に. (ピリオド) を含めることでコンポーネントをライブラリに追加しないことができます。一方でこのオプションを使用するとアップデートを行った場合においてもインスタンスへその変更は反映されないため、ファイル内でのみ使用するコンポーネント以外にはこのオプションは付与しません。

Hide styles, components, and variables when publishingWho can use this feature Supported on paid plans Anyone with can edit can remove styles and components from a library New to components? Guide to libraries → There are a couple of ways t...help.figma.com

コンポーネントコンフィギュレーション

コンポーネントにはそれぞれ概要やリンクを追加できます。概要にはコンポーネントの役割や用法を簡潔に記述します。リンクにはコンポーネントドキュメントのリンクを貼付します。

定義した概要やリンクはインスタンスメニューやアセットパネルにて確認できます。

また、ここで必要に応じてインスタンスを簡素化するオプションを選択します。簡素化することで不必要な内部レイヤーやオプションを非表示にすることができます。

Add descriptions to styles, components, and variablesDocumentation makes sure the people using your design system have the right information and context. It can help guide proper application, variant and state usage, and accessibility and contrast re...help.figma.com

オートレイアウト

オートレイアウトを適用し、コンポーネントインスタンスのサイズやレイアウトがコンテナのサイズに合わせて自動的に調整できるようにします。Fill, Hug, Fixed などの設定を適切に用いて多様なコンテキストでの再利用をできるように設計します。

プロパティの全体設計

コンポーネント内部のインスタンスがプロパティを保持している場合、コンポーネント自身のプロパティと同じ階層でのインスタンスのプロパティの操作を可能にするために、ネストされたインスタンスを事前に登録します。

コンポーネントのプロパティを調べるはじめに この機能を使用できるユーザー すべてのプランのユーザー Figma Designファイルへの編集アクセス権限を持つすべてのユーザーが、コンポーネントのプロパティを作成、管理、使用できます この記事では、コンポーネントプロパティを作成および設定する方法について説明します。コンポーネントプロパティを使用してインスタンスを編集する方法についてはこちらを参照してくださ...help.figma.com

プロパティの命名

プロパティのキーとバリューにはキャメルケースを使用します。最初の単語は小文字で始まり、その後の単語の頭文字を大文字にします。

Boolean型のプロパティには、プロパティが真偽値を表していることを明示するためにisやhasなどのプレフィックスを付与します。

下記に列挙するバリアントを管理する際は表に記載のプロパティ名を適用します。

ページの構築方針

コンポーネントはページをカテゴリ別かつアルファベット順に配置します。

ページにはコンポーネントのカテゴリ、タイトル、概要、リンクを必ず挿入します。必要に応じてコンポーネントの使用例も記述します。

Figmaを使用する場合はVariables機能でテーマをバリアブルとして登録します。Variablesに登録できない一部のテーマについては例外的にプラグイン「Tokens Studio for Figmaopen_in_new」を使用します。

バリアブルコレクションの設計方針

バリアブルを束ねるコレクションはテーマとバリアブルレイヤーの組み合わせごとに作成します。

コレクションを命名する際には接頭辞にテーマ名を付与し、その後にバリアブルレイヤー名を指定します。

バリアブルの命名

バリアブルのキーとバリューにはパスカルケースを使用します。

テーマページの構築方針

テーマはページをアルファベット順に配置します。

ページにはテーマのタイトル、概要、リンクを必ず挿入します。必要に応じてテーマの使用例も記述します。