はじめに

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

すべてのチームまたはプランでサポートされます

閲覧のみ アクセス権を持つユーザーは、VS CodeでFigmaデザインファイルを表示できます。

VS Code連携拡張機能を使用するには、VS Codeをインストールする必要があります。

VS Code連携拡張機能を使用すると、デザインファイルの移動およびインスペクト、デザイナーとのコラボレーション、変更の追跡、デザイン実装のスピードアップのすべてを、開発環境から離れることなく行うことができます。以下を行うには、VS Code連携拡張機能を使用してください。

• リアルタイムでコメントおよびアクティビティーを確認して対応
• デザインをもとにコード案を表示
• コードファイルをデザインコンポーネントにリンク

VS CodeでFigmaデザインを開く

VS Code拡張機能を通じてデザインファイルを開くには、次のようにいくつかの方法があります。

開発モードから

1. [インスペクト]パネルの[コード]設定または[コード]セクションで、使用する言語としてCSSを設定します。
2. 最上位フレームをクリックします。
3. [インスペクト]パネルで、レイヤー名の横にある [オプション]をクリックします。
4. [VS Codeで開く]を選択します。

VS Codeから

1. VS Codeを開きます。
2. アクティビティーバーで Figmaをクリックするか、拡張機能のリストからVS Code連携を見つけます。
3. [ファイル]の下にあるプライマリーサイドバーで、開くデザインをクリックします。

VS CodeでFigmaデザインをインスペクト

VS Code連携は、開発モードのインスペクション機能の機能性を拡張し、デザインファイルを直接、テキストエディターに持ち込みます。VS Code連携の[インスペクト]パネルでは、以下のことができます。

• A

  どのデザインが開発準備完了かを確認

  ツールバーで[レイヤー]をクリックして、[開発準備完了]とマークされているセクションを表示します。

  開発モードでデザインを移動 →

• B

  フレームとレイヤーを簡単に移動

  ツールバーで選択したレイヤーの名前をクリックして、ネストされたレイヤーを表示および選択します。

• C

  コードスニペットを表示

  [コード]タブで、コードスニペット、およびモードやスタイルなど関連情報を表示します。

  [インスペクト]ツールバーの右上隅で、コードスニペットに使用する言語および単位を選択します。

  開発モードでのコードスニペット →

• D

  開発リソースにアクセス

  [開発リソース]タブで、関連開発リンクにアクセスします。 [開発リソースを追加]をクリックして、コードファイルまたは開発リソースへのリンクを追加します。

  現在のコードベースにリンクと一致する実装がある場合は、リンクにより、ブラウザではなくVS Codeでファイルが開かれます。

  開発モードで開発リソースをレイヤーにリンク →

• E

  コンポーネントのプロパティを表示

  コンポーネントを選択している場合は、[コンポーネント]タブでコンポーネントのプロパティを表示できます。

• F

  どのセクションが開発準備完了かを表示

  [アセット]タブで選択したレイヤーのアセットをダウンロードおよびエクスポートします。

  Figmaからの選択内容のエクスポートの詳細情報 →

コード案を自動的に表示

VS Code連携拡張機能では、選択したレイヤーに基づいて候補が自動的に表示されます。これは、コードベースに既存の実装がないコンポーネントを構築している場合に役立ちます。

コメント通知を表示

プライマリーサイドバーの[通知]で、コメント通知をリアルタイムで表示できます。通知をクリックして、VS Codeを通じてデザインへのコメントを表示および追加します。

Figmaでのコメントのガイド →

VS Code連携からログアウト

1. VS Codeで、Shift Command Pを押して、コマンドを表示および実行します。
2. 検索バーのオプションのリストから、[Figma: ログアウト]を選択します。