VSCode で Figma を開く (VSCode拡張機能 Figma for VS Code)

カンファレンスの様子

VSCode上にFigmaデザインファイルを開き、そこからCSSのデータを取得して、VSCodeのファイルに貼り付けている様子が映し出されています。

Figma for VS Codeとは？

VSCode上でFigmaファイルを編集するための拡張機能です。

開発環境を離れることなく、デザインファイルのナビゲーションと検査、デザイナーとの共同作業、変更の追跡、デザイン実装のスピードアップが可能になります。

この拡張機能を使用すると。

• VSCodeでFigmaファイルを開き、連携できる
• コミュニケーションのサポート
• コメントやアクティビティをリアルタイムで確認して返信ができる
• 設計に基づいてコードの提案をする
• コード ファイルを設計コンポーネントにリンクする

コンポーネントを検索したり、コンポーネントを挿入したりすることができます。また、Figmaファイルを開いた状態でコードを編集することもできます。

デザインファイルを開く

VSCodeで開くのはDevモードやVSCodeから開くことができます。

開発モードから

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

VSCode から

1. VSCode を開きます。
2. クリックアクティビティ バーで Figma を選択するか、拡張機能のリストから Figma for VSCode を見つけます。
3. [ファイル] の下のプライマリ サイドバーで、開きたいデザインをクリックします。

使用条件 (オープンベータ版)

VSCode
Figma for VSCode (VSCode拡張機能)
FigmaのDevモードを有効にする

(正式版は2024年に有料化予定)

現在、出来ること 2023/06/22

VSCodeでFigmaデザインファイルが開く
FigmaからCSSデータが取得できる

現在、出来ないこと 2023/06/22

SCSSには対応していない。
TailwindCSSには対応していない。

↓CSSコードをTailwindCSSに変換するサイト

Figma for VS Code

Figma for VS Code – Figma Help Center

拡張機能のインストール

Figma for VSCode - Visual Studio Marketplace

VersionLast Updated
0.2.0 2023/06/21 << New!
0.1.2 2023/06/08

※現在オープンベータ版です

Figma Devモード

FigmaのDevモードを有効にすることで、FigmaのAPIを使用して、Figmaファイルのコンテンツを取得したり、変更を監視したりすることができます。

Guide to Devモード – Figma Help Center

※2023年中はオープンベータ版です。
※2024年に有料化の予定です。

Figma for VS Code拡張機能を使用すると、デザインファイルのナビゲーションや検査、デザイナーとの共同作業、変更の追跡、デザイン実装のスピードアップが可能になります。また、以下のような機能も提供されます。

• リアルタイムでコメントやアクティビティを確認し、返信することができます。
• デザインに基づいたコードの提案を受けることができます。
• コードファイルをデザインコンポーネントにリンクすることができます。

Figma DesignのDevモードは、開発者がデザインファイルをナビゲートし、デザインをコードに変換するために必要なすべてを提供します。

Devモードを使用することで、デザイナーと開発者は同じページに留まり、受け渡しの過程で重要な要素が失われることがなくなります。

FigmaデザインでDevモードを使用する方法

Figma for VS Code拡張機能を使用すると、開発環境を離れることなく、デザインファイルのナビゲートや検査、デザイナーとの共同作業、変更の追跡、デザイン実装のスピードアップを行うことができます。

DevモードとFigma for VS Codeは、Professional、Education、Organization、Enterpriseの各プランのエディターシートに含まれます。既にエディターシートをお持ちの方は、来年もこれらの機能にアクセスできます。 主にファイルの検査を行い、Figmaの全ての機能を必要としない開発者のために、2つの新しいプラン・オプションを導入します。来年は、VS Code用のDevモードとFigmaへのアクセスのみをご購入いただけます。料金は、組織プランの場合、1シートあたり月25ドル、エンタープライズプランの場合、1シートあたり月35ドルとなります。このシートを持つユーザーは、DevモードとFigma for VS Codeを使用することができますが、デザインの編集はできません。 DevモードとFigma for VS Codeは、まだベータ版のため、ここに記載した価格とスケジュールは変更される可能性があります。

VSコードでFigmaデザインを検査

Figma for VS Codeは、Dev Modeの検査機能の機能を拡張し、デザインファイルをテキストエディタに直接表示することができます。Figma for VS CodeのInspect機能を使用すると、VS Code上でFigmaデザインを検査することができます。具体的には、デザインのレイアウト、色、フォント、スタイルなどの詳細を確認することができます。また、Figma for VS Codeを使用することで、デザインファイルを開いた状態でコードを編集することもできます。

次のようなことが可能です。

1. 開発準備中のデザインを見る
   ツールバーの Layers をクリックして、Ready for development と表示されたセクションを表示します。

Dev Mode でデザインをナビゲートする

1. フレームとレイヤーを簡単にナビゲート
   ツールバーで選択したレイヤー名をクリックすると、ネストしたレイヤーが表示され、選択できます。

2. コード・スニペットの表示
   コードタブでコードスニペットやモード、スタイルなどの関連情報を表示します。
   インスペクトツールバーの右上で、コードスニペットの言語と単位を選択します。
   Devモードでのコードスニペット

3. 開発リソースへのアクセス
   Dev resourcesタブで関連する開発リンクにアクセスします。コードファイルまたは開発リソースへのリンクを追加するには、［開発リソースを追加］をクリックします。
   リンクが現在のコードベースに一致する実装を持っている場合、ブラウザの代わりにVS Codeでファイルを開きます。
   Dev リソースを Dev モードのレイヤーにリンクする → D

4. コンポーネントプロパティの表示
   コンポーネントが選択されている場合、[Component] タブでそのプロパティを見ることができます。

5. 開発可能なセクションを表示
   Assets タブで、選択したレイヤーのアセットのダウンロードとエクスポートができます。

オートコンプリートコードの提案

Figma for VS Code拡張機能は、選択したレイヤーに基づいて自動補完の提案を行います。これは、コードベースに既存の実装がないコンポーネントを作成している場合に役立ちます。

コメント通知

プライマリーサイドバーの「Notifications」の下に、リアルタイムでコメント通知を表示することができます。通知をクリックすると、VS Codeを介してデザインにコメントを追加することができます。

参考

Figma for VS Codeで変わるデザインと開発のコミュニケーションと効率

Introducing Figma’s New Dev Mode | Figma Blog

Figma for VS Code – Figma Help Center