🧱

「同じレイヤー名ならば色やテキスト情報を保持する」というFigmaの仕様を活かしたレイヤー命名案

2022/02/03に公開

画像のようなテキストが3つ並んでいるコンポーネントをどう命名するか考えてみよう。

テキストの内容はこの3つである。これらはそのまま名前をつけてしまってもいいのだが、もう少し便利にするための一手間を加えたい

メリット同じレイヤー名ならば、色やテキスト内容を保持できる

swap instance時に別のコンポーネントに変更すると情報がすべてリセットされ、もう一度同じ設定をしなおすことは良くある事だ。しかしコンポーネントの構成が近しく対応するレイヤー名が text と textであればその手間を省くことができる。もう二度手間でイライラしなくてすむ。

そのためには、テキストレイヤーなどのFigmaにおける最小オブジェクトはなるべく要素を示す名前にしておくのがベストだろう

などである。しかし、そのまま実践すると構造が分かりづらくなるデメリットがある。

投稿者名やコメント内容はWrapするFrameに命名できるのでまだ良いが投稿時間は画像の構造だと、ただのtextとなっているだけで分かりづらい。

なので逐一、Frameでwrapperしてやる必要がある。

この構造だとAutherやCommentがpタグやdivなどに類するものになり、textはそこに内包される情報そのものという事になる。

構造としてはHTMLに近しいし、Figmaの便利な仕様を利用できるので良いのだけれど逐一オブジェクトをWrapして命名を同時に考えるのはちょっと面倒な気がする。また、構造設計をデザインツールでしない人に説明したりルールを守ってもらうのも難しそうである。

ここら辺がちょっと難点。