オブジェクトをキャンバス上で選択すると、コードスニペットが開発モードのインスペクトパネルに表示されます。[コード]セクションでは、該当するコンポーネントの詳細が表示され、インスペクトで設定された選択および言語設定に基づいてコードが生成されます。

• テキストを選択すると、[コード]セクションにタイポグラフィックプレビューが表示され、その後にレイアウト、タイポグラフィー、コンテンツ情報が表示されます。
• それ以外を選択すると、ボックスモデルが表示され、マージン、ボーダー、パディングの詳細とレイアウトおよびスタイルの情報が示されます。

言語設定項目を設定する

インスペクトパネルの[コード設定]でコードスニペットに使用する言語と単位を設定できます。言語と単位の設定はキャンバスで選択されたオブジェクトに対して生成されたすべてのコードスニペットに適用されます。

1. キャンバス上のすべてのオブジェクトの選択を解除します。
2. [言語]ドロップダウンから次のオプションを選択します。
   • CSS (Web)
   • SwiftUIまたはUIKit (iOS)
   • ComposeまたはXML (Android)
3. [単位]ドロップダウンで単位を選択します。使用可能な単位は、言語の選択に応じて異なります。

言語と単位の設定を変更する

オブジェクトを選択すると、インスペクトパネルの[コード]セクションで言語と単位の選択を変更できます。

1. [コード]セクションの右上にあるドロップダウンで言語を選択します。
2. Click Inspect settings and select a unit from the dropdown.

縮尺を設定する

縮尺の設定では、指定サイズを基準に単位寸法を設定できます。たとえば、CSS remのルートフォントサイズを設定したり、iOSポイントにスケール設定寸法のスケール因子を設定したりできます。

選択した言語の縮尺と単位を調整するには、次の手順に従います。

1. キャンバスでオブジェクトを選択します。
2. インスペクトパネルの[コード]セクションで、言語ドロップダウンの横にある[インスペクト設定アイコン] [インスペクトの設定]をクリックします。
3. [縮尺を設定…]を選択します。
4. 単位設定に従って、[縮尺]モーダルで縮尺を入力または選択します。
5. Click .

コードスニペットを表示

開発モード中にオブジェクトを選択すると、コードスニペットが生成されます。[コード]セクションには、選択したオブジェクトと言語のタイプに応じて、関連する情報が表示されます。

キャンバス上のほとんどのオブジェクトに生成されるコードスニペットは似ていますが、選択されるテキストは若干異なります。[コード]セクションには、ボックスモデルの代わりにタイポグラフィックビューが表示され、その後に関連するタイポグラフィー情報のコードスニペットが示されます。

選択したオブジェクトに割り当てられたバリアブルは、コードスニペットにも表示されます。コード構文では、有効なバリアブル名を使用してコード内でバリアブルを表現することができ、シームレスなハンドオフエクスペリエンスをサポートします。

Figmaデザインにおけるコード構文とバリアブルの詳細はこちら>

コードスニペットをコピーする

コードスニペットをコピーしてテキストエディターに送信できます。コードスニペットをコピーするには、次の手順に従います。

1. コードを生成するオブジェクトを選択します。
2. インスペクトパネルの[コード]セクションで、コピーするコードスニペットを探します。
3. コードスニペットにカーソルを合わせ、右上の[コピー]をクリックします。

Code Connect

Code Connectは開発モードにコンポーネントコードを取り込むためのデザインシステムおよびエンジニアリングチーム向けのツールです。接続したコードスニペットを使用してコンポーネントをインスペクトする場合、開発者には、自動生成コードではなくライブラリのデザインシステムコードが表示されます。

Figma APIを基盤としたカスタムコードスニペットは、全面的にカスタマイズして複数のデザインシステム、製品、言語をサポートできます。

Code Connectハブの詳細とカスタムコードスニペットをコンポーネントに接続する方法はこちら→

Code Connectが実装されると、Dev Modeのコードスニペットに「接続」と表示され、組織のライブラリのスニペットが表示されます。