Code Connect

Code ConnectはコンポーネントコードベースとFigmaをつなぎます。Code Connectを使用すると、デザインシステムのコンポーネントのコードを直接Figmaの開発モードに取り込み、プロダクションコードのフレームワークを反映したコンポーネントの例をプレビューできます。

Code Connectを使用すると、開発モードには、デフォルトで表示される開発モードによる自動生成コードスニペットの代わりに、デザインシステムによって定義された現実世界のコードスニペットが表示されます。コンポーネント定義への接続に加えて、プロパティをコードからFigmaにマッピングすることもでき、ダイナミックで誤りのないスニペットが可能になります。

Code Connectは、既存のデザインシステムがあり、そのデザインシステムをデザインとエンジニアリング全体に一貫性と正確性を持たせて導入したい場合に特に有用です。

概要

Code Connectの正確なセットアップ手順はデザインシステムとコードベースのアーキテクチャーによって異なります。たとえばSwiftUIを使用している場合は、Figma提供のSwiftUIリソースを使用する必要があります。

通常、組織は以下の手順に従って始めることになります。

1. 実装計画を立てます。通常、次の作業が含まれます。
   • ReactやSwiftUIのサポートが必要かどうかなど、フロントエンド開発者の要件を特定します。
   • 開発モードと統合したいコードベースのコンポーネントを特定します。
   • Code Connectの設定とコンポーネントのマッピングの計画を立てます。
2. Code Connectレポジトリーを入手します。Code Connectでは、以下をサポートしています。
   • React（またはReact Native）
   • HTML（Webコンポーネント、Angular、Vueなど）
   • SwiftUI
   • Jetpack Compose
3. コンポーネントマッピングを実装します。マッピングを構築する正確な方法はコードベースとデザインシステムによって異なります、しかし一般的に、デザインシステムコンポーネントのプロパティをFigmaのプロパティにマッピングする必要があります。これにより、Code ConnectがFigmaの値をコンポーネントのアーキテクチャーにマッピングするコードのスニペットを生成できるようになります。そうすることで、スニペットが開発モードに表示されます。
4. 開発モードでレビューします。開発モードで、Code Connectの出力を開発者とデザイナーとでレビューして、コンポーネント例の実用性と表現の正確性を確認します。

Code Connectを十分に活用するには、デザインシステムのコンポーネントを担当する開発者がデザイナーと協力して、プロダクションコードベースからFigmaへのマッピングを実装する必要があります。

利用できる機能

Code Connectの使用を開始するには、Code Connect開発者向けドキュメントに記載されている詳細な手順をご覧ください。

Code Connectでは、以下をサポートしています。

• React（またはReact Native）
• HTML（Webコンポーネント、Angular、Vueなど）
• SwiftUI
• Jetpack Compose

さらに、Code Connectは以下のいくつかの高度な機能を提供します。

• Storybookとの統合
• カスタムパーサー
• テンプレートAPI

Code ConnectリポジトリはGitHubで利用可能です。

プライバシーとCode Connect

Figmaは、インターフェースでCode Connectを有効にするために必要な最小限のデータのみを収集します。Code Connectのコマンドラインインターフェースを使用してfigma connectを実行すると、Figmaは以下のデータを取得します：

• 追加されるコンポーネントのパス
• Code Connectコンポーネントが実装されるリポジトリURL
• .figmaファイル内のプロパティとコード

Code Connectの使用状況を把握するための基本的イベントのみがログに記録されます。たとえば、コンポーネントが公開または公開解除された場合や、コマンドラインインターフェース使用時にFigmaデータ取得のための呼び出しがあった場合などです。

Figmaのプライバシーへの取り組みの詳細については、Figmaのプライバシーポリシーを参照してください。