VS Code連携
FigmaのVS Code連携拡張機能を使用すると、開発者は簡単にVS Codeでのデザインへのアクセスやインスペクトができます。デザインファイルの閲覧とインスペクト、デザイナーとのコラボレーション、変更の追跡、デザイン実装のスピード向上などが、開発環境の外に出ることなく実施できます。
VS Code連携拡張機能は以下の目的で使用します。
- リアルタイムでコメントおよびアクティビティーを確認して対応
- デザインに基づくコードの候補を取得
- デザインコンポーネントへのコードファイルのリンク
VS Code連携拡張機能はVisual Studio Marketplaceからインストールできます。初めてVS Codeでこの拡張機能を開くと、Figmaアカウントにサインインするように求められます。
VS CodeでFigmaデザインを開く
VS Code拡張機能を通じてデザインファイルを開くには、次のようにいくつかの方法があります。
Dev Modeから
- [インスペクト]パネルの[コード]設定または[コード]セクションで、使用する言語としてCSSを設定します。
- 最上位フレームをクリックします。
- [インスペクト]パネルで、レイヤー名の横にある [オプション]をクリックします。
- [VS Codeで開く]を選択します。
VS Codeから
- VS Codeを開きます。
- アクティビティーバーで Figmaをクリックするか、拡張機能のリストからVS Code連携を見つけます。
- [ファイル]の下にあるプライマリーサイドバーで、開くデザインをクリックします。
VS CodeでFigmaデザインをインスペクト
VS Codeのデザインファイルのチェック
FigmaのVS Code連携では、Dev Modeのインスペクション機能が拡張されていて、デザインファイルをそのままテキストエディターに持ち込めます。VS Codeでデザインファイルを選択すると、ファイル中のフレームが、セクション、ステータス(開発準備完了など)、ページでグループ化されて表示されます。フレームに親セクションがない場合やステータスが割り当てられていな場合には、表示されません。
フレームのインスペクト
フレームのグリッドから選択して、フォーカスビューで個別に表示します。フレームを検索し、結果をフィルタリングして、探しているものをすばやく見つけることができます。
どのデザインが開発準備完了かを確認
ツールバーでレイヤーをクリックすると、開発準備完了としてマークされたセクションが表示されます。
コードスニペットを表示
[コード]タブで、コードスニペット、およびモードやスタイルなど関連情報を表示します。
[インスペクト]ツールバーの右上隅で、コードスニペットに使用する言語および単位を選択します。
開発リソースにアクセス
[開発リソース]タブで、関連開発リンクにアクセスします。 [開発リソースを追加]をクリックして、コードファイルまたは開発リソースへのリンクを追加します。
現在のコードベースにリンクと一致する実装がある場合は、リンクにより、ブラウザではなくVS Codeでファイルが開かれます。
コンポーネントのプロパティを表示
コンポーネントを選択している場合は、[コンポーネント]タブでコンポーネントのプロパティを表示できます。
アセットのエクスポート
[アセット]タブで選択したレイヤーのアセットをダウンロードおよびエクスポートします。
コード案を自動的に表示
VS Code連携拡張機能では、選択したレイヤーに基づいて候補が自動的に表示されます。これは、コードベースに既存の実装がないコンポーネントを構築している場合に役立ちます。
コメント通知を表示
プライマリーサイドバーの[通知]で、コメント通知をリアルタイムで表示できます。通知をクリックして、VS Codeを通じてデザインへのコメントを表示および追加します。
VS Codeでのプラグインの実行
サードパーティーツールおよびカスタマイズしたコードは、コードエディターを離れずに利用できます。プライベートプラグインをVS Codeで動作させる方法はこちら→
VS Code連携からログアウト
- VS Codeで、Shift Command Pを押して、コマンドを表示および実行します。
- 検索バーのオプションのリストから、[Figma: ログアウト]を選択します。