🔔🎄メリークリスマス、イブ！🎄🔔
こちらは、フリュー Advent Calendar 2025 24日目の記事です！🎅🎀
こんにちは。
ピクトリンク開発部 サイトチーム に所属しています松本です🐹
ピクトリンクのフロントエンド開発を主に担当しています。
今回はフロントエンドの改善活動として進めている、Figma Code Connect導入に関する記事を書きました✍️
はじめに
みなさん！Figma Code Connect 使っていますか？？
Figma Code Connect とは、Figmaのデザインシステムと実際のコードベースを直接連携させ、開発者がデザインシステムで使用されている実際のコードスニペットをFigma上で確認できるようにする機能です。
私は当初、Figmaから提供されているDevモード・MCPサーバー・Code Connectあたりの連携が全然想像できておらず、『Figmaから実際のコードスニペットを確認することができる』だけで、導入のうまみってあるのだろうか🤔などと思っていました。
そんな時に今年の7月に開催されたこちらのウェビナーに参加し、株式会社ゆめみさんのセッションにてDev Mode MCPサーバーを使用した実装のデモを拝見し、「大うまみ！！」となりました。
該当のセッションでは、Figmaで作成されたデザインデータからMCPサーバーを使用した画面実装の自動生成のデモを行われていたのですが、Code Connectされているのといないのとでは成果物に大きな差がありました。どちらもUIは正確に作成されていましたが、実装がこんな感じに。
導入しよう、そうしよう
MCPサーバーを使用して自動生成した実装って、<div>祭り‼️という感じで（プロンプトである程度頑張ったとしても）結局手直しに時間がかかるので、こちらも活用しきれていない…という状態だったのですが。
Code Connectすることで、既存コンポーネントを使用して欲しい箇所は良い感じに作ってくれるようになりそうだということで、フロント改善活動の中で優先度を上げて対応していく方針に。
早速コネクト？
それでは早速、Figmaに用意されているコンポーネントのデザインと、プロダクトコードを比較しましょう。
以下に実際に比較してみた結果を画像で用意してみました。
（例として用意したので、実際の差分とは異なる場合があります。）
絶妙に、なんか、粒度が違う！
結局そのままCode Connectすることができたのは、なんと2個！やばい！😇
進まない！コネクト
Code Connect、全然進まない！
どれくらい進んでいないかと言うと、7月にウェビナーを拝見してから現在まで、新たにCode Connectすることができたのは片手で数えられる程度です。
新規画面の実装をする時、Figmaのデザインデータを見ながら画面を作成するものの、各要素の粒度やコンポーネントの切り出し方までは確認しておらず、Figmaとプロダクトコードそれぞれに用意されている部品で画面が構成されている状態でした。（今も）
まずはこのズレを最低限綺麗にしてから、Code Connectした方が良さそう🤔
整合と整理
早くCode Connectしちゃいたいところですが、まずは課題とやらないといけないことを開発・デザイナー間で洗い出すことに。
課題＆やること📝
-
Figmaで定義されているコンポーネントの粒度と、プロダクトコードで実装されているコンポーネントの粒度が違う
-
管理しやい＆使いやすい粒度を検討し、Figma・プロダクトコードの微調整を行う
-
-
Figmaで設定されているバリアントの設定がプロダクトコードで再現できていない
- デザインデータとして、バリアントで管理した方が良いのか？プロダクトコードでは、汎用性を考慮した作りになっているか？を話し合い、微調整を行う
-
開発とデザイナーで各コンポーネントに対し使用している名称が異なり、キモいので揃えたいねとなっている
-
差異がある名称について、デザイナー側で使用している名称と、ピクトリンクのサイト/アプリで使用している名称を比較し、分かりやすいものに統一する
-
FigmaやMiro、プロダクトコードに反映する
-
未だ道半ば、コネクト
上記について、現在、🔥鋭意🔥作業中です。
デザイナー↔️開発で整合を繰り返し、やらなければいけないことを洗い出したは良いものの、日々のタスクに追われて開発の宿題が溜まる溜まる！
（既に使用されているコンポーネントのリファクタは慎重になるため、ちょっとした隙間時間を有効活用できていない状態）
フロント改善活動は、日々の開発運用業務とは別でタイムボックスを確保して作業させてもらっているのですが、もっと固まった時間が欲しい...となると、時間を確保させて欲しいとPOに交渉する必要が！
既存施策との優先度を比較！
説明のための準備！
...Code Connect、進まねー！😂
さいごに
Code Connect活用についての記事はたくさん出てくるので、いち早く導入されている企業ではデザインとプロダクトコードの繋ぎ込みやデザイナーとの整合はどうされたんだろう…？と気になっています。
導入を検討している開発の方に、『Code Connectしたいのに、事前準備が整えられず中々作業が進んでいない』一例のご紹介でした。
こういうことができていないと、サクッと導入はできない…！ということで参考になることがあれば幸いです。（...なるのか？？！）
いつか、Code Connect活用事例の記事でまたお会いできることを信じて。
次回、アドベントカレンダー最終回です！
みなさま良いクリスマスをお過ごしください☺️
