focaccia
【Figma】ページ名の命名規則の推奨は?公式の見解や人気ライブラリの例も紹介

【Figma】ページ名の命名規則の推奨は?公式の見解や人気ライブラリの例も紹介

渡邊陽平
渡邊陽平

Figmaのページ名は、どのような命名規則が最適なのでしょうか。Figma公式の見解や、人気ライブラリではどうなっているのか調べてみました。

Figma公式の見解

公式ドキュメントを探したところ、以下のようなドキュメントが見つかりました。

Figma - ページの作成と管理

読んでみたのですが、少なくともこのドキュメントでは、ページ名の命名規則についての記載はありませんでした。チームや会社単位で自由に決めて良い、ということになりそうです。

ちなみに、同ドキュメントには、ページ名に関して以下のような記載がありました。

コラボレーターが適切な作業を特定できるように、見て分かるヒントを追加します。例えば「スペーサー」ページでページ間を区切ったり、絵文字で目的とステータスを伝えたりできます。

スペーサーページというのは、空のページを用意して、そのページの名前を --- EXAMPLE --- などにしたページのことかと思われます。

また、絵文字を使っても良いとのことでした。

まとめると、公式的には、ページ名の命名規則の推奨などは特になく、各自でスペーサーページや絵文字を使って整理するように、ということですね。

人気ライブラリではどうなっている?

自由にしていいと言われると、他の人がどうやっているのかが気になりますよね。

そこで、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 が作ったライブラリでは、センテンスケースが使われていました。

また、 命名規則が統一されていないものもありました(「ほぼ」の記載があるもの)。さすがに何か理由があるような気もしますが、単なるミスの可能性もあります。

ちなみに、絵文字に関しては、いずれのファイルでも使用されていませんでした。絵文字はOS等の環境によって見た目が変わってしまったり、そもそもゴチャついてしまうというのが理由なのかもしれません。

まとめ

ページ名の命名規則としては、公式的な推奨はなさそうでした。人気ライブラリに倣うのであれば、タイトルケースかセンテンスケースで統一するのが良いでしょう。

【Figma】ページ名の命名規則の推奨は?公式の見解や人気ライブラリの例も紹介 | 株式会社フォカッチャ