Figma MCPが返すTailwind CSSのリファクタリングまとめ

Figma MCPが返すJSXコードには、元のデザインに合わせたスタイルがひと通り入っています。

https://zenn.dev/yuichiroharai/articles/1f9b50ecfb2669

そのため、デザインの再現精度はそれなりに高いですが、冗長なものも多く含まれます。

というわけで、リファクタリングできそうなものをまとめてみました。

今後も新しいのが見つかったら追記します。

一括削除できそう

一括削除はAIに指示しなくてもIDEの置換で対応できます。

まず、以下のスタイルはほぼ削除できそうです。

• whitespace-pre
  • 改行が反映されてレイアウトが崩れる原因
• box-border
  • Tailwindで設定済みなので不要
• not-italic
  • イタリック体を使用していない限り不要

以下は必要なケースもありますが、いったん先に消しておいた方がすっきりするかなと思います。

• content-stretch
  • 折り返しを想定してなければ削除
• shrink-0, text-nowrap
  • 画面幅が狭くなった時に必要な場合あり
  • 必要性は後で考える
• w-[min-content]+min-w-full
  • このふたつがセットになっている場合がある
  • これもtext-nowrapと同じ感覚で削除

条件付きで一部を削除できる

AIに対象の箇所だけを削除してもらいます。
ちゃんと考えさせないと、意外と抜けがあるので気を付けましょう。

テキストに関するスタイルは、親要素でまとめずにひとつずつ設定する傾向があるので、消せる可能性が高いです。

• font-{family}, text-{color}
  • global.cssでデフォルト指定すれば個別に設定する必要なし
• font-normal
  • Tailwindでリセット済みなので、ほぼ消せるはず

ただし、行間についてはレイアウト調整目的で先祖要素でも使っているケースがあったので注意。

• leading-[normal]
  • Figmaで行間を自動にしていると、このスタイルが付く
  • Tailwindのデフォルトは1.5なのでglobal.cssでnormalにして削除

ここからは消せる条件がちゃんとあります。

• gap-[*]
  • 子要素がひとつしかない場合は削除
  • Figmaで間隔が設定されていると、このスタイルが付く

以降は、条件が複雑なので「削除できるすべての条件」を網羅してはいませんが、大半は削除できそうなものを説明します。

• relative
  • 自身にtop-系/z-がついていたら削除不可
  • すべてのabsolute要素の先祖を辿って最初に見つかったrelativeは削除不可
  • それ以外は削除可能
• w-full
  1. 親がflex+flex-cols
     • 親にitems-がない
     • 自身にself-がない
     • 自身にmx-系がない(※Figmaが使う可能性は低そう)
  2. 自身がブロック要素
     • 親にflex/gridがない
     • 自身にabsolute/fixed/float-がない
  3. 親がgrid
     • 親にjustify-items-(place-items-)がない
     • 自身にjustify-self-(place-self-)がない
     • 自身にmx-系がない(※Figmaが使う可能性は低そう)

Figmaのグリッドレイアウトはベータ版でまだ使い勝手が良くないですが、将来的には増えるかもしれないですね。

単位を変更する

文字間隔はFigma上では%ですが、JSXコードではpxに変換されます。
emに変換したら統一される場合も多いと思われます。

• tracking-[*]
  • emに変換する

フォントファミリーの指定がおかしい

(Google Webフォントを使っている場合？)フォントファミリーにウェイトを表す文字列が入ってしまう場合があります。
このままでは、フォントが正しく当たらないので修正しましょう。

• ❌間違い: font-['Inter:Bold',sans-serif] font-bold
• ✅正しい: font-['Inter',sans-serif] font-bold

一緒にウェイトの指定が入っているはずです。