Figmaのコンポーネント名は、どのような命名規則（大文字や小文字など）が最適なのでしょうか。Figma公式の見解や、人気ライブラリではどうなっているのか調べてみました。
【Figma】コンポーネントの命名規則の推奨は？公式の見解や人気ライブラリの例も紹介
渡邊陽平
Figma公式の見解
公式ドキュメントを探したところ、以下のドキュメントが見つかりました。
Figma- Name and organize components
このドキュメントには、コンポーネント名に関して以下のような記載がありました。
（和訳） 整理をさらに深めるために、命名規則を使用してコンポーネントを分類し、ファイル全体の一貫性を保つことができます。 または
Component/StateやIcon/Nameのように、スラッシュで区切る命名規則の使用をお勧めします。
スラッシュを使うと良いという記載はありますが、大文字や小文字などの命名規則に関しては記載がありませんでした。
つまり、基本的な命名規則はチームや会社単位で自由に決めつつ、適宜スラッシュを使って整理すると良い、ということになりそうです。
スラッシュの機能については、本記事の後半で触れたいと思います。
人気ライブラリではどうなっている？
さて、他のチームがどのような命名規則を採用しているのか気になってきたため、Figmaで公開されている人気ライブラリのデザインファイルをいくつか調べて、まとめてみました。
結果は以下の通りです。
ライブラリ名 | 主な命名規則 |
|---|---|
iOS and iPadOS 26 | タイトルケース |
Simple Design System by Figma | タイトルケース |
Material 3 Design Kit | センテンスケース |
Microsoft Fluent 2 Web | センテンスケース |
タイトルケースとは、例えば Icon Button のように、各単語の先頭を大文字にするパターンで、センテンスケースとは、例えば Icon button のように、文章の先頭のみを大文字にするパターンです。
Apple や Figma が作ったライブラリでは、タイトルケースが使われており、Material Design（Google） や Microsoft が作ったライブラリでは、センテンスケースが使われていました。
また、スラッシュに関しては、いずれのライブラリでも使われていました。
スラッシュで階層を表現できる
さて、先ほどから何回か登場しているスラッシュについて説明します。
コンポーネント名にスラッシュを使うと、コンポーネントの階層を表現することができます。
これは具体的にはどういうことかと言うと、Figmaの画面左上にある Assets タブを開いた時に、フォルダ分けされたような見え方にすることができます。
例えば、コンポーネントに Input/Text Field という名前をつけると、Input というフォルダの中に Text Field コンポーネントがある、という階層を作ることができます。
このようにフォルダ分けされるため、コンポーネントを管理しやすくなります。
一点注意なのですが、フォルダ分け表示するには、設定アイコンにて Show subfolders にチェックを入れておく必要があります。スラッシュを使っているのにフォルダ分け表示がされないという方は、このチェックを入れてみてください。
ちなみに、このフォルダ分けは、ページやセクションを分けることでも可能です。
例えば、Page 1 の中に Section 1 を作り、その中に Component 1 を置いた場合、Page 1 > Section 1 > Component 1 というフォルダ分けになります。
個人的には、スラッシュを使うよりも、ページやセクションで分けてしまった方が直感的かと思います。
アンダースコア始まりで非公開にできる
スラッシュの他にも、特殊な機能を持つ命名規則がもう一つあり、それがアンダースコア（_）です。
コンポーネント名の先頭にアンダースコア（またはドット）をつけておくと、ライブラリを公開したときに、そのコンポーネントを非公開にすることができます。
たとえば、コンポーネントに _Heading という名前をつけると、そのコンポーネントは非公開となります。
コンポーネントを整理するためのレイアウトのフレームや見出しなどは、ライブラリ作成者のみが使うコンポーネントですので、アンダースコアを使って非公開にしておくと良いでしょう。
ちなみに、先述の人気ライブラリでは、Apple と Figma はアンダースコアを使用し、Material Design（Google） と Microsoft はドットを使用しているようでした。
どちらに統一するのかは、各チームで決めておくのが良さそうですね。
まとめ
コンポーネントの命名規則に関して、大文字や小文字などの推奨は、公式的には無さそうでした。人気ライブラリに倣うのであれば、タイトルケースかセンテンスケースで統一するのが良さそうです。
それをベースにして、スラッシュやアンダースコアなどの特殊な機能を、各チームでルールを決めて運用していくのが良いでしょう。