フィグマでデザインシステムを拡張するには何をするか

TL;DR

フィグマのデザインシステムはバリアブルズと拡張コレクションで柔軟性を高め、複数ブランドの運用を容易にする。デザインとコードの連携を強化するコードコネクトやMCPの活用、チェック機能の活用が紹介される。三つの具体的取り組みを中心に解説される。

Transcript

[音楽] [音楽] 本日はお忙しい中、デザインシステムズ withFIG東京にご来場いただきまし て誠にありがとうございます。私、本日の 司会進行を務めますフィグマジャパン コミュニティサポートスペシャリストお じ子と申します。どうぞ最後までお 付き合いください。 初めに皆様にご案内です。本日はオン ライン配信も同時に行います。各者の SNSやブログ、メディアに写真が掲載さ れる場合がございます。会場に参加され てる皆様が映り込む場合がありますので、 あらかじめご了承ください。なお今回は オンラインのご質問には回答できませんの でご了承ください。 本日のアジェンダです。 終了後ネットワーキングのお時間もござい ますので是非ご参加ください。 それでは最初のセッションを始めてまいり ます。最初の... Read More

Key Insights

• バリアブルズはデザインシステムの管理性を大きく改善する手段である。
• 拡張コレクションはマルチブランドのデザインシステムをベースから拡張可能にする。
• スロット機能はコンポーネントの柔軟性を高め、インスタンス内に他要素を受け入れる。
• チェック機能はデザインとコードの乖離を検知し、修正を促す。
• Code Connectはコードベースの文脈をフィグマへ取り込み、実装を迅速化する。
• MCPはフィグマと外部コード間のコンテキストを公式に提供する標準仕様である。
• コードトゥキャンバスはコードからデザインをレンダリングし編集可能なフレームとして再現する。
• Makeキットはデザインシステムの出力をプロトタイプへ近づける新機能である。

Questions & Answers

Q: デザインシステムをフィグマで拡張するには何を導入すべきですか

デザインシステムの拡張にはバリアブルズの活用と拡張コレクションの導入が基本です。前者はブランド間での一貫性を保ちながら複数モードの運用を可能にし、後者はホワイトラベル的なカスタマイズを許容します。両者を組み合わせることで複数ブランドの統合運用が現実的になります。

Q: バリアブルズのモード数を増やすと何が変わりますか

モード数を増やすとデザインシステムの柔軟性が向上します。プロフェッショナルプランで自由モード、オーガニゼーションとビジネスプランでより多くのモードを使えるようになるため、複数ブランドや多様なテーマを扱う組織に適しています。

Q: スロット機能とはどのような利点がありますか

スロット機能はインスタンス内に独自レイヤーを追加でき、他のインスタンスや要素を受け入れる柔軟性を提供します。これにより、事前に多くの非表示要素を作る必要が減り、デザインシステムの本体との結びつきを保ったまま拡張が可能になります。

Q: コードベースの文脈を活用する意義は何ですか

コードベースの文脈を活用することで、AIがデザインと実装の整合性を保ちつつ適切なコードを生成できるようになります。MCPやコードコネクトを介してデザインのコンテキストを共有することが、素早く品質の高い実装を促進します。

Q: コードコネクトUIの提供対象はどこですか

コードコネクトUIはオーガナイゼーションプラン以上のユーザーに提供されています。CLI版からUI版へ移行しており、既存のコードベースの文脈をGUIで扱えるようになっています。

Q: CODtoトゥンバス機能の目的は何ですか

CODtoトゥンバス機能はコードで実装されたUIをキャンバス上で再現・編集できるようにする試みです。デザインとコードの循環を促進し、最初のアイデアをコードへ、あるいはキャンバスへと迅速に変換します。

Q: Makeキットの役割は何ですか

Makeキットはスタイルやバリアブル情報を活用してフィグマのコンポーネントから新しいコードコンポーネントを作る機能です。高品質なプロトタイプ作成を実現し、ブランドに合わせた出力を実務に近づけます。

Q: デザインシステムの未来設計で最も重要な点は何ですか

デザインシステムの未来設計で重要なのはチーム全体を支えることと、AIを活用してデザインとコードの壁を縮めることです。品質を保ちながらスケールする仕組みを構築し、プロダクト全体のクラフトマンシップを高めることが目標です。

Summary & Key Takeaways

• デザインシステムは組織横断の整合性と品質を支える基盤であり、プロダクトのスケールとチームの協働を前提に設計される。

• バリアブルズの拡張コレクションとスロット機能の導入により、複数ブランド対応と柔軟なテーマ拡張が可能になった。

• コードベースの文脈提供とAI連携を通じてデザインと実装のギャップを縮め、チーム全体への普及を促進する。