🚧 現在、開発モードはオープンベータ版です

ベータ版機能はベータ期間中に変更されます。この期間中は、バグやパフォーマンスの問題が発生する可能性があります。 ベータ版機能についての詳細→

はじめに

この機能を使用できるユーザー

閲覧のみアクセス権を持つユーザーは、開発モードでコードスニペットを表示できます。

編集可アクセス権を持つユーザーは、任意のコンポーネントのコードスニペットを追加または編集できます。

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

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

言語設定項目を設定する

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

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

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

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

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

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

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

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

選択したオブジェクトに割り当てられたバリアブルもコードスニペットに表示されます。Figmaデザインのバリアブルの詳細はこちら→

ヒント: プラグインを使ってコードスニペットの機能を拡張することも、FigmaのプラグインAPIを使用して開発用にカスタムコードスニペットを作成することもできます。

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