風の噂で聞いた、とある大きめの組織の「海外のFigmaデータ構成をめちゃくちゃ観察してるすごい人」が言っていたらしい、2024年現在のトレンド？なFigmaのFrame（レイヤー）命名方法をメモ。
前提として…
Figmaで作業していると、なんと命名したらいいか明言しがたいFrameがたくさん生まれる問題があり、現場ごとにルールがあったりなかったりする。
例えばAボタンとBボタンを内包したAutoLayoutのFrame。
AとBをまとめているだけで、まだアトミックデザインの分子になりきれていないようなFrameは、構成名で命名できないため、なんと名前をつけるか迷うことが多い。
見たことあるケースだと
複数形にして「Buttons」
AとBをあわせたものだから「A+B」とか「A&B」
開き直って日本語でつけるケースも…。
こんな風に構成名やパーツ名を基準にすると、上記のようなぼんやりしたパターンが生まれ、どれかに統一しようとするとチーム内での周知徹底が大変すぎるし、やったところであまりメリットがない。
結局、現場のデザイナーに「他の人が見たときに、わかりやすく命名する」程度で委ねられてることが多い気がする。
そんなモヤモヤFrameを、スッキリ命名する画期的な命名規則がこちら。
Body（ContentsをまとめてるFrame？）
L Contents（セクション同士を内包して並べてるAutoLayout）
L ユニークセクション名（背景込みのセクション）
L AL32※
L AL16※
L ◇Component（パーツ名）
L ◇Component（パーツ名）
L ◇Component（パーツ名）
L ユニークセクション名
L ユニークセクション名
L ユニークセクション名
※「AL数字」
・AL＝AutoLayoutの略
・数字＝Gap（要素同士の間隔）の値
特徴として
・基本的にユニークな構成名はセクションにだけつける。
・パーツ名はComponentにだけ命名。
・Componentやらをまとめてる大小様々なAutoLayoutのFrameは「AL+Gap値」にする。
このGap値をFrame名に入力することでデザイナーがGap値に対して意識的になる効果があるらしい（うろ覚え）。
たしかにこれなら、命名に迷うことなくチーム内で統一できる。
デメリットとしては、構成名やパーツ名が入らないので、レイヤー上からなんのパーツかは一見してわかりづらいかもしれない。
でも、何も命名せず「Frame15367」とかになるより良いし
「うーん、これなんて命名しようかな…機能的にはこうだから機能名にしようかな、この機能って英語でなんて書くんだろ…検索しよう。あ、でも兄弟階層のFrameも似たような名前になっちゃうな…うーん」みたいな、デザイン本来のクオリティアップとは関係ないことに迷ったりして思考と時間を割かなくて良い。
うーん画期的だ。
コメント