Figma Code Connectで実現する、デザインシステムの真の採用 by nacal

デザインシステムの目的は、デザイナーと開発者の間に共通言語を作ることです。しかしFigmaのDev Modeが出力するコードと実際のコードベースが一致していなければ、開発者はデザインを見ながら自分で書き直すことになります。共通言語のはずが翻訳が必要な状態では、デザインシステムは本来の価値を発揮できません。

この課題を解決するのがFigma Code Connectです。FigmaコンポーネントとコードをPropsレベルで接続し、Dev Modeから直接使えるコードを出力可能にします。本セッションでは、自作UIコンポーネントライブラリとFigmaを1:1で対応させた実践をもとに、設計方針と実装手順を解説します。

さらにCode ConnectはFigma MCPと組み合わせることで、AIエージェントにもデザインシステムの文脈を共有できます。静的変換の確実性とAIの柔軟性を両立させるアプローチ、そしてCode Generation APIによるページ単位の出力まで、実践的な活用法をお伝えします。