Figmaでレイヤー、変数、コンポーネント、トークンに適切な名前を付けることは、単なる気まぐれではなく、実用的な必要性です。よく考え抜かれた命名システムは、ワークフローを効率化し、混乱を防ぎ、特に複数の人が同じファイルを編集する場合に、デザインと開発間の摩擦を解消します。
インターフェースデザインの仕事をしていて、スキルをさらに向上させたいなら、まずは基本から整理整頓することが不可欠です。使用する名前、その構造、そしてドキュメント化の方法など、すべてをきちんと把握する必要があります。このガイドでは、実績のあるベストプラクティス、分かりやすい例、そしてFigmaにおけるファイルやページから、最小の色やフォントの変数に至るまで、すべてを標準化するための首尾一貫したアプローチをご紹介します。
基礎：Figmaで命名法を標準化する理由
詳細に入る前に、基本事項を確認しておきましょう。デザインシステムは、デジタル製品における真の情報源です。それは、インターフェースの視覚的なアイデンティティ、アクセシビリティ、一貫性を定義するコンポーネントとスタイルの集合体であり、Figmaはその真の情報源を構築、公開、利用する場所です。
そのシステムにおいて、プロパティとその値は構成要素となります。色、フォント、間隔、サイズ、エフェクト、状態といった要素には、最初のコンポーネントを設計した人だけでなく、組織全体にとって論理的で読みやすく、拡張性のある命名規則が必要です。
共通の基準を用いることで曖昧さを回避できます。命名とは、単に見栄えの良いラベルを追加することではなく、時間の経過や製品の成長に耐えうる分類体系を構築し、チーム全員が何を使うべきか、どこを変更すべきか、そしてそれが最終消費者にどのような影響を与えるかを理解できるようにすることです。
コンポーネントとスタイルの構成：効果的なパターン
良い慣習としては、名前はそれが何であるか、どのように動作するか、そしてどこで使用されるかを伝えるものであるべきです。そのためには、意味的な役割を示す名前と、純粋に説明的な名前や外観を示す名前を区別し、それらの名前の一貫性を保つ必要があります。
インタラクティブなコンポーネントの場合、要素とその状態を定義することをお勧めします。例えば、ボタンには、基本状態、ホバー状態、フォーカス状態、押下状態、無効状態などがあり、名前にはライブラリ全体で適用される命名規則を明確に示す必要があります。
- ボタン: プライマリ ボタン、セカンダリ ボタン、ターシャリ ボタンなどの一貫した規則を使用し、サフィックスを使用して状態を追加します (例: プライマリ ボタン - ホバー)。
- アイコン: メール アイコン、ソーシャル ネットワーク アイコン、検索アイコンなどのわかりやすい名前を選択します。 何の意味も持たない一般的なワイルドカードは避ける そして長期的には検索がより困難になります。
複数のシステムやブランドを扱う場合は、その範囲を明確に区別してください。プライマリとセカンダリというラベルは、2つのデザインシステムや2つの主要なカラーパレットが共存する場合に役立ち、コンポーネントレベルやトークンレベルでの明確さを維持するのに役立ちます。
命名規則の真価は、見た目の美しさだけにとどまりません。その真の効果は、コラボレーションにあります。設計部門と開発部門が名称や構造を共有することで、コミュニケーションが改善され、引き継ぎがスムーズになり、誰もが必要なリソースをすぐに見つけられるようになるため、エラーが減少します。
Figmaでデザインシステムをセットアップして維持する方法
専用ファイルにデザインシステムを確立することで、秩序と統制がもたらされます。このファイルは、ライブラリ、マスターコンポーネント、公開スタイルの参照として機能し、理想的には保護され、バージョン管理されるべきです。
- 初期在庫主要な要素をリストアップします。ベースパレットとそのスケール、タイポグラフィとそのレベル、間隔パターン、効果スタイルを定義します。
- システムマスターファイル: デザインシステム用に Figma に専用ファイルを作成します。 コンポーネントとスタイル、そしてそれらのドキュメントの起源となる。.
- 整理されたコンポーネントファミリー（ボタン、フォーム、ナビゲーション、フィードバック）ごとにグループ化します。合意された命名規則を使用し、アセット内の明確な階層を維持します。
- 明確に定義されたスタイル: カラー スタイル、テキスト、グリッド、効果を公開します。 変数やトークンに使用するのと同じ基準を使用して、スタイルに名前を付けます。 重複を避けるためです。
- 生きた記録ユーザーガイドページ、例、ガイドラインを追加します。編集可能な内容、公開者、変更のバージョン管理方法を定義します。
これらすべてには、適切なプロセスが伴わなければなりません。ライブラリのリリースワークフロー、ピアレビュー、バージョン管理スケジュールについて合意しておくことで、変更が管理され、追跡可能な方法で伝播されるようになります。
デザイントークンと標準: JSON から W3C およびスタイル辞書まで
デザイントークンは、視覚的およびインタラクションに関する決定事項を、持ち運び可能な形式で最小単位で表現したものです。トークンをJSON形式で保存することは一般的になりつつあり、スタイル辞書のようなツールは、Web、iOS、Androidなどのプラットフォーム向けに変数を生成することで、プラットフォーム間のギャップを埋めています。
JSONを使用することについてはコンセンサスが得られているものの、JSONをどのように整理するかについては必ずしも合意が得られているわけではありません。スタイル辞書は、トークンの構造化のためのCTI（カテゴリ、タイプ、アイテム）分類法を普及させました。これは、自動化されたパイプラインでのフィルタリングや変換に非常に役立ちます。
2023年7月、W3Cワーキンググループによるデザイントークンフォーマットの標準化に関する関連ドラフトが公開されました。この仕様では、トークンを明示的に分類するための`$type`と呼ばれる特別なプロパティが提案されており、いくつかの点でCTIとは異なっています。
これはどういう意味でしょうか？Figmaから新しい仕様を使用してトークンをエクスポートし、従来のスタイル辞書の設定で処理しようとすると、ルールがCTI（連続可変入力）を想定しているため、フィルタリングや変換時に互換性の問題が発生する可能性があります。幸いなことに、スタイル辞書は柔軟性が高く、変換、フィルタ、フォーマットを新しい標準に合わせて調整できます。
公式ガイドラインが策定されるまでの間、採用する構造は消費者の視点を念頭に置くことが重要です。具体的には、変数のトレーサビリティ、意味の明確さ、ビルドツールとの互換性などを考慮する必要があります。また、業界リーダーが発表したサードパーティの分析や事例研究（例えば、インターフェースの規模に関する提案された分類体系や、Salesforceのような大規模システムで共有されている経験など）を参考にすることで、無駄な開発を避けることができます。
変数の命名: 頭を悩ませることなく色とタイポグラフィを設定
多くのチームは、Main Blue のような名前と Blue-500 のようなスケール、Large Header や Regular Body のようなタイポグラフィ上の役割を混在させています。これを解決する最も確実な方法は、基本外観トークンと意味意図トークンというレイヤーを分離することです。
色。スケール（例：青50、100、200、300、400、500、600、700、800、900）と個別のニュートラルカラーを使用して基本パレットを定義します。これらは基本トークンであり、テーマの柔軟性を目指す場合はコンポーネントで直接使用しないでください。その上に、基本トークンに対応するプライマリ背景色、セカンダリテキスト、インタラクティブボーダーなどのセマンティックトークンを作成します。こうすることで、テーマやブランドの変更は、大幅な変更ではなく、マッピングで済みます。
状態を表すには、一貫性のある接尾辞を追加してください。Hover 、Focus、Active、Disabled、Selected でほとんどのケースをカバーできます。アクセシビリティ上のコントラストが必要な場合は、意味役割に関連付けられた高コントラストのバリアントを検討してください。
タイポグラフィ。サイズ、太さ、行間、トラッキングを区別する構成トークンを宣言し、役割を使用してテキストスタイルを構築します。XL見出し、M 小見出し、M 本文、S フッターなどのインテント名を使用し、M 本文 レギュラー、M 本文 セミボールドなどの標準化された接尾辞で太さを明確にします。複数のブランドや製品を扱う場合は、必要不可欠な場合に限り、Web、iOS、ブランド A などのコンテキスト接頭辞を追加します。
スペイン語と数値コードを混在させることは、一貫性を保てば可能です。属性を区切るにはハイフンを使用し、問題のあるスペースを避け、意味的な順序をマクロからミクロへと維持してください。例えば、Color — Background — Primary — Hover や Text — Body — M — Semibold のようにです。数値スケール（例: Blue-500）を使用する場合は、基本トークンにのみ使用してください。意味的な役割は、意図を説明しない数値に依存すべきではありません。
国際化に関する注記：たとえチームがスペイン語を話す場合でも、技術的な接尾辞や略語（md、lg、sm、xlなど）を標準化することで、他のチームのツールや担当者による採用が容易になります。重要なのは言語ではなく、一貫性とトレーサビリティです。
Figma アーキテクチャ: チーム、プロジェクト、ファイル、ページ
Figmaの構造は、権限、検索、パフォーマンスに影響を与えます。プロフェッショナルチームアカウントでは、プロジェクト、ファイル、ページを操作できます。組織チームアカウントでは、チームレイヤーが追加され、企業や複雑な組織構造で役立ちます。
権限。プロジェクトレベルおよびファイルレベルで、読み取り専用、編集、または管理者権限を付与できます。さらに、作成者のみが編集できる閲覧専用プロジェクトと、非公開の招待制プロジェクトもあります。システム制御を維持するため、編集招待は必ず事前に連絡してください。
プロジェクトの命名規則。すべてが識別しやすく整理しやすいように、_ のようなパターンを確立してください。インターフェース上で完全に表示され、曖昧さを避けるために、短く実用的な名前を優先してください。
ファイルの種類。メイン、アクティブ、アーカイブの違い。メインは真の情報源であり、ガバナンス目的以外での変更はできません。アクティブは作業が行われる場所です。アーカイブは検索可能な履歴ファイルです。ライブラリを公開する場合は、メインから行ってください。
カバーとパフォーマンス。Figmaでは、フレームをサムネイルとして選択できます（サムネイルとして設定）。カバーが鮮明に表示され、ファイルの種類間で色が統一されるように、620×320ピクセルのフレームを使用してください（たとえば、メイン、アクティブ、アーカイブなど、それぞれに異なる色を使用します）。巨大なファイルでファイルが過負荷にならないように、機能や製品ごとに分割してください。
ページ、フロー、フレーム番号: すべてを大切にしましょう。
ページ名の命名規則としては、`<title>`という形式が効果的です。IDは連番で、先頭にゼロを付けることで安定した順序付けが可能です。タイトル自体にステータスコード、または合意済みの絵文字を追加することで、完了、進行中、レビュー中、破棄のいずれであるかを示すことができます。
フローと行。各ページ内で、ユーザーストーリーまたはシナリオを表すフレームの行を使用して作業します。誤解を防ぎ、レビューを容易にするために、各行の先頭にフロー名と簡単なコンテキスト説明を含むカバーフレームを含めます。
フレーム番号付け。アンダースコア (_) のような構文が非常に効果的です。先頭にゼロを付けることで自然な順序 (01, 02, 03, 04, 05, 06, 07, 08, 09, 10)を確保し、行内のビューを左から右に番号付けします。例: 最初の行は 01_100, 01_101, 01_102、2 行目は 01_200, 01_201, 01_202 となります。
バージョン管理。自動保存だけに頼ってはいけません。特にデザインシステムや大規模な機能においては、マイルストーンに到達した際にバージョン履歴を使用してコミットを生成し、チームや将来の監査のために明確なメッセージを残しましょう。
システム機器とガバナンスライブラリ
ライブラリは、Figmaファイルを再利用可能なコンポーネントとスタイルのプロバイダーに変換します。アセットパネルから公開され、依存するデザインを壊さないように、権限と改訂に関する規定を厳守する必要があります。
大規模な組織では、デザインシステム専門チームを設置することが有効です。これにより、誰が編集・公開できるかをより細かく管理できる一方、その他のユーザーは読み取り専用権限でシステムにアクセスできるようになります。このような権限分離は、インシデントの発生を減らし、変更サイクルをより予測可能なものにします。
組織におけるチームの種類は、「オープン」「クローズド」「シークレット」の3種類です。「オープン」では誰でも参加してドキュメントを閲覧できます。「クローズド」ではコンテンツの閲覧に招待が必要です。「シークレット」は招待がないと表示されません。プロジェクトの機密性やシステムフェーズに応じて選択してください。
分析と管理。組織管理コンソールでは、コンポーネントとスタイルの採用状況に関する指標を確認したり、デフォルトライブラリを有効にしたりできます。これは、ブランドアセット、カバー、アイコン、またはすぐに利用できる必要のある共通リソースに特に役立ちます。
Figma AIで名前変更を自動化
Figma AIは、レイヤーにコンテキストに応じた名前を一括で割り当てることで、時間を節約できます。AIは、選択したレイヤーの内容、位置、およびレイヤー間の関係を分析して一貫性のある名前を提案し、同じ名前のないレイヤーを検出した場合は、上位レベルのフレーム間で同期させることも可能です。
このツールは、既に名前を変更したレイヤーを尊重します。Figmaのデフォルトの命名規則が適用されているレイヤーのみを変更し、選択範囲に名前を変更したレイヤーが含まれている場合は、強制的に変更しない限り、それらのレイヤーはそのまま保持されます。
名前が変更されるレイヤーには、フレーム、グループ、テキスト、コンポーネントのデフォルト名を保持するインスタンス、および画像塗りつぶし付きの長方形が含まれます。インスタンスの場合、意図しない結果を避けるため、コンテナのみが影響を受け、サブレイヤーは影響を受けません。
名前が変更されないレイヤー：既に名前が変更されている、非表示になっている、またはロックされているレイヤー。インスタンス内のサブレイヤー。楕円、星形、多角形、ベクターグリッドなどの個々のベクターシェイプ。画像塗りつぶしのない長方形。これらの変更は、手動で行うか、コンポーネントレベルで行います。
起動方法：レイヤーを選択した後、コンテキストメニュー、ツールバーの「アクション」ボタン、またはクイックアクションメニューを使用できます。名前を変更するものがない場合、Figmaは警告を表示し、名前を標準化する必要がある場合は「とにかく名前を変更」で強制的にアクションを実行できます。
変数内の色とテキストに関する具体的なベストプラクティス
現在、メインブルーとブルー500の両方を使用している場合は、デュアルモデルに移行しましょう。スケール（ブルー50～ブルー900）に基づいて基本変数を定義し、用途（背景プライマリ、テキストセカンダリ、ボーダーインタラクティブ）に基づいて意味変数を定義し、それらを相互にマッピングします。この連携により、リブランディングやテーマ変更に対する柔軟性が確保されます。
状態に統一された接尾辞（Hover、Focus、Active、Disabled、Selected）を導入します。サーフェスや高さを扱う場合は、常にセマンティックな枠組みの下で、Elevated-SurfaceやContent-On-Subtle-Backgroundといったバリアントを追加します。
タイポグラフィでは、エイリアスと構成トークンを分けて使用します。エイリアスは役割（タイトル-XL、サブタイトル-M、本文-M）で定義され、構成トークンにはサイズ、太さ、行間、トラッキングが含まれます。フォント名が変更されたり、製品が拡大したりしても、各画面のマッピングをやり直す必要はなく、マッピングだけを変更すれば済みます。
このアプローチは、開発チームとのコミュニケーションも簡素化します。開発者は、流行に合わせて変化する見た目の良い名前よりも、`--color-text-primary` や `--font-body-md` のような、安定していて予測可能な変数を好む傾向があります。
整理整頓におすすめのプラグイン
補助ツールを使用することで、反復作業や人為的ミスをなくすことができます。Figmaには、名前の整理、コンテンツの同期、画面間の接続の追跡などを支援するプラグインが用意されています。
- 検索と置換: レイヤー名、スタイル、またはテキストを一括で統一するのに役立ちます。
- コンテンツリール: 一貫性があり再利用可能なサンプル コンテンツを挿入できます。 状態と長さをテストします。
- ソーター: 予測可能な基準でレイヤーとアートボードを並べ替えるのに役立ちます。
- Google Sheets Sync: 表形式のデータをレイアウトと同期します。リストやテーブルに最適です。
- オートフロー: フレーム間に矢印と接続を描く フローを簡単に提示します。
- レッドライン: 測定値、間隔、スタイルの視覚的な仕様を生成します。
顧客やアカウントとの連携組織
外部組織と連携する際には、組織構造と権限を統一することが重要です。組織チームアカウントを使用すると、製品ごとにチームを作成したり、デフォルトライブラリを有効化したり、利用状況分析を表示したりできるため、データに基づいてシステムを適切に管理できます。
チームを分けることの利点：明確な階層構造、製品やプロジェクトの分離、役割に応じたアクセス権限、組織化の強化、そして円滑なコラボレーション。階層化されたディレクトリ（チーム、プロジェクト）は、新しいファイルにアクセスする際の負担を軽減する、直感的な思考マップを提供します。
日々の業務においては、自宅と同じパターンを維持してください。メイン、アクティブ、アーカイブのプロジェクト分け、機能ごとに軽量なファイルを作成、IDとステータスが明確に表示されたページ、そして各マイルストーンを完了する際に明確なメッセージを表示して記録を残すバージョン管理などです。
研修と専門能力開発
UX/UI分野でのキャリアを深め、飛躍的に向上させたいなら、現役のプロフェッショナルによるトレーニングを検討してみてはいかがでしょうか。KeepCodingのUX/UIデザインAI駆動型フルスタックブートキャンプのような集中的なプログラムでは、実践的な経験、的確な判断力、そしてデザインと開発に応用されるテクノロジーを、日々業界で活躍する講師陣と共に学ぶことができます。
Figmaの習得にとどまらず、このトレーニングでは実際のケーススタディ、チームのワークフロー、そして影響力のある意思決定に触れることができます。理論と実践の融合により、就職活動における競争力を高め、競争の激しい市場で強力なポートフォリオを構築するのに役立ちます。
明確な命名規則とプロセスフレームワーク、十分に公開されたデザインシステム、そして標準規格に準拠したトークン戦略があれば、チームはスピードアップし、エラーを減らし、既存の機能を壊すことなく製品を進化させることができます。重要なのは、規約に合意し、それを文書化し、ツール、権限、レビューによってそれを徹底することです。あとは、賢明な反復作業を行うだけです。
