株式会社つみきの清水と申します。映画・ドラマ・アニメのレビューサービス「Filmarks（フィルマークス）」で、Railsエンジニアとして開発を担当しています。実際の作業領域はフロントエンド寄りです。
本記事では、Figma Dev ModeのCSS活用について記載します。
なお、FilmarksにはWebとiOS/Androidが存在していますが、この記事はWebに特化した話になります。
背景と課題
現在の開発チームにはフロントエンドの専門エンジニアが存在しません。このため、開発チームのほぼ全員がフロントエンドの実装・レビューを行う必要があります。
しかし、エンジニアごとにフロントエンドの技術差が大きく、指摘漏れが発生したり、別の実装箇所のレビューで指摘されたりすることで進行の遅れにつながっていました。
施策の概要
Filmarks WEBは10年以上に渡り運営されているサイトです。レガシーなCSS記述や入り組んだHTML構造から、一足飛びでCSSフレームワーク等へ移行するのは難しい状態です。日々改修と機能追加を続けているため、早期に解決する必要もあります。
このため、Figma Dev ModeのCSSをデザイナーの意図を最も反映した一次情報とみなし、実装の際は可能な限り転記する方針としました。
ここでFigma Dev ModeのCSSと呼んでいるのは、Figmaの開発モードにおいて右サイドエリアに表示される以下のCSSコードのことです。
後述しますが、こちらのCSSは補助情報であり、再現性は担保されていません。また、デザインの再現ができたとしても最善のプロパティでないことがあります。
しかし、コンポーネント化を進めてきたことで影響範囲は限られるため、この方針で進めていくこととしました。
なお、Figma Dev ModeのCSSを適用しても再現できない場合や、明らかにFigma Dev ModeのCSSより良いプロパティがある場合は以下のように対処することとしました。
- 構造の変更で対応可能な場合は、デザイナーに依頼する
- CSSを変更すべき場合は、PR・Figmaの変更箇所にそれぞれコメントを追加する
結果
Figma Dev ModeのCSSをベースコードとしたことで、CSSに関するPRの指摘回数は明らかに減少しました。個別に計測はしていませんが、CSS周りでPRが滞留することはほぼなくなり、レビューがスムーズに進むようになりました。
また、Figmaと異なるCSSプロパティには適用理由が明示されるようになったため、レビュワーが実装意図を把握しやすくなったのも良かった点のひとつかと思います。
問題点
Figmaはあくまでデザインツールです。前述の通りFigma Dev ModeのCSSは補助であり、すべてのプロパティが適切に表示されているわけではありません。再現性がない場合も多々あります。具体的には
-
positionプロパティにやや難があります。要素で絶対配置をした場合、親要素にposition: relative;が出力されません -
inline/inline-block配置ができません。例えば、一行に複数のタイポグラフィーを含める場合、それぞれを別の要素として配置するとFigmaでは折り返すことができません
などが挙げられます。
一方で、本サイトで使用しているデザインはほとんどが再現可能です。このため、いざ再現ができなかった場合、原因究明に想定外の時間を取られることがあります。
本件については「困ったら詳しい人に」ということで私が対応を担当しています。問題としては比較的軽微なので、Figmaのアップデートに期待したいところです。
重要な問題としては、FigmaがHTML設計を兼ねることになったため、今までにはない形でデザイナーへの修正依頼が発生するようになりました。
デザイン完成後の変更になるため、デザイナーのリソースを圧迫しがちです。
今後
デザイン確認フローを導入することで、デザイナーの予定外作業をなくしていく方針です。
Figma MCP（Model Context Protocl：デザインと実装の整合性を確保するための仕組み）の導入なども検討し、全員にとって過度な負担なく、改善を進めていければと考えています。
Discussion