VS Code連携
🚧 開発モードは現在オープンベータ版です
ベータ版機能は、ベータ期間中に変更されることがあります。この期間中は、バグやパフォーマンスの問題が発生する可能性があります。 ベータ版機能の詳細情報 →
VS Code連携拡張機能を使用するには、VS Codeをインストールする必要があります。
VS Code連携拡張機能を使用すると、デザインファイルの移動およびインスペクト、デザイナーとのコラボレーション、変更の追跡、デザイン実装のスピードアップのすべてを、開発環境から離れることなく行うことができます。以下を行うには、VS Code連携拡張機能を使用してください。
- リアルタイムでコメントおよびアクティビティーを確認して対応
- デザインをもとにコード案を表示
- コードファイルをデザインコンポーネントにリンク
VS Code連携拡張機能はVisual Studio Marketplaceからインストールできます。初めてVS Codeでこの拡張機能を開くと、Figmaアカウントにサインインするように求められます。
VS CodeでFigmaデザインを開く
VS Code拡張機能を通じてデザインファイルを開くには、次のようにいくつかの方法があります。
開発モードから
- [インスペクト]パネルの[コード]設定または[コード]セクションで、使用する言語としてCSSを設定します。
- 最上位フレームをクリックします。
- [インスペクト]パネルで、レイヤー名の横にある [オプション]をクリックします。
- [VS Codeで開く]を選択します。
VS Codeから
- VS Codeを開きます。
- アクティビティーバーで Figmaをクリックするか、拡張機能のリストからVS Code連携を見つけます。
- [ファイル]の下にあるプライマリーサイドバーで、開くデザインをクリックします。
VS CodeでFigmaデザインをインスペクト
VS Code連携は、開発モードのインスペクション機能の機能性を拡張し、デザインファイルを直接、テキストエディターに持ち込みます。VS Code連携の[インスペクト]パネルでは、以下のことができます。
-
A
どのデザインが開発準備完了かを確認
ツールバーで[レイヤー]をクリックして、[開発準備完了]とマークされているセクションを表示します。
-
B
フレームとレイヤーを簡単に移動
ツールバーで選択したレイヤーの名前をクリックして、ネストされたレイヤーを表示および選択します。
-
C
コードスニペットを表示
[コード]タブで、コードスニペット、およびモードやスタイルなど関連情報を表示します。
[インスペクト]ツールバーの右上隅で、コードスニペットに使用する言語および単位を選択します。
-
D
開発リソースにアクセス
[開発リソース]タブで、関連開発リンクにアクセスします。 [開発リソースを追加]をクリックして、コードファイルまたは開発リソースへのリンクを追加します。
現在のコードベースにリンクと一致する実装がある場合は、リンクにより、ブラウザではなくVS Codeでファイルが開かれます。
-
E
コンポーネントのプロパティを表示
コンポーネントを選択している場合は、[コンポーネント]タブでコンポーネントのプロパティを表示できます。
-
F
どのセクションが開発準備完了かを表示
[アセット]タブで選択したレイヤーのアセットをダウンロードおよびエクスポートします。
コード案を自動的に表示
VS Code連携拡張機能では、選択したレイヤーに基づいて候補が自動的に表示されます。これは、コードベースに既存の実装がないコンポーネントを構築している場合に役立ちます。
コメント通知を表示
プライマリーサイドバーの[通知]で、コメント通知をリアルタイムで表示できます。通知をクリックして、VS Codeを通じてデザインへのコメントを表示および追加します。
VS Code連携からログアウト
- VS Codeで、Shift Command Pを押して、コマンドを表示および実行します。
- 検索バーのオプションのリストから、[Figma: ログアウト]を選択します。