Configという毎年開催されるユーザーカンファレンスで、Figmaでデザインと開発をより密接に結びつけるためのエキサイティングなアップデートが発表されました。

以下は、チームが最高のアイデアをデザインからプロトタイピングや構築まで進めるのを支援するために開発されたすべての機能です：

Dev モードにより、デザインから製品へのスピーディな移行が可能になりました。これはFigma内の新しいスペースで、開発作業が簡単になりました。

• Inspection：
  Figmaファイル内のオブジェクトをホバーやクリックで調べることで、サイズ、仕様、スタイル、アセットなどの情報を得ることができます。

• Code snippets：
  Figmaから直接CSS、iOS、Androidのコードをコピーしたり、コードの見た目をカスタマイズするためのプラグインを使用したりできます。

• Plugins：
  コード生成やアセットのエクスポートなど、煩雑な作業をプラグインで自動化したり、JiraやGitHub、Storybookなどのツールと連携したりできます。

• Section status：
  開発者にフレームの開発の準備が整っているかどうかを伝えるために、デザイナーが使用できるセクションのラベルを使用して、どのデザインが開発の準備が整っているか、まだ作業中かを知ることができます。

• Design systems：
  Figmaコンポーネントをコードにリンクさせることで、真実の情報源を同期させることができます。
  

• Compare changes：
  フレームのバージョンを比較することで、ファイルの変更内容をすぐに理解することができます。

VS CodeでFigmaファイルを調べる

Figma for VS Code拡張機能を使うと、開発環境を離れることなく、デザインファイルを見ることや調べること、デザイナーと協力すること、変更を追跡すること、デザインの実装をスピーディに行うことができます。

Figma for VS Code拡張機能を使って以下のことができます：

• リアルタイムでコメントや活動を見て返信することができます。

• デザインに基づいてコードの提案を受け取る。

• コードファイルをデザインのコンポーネントにリンクする。

VS CodeでFigmaデザインを開く方法

VS Code拡張機能を通じてファイルを開く方法はいくつかあります：

Devモードから

• Codeの設定またはInspectパネルのCodeセクションでCSSを優先言語に設定します。

• トップレベルのフレームをクリックします。

• Inspectパネルで、レイヤー名の横にあるオプションをクリックします。

• VS Codeで開くを選択します。

柔軟なデザインを作成しましょう

variablesは、デザイン全体で再利用できる値（例えば、塗りの色や余白、表示・非表示など）を保存するものです。

スタイルやコンポーネントと同様に、variablesはチームライブラリにも公開できます。variablesの値を更新すると、それに応じてファイル全体のデザインも更新されます。これにより、プロジェクト全体で一貫したデザインを作成し、デザインシステムの更新を効率的に行うことができます。

variablesの種類 variablesには4つの種類があります。それぞれが特定のプロパティや要素に適用することができます。

variablesは、デザインで使われる値（例えば、色や大きさなど）を保存するものです。エイリアス（別名）をつけたり、他の変数を参照したりすることもできます。

variablesを使うと、デザインの一部分を簡単に変更することができます。例えば、色の変数を使ってデザインの色を一括で変えたり、大きさの変数を使って要素の大きさを調整したりすることができます。

variablesを整理するために、コレクションとグループを使うこともできます。コレクションは関連するvariablesをまとめるためのもので、グループはコレクション内でさらにvariablesをまとめるためのものです。これにより、必要な変数を簡単に見つけることができます。

例えば、色のvariablesをテキスト用と線の色用にそれぞれグループ分けしたり、言語ごとにテキストを変えるためのコレクションを作ったりすることができます。これにより、デザインを整理しやすくなります。

また、コレクション内のグループに変数を追加することで、変数をさらに整理することができます。例えば、テキストに使用する色のために1つのグループを使用し、ストロークに使用する色のために別のグループを使用することができます。

variablesモード：
モードとは、デザインの特定の部分に適用する値のリストです。例えば、色の変数には赤、青、緑のような複数の値を設定することができます。

各モードは、デザインの異なる状況やコンテキストを表現します。例えば、明るいテーマや暗いテーマなどの異なるデザインの状況に応じて、適切なモードを選ぶことができます。

variablesには複数のモードがあり、それぞれのモードに対して値を設定します。デザインの特定の要素に変数を適用すると、その要素は現在のモードに応じて適切な値を表示します。これにより、簡単にデザインの異なる状況を切り替えることができます。

例えば、私たちは色の変数を使って、2つの色の値を保存することがあります。あるモードでは青色を、別のモードでは白色を保存します。そして、この変数をテキストの部分に適用すると、そのテキストはモードに応じて青色または白色になります。
以下に、モードを使って異なる状況を切り替えるいくつかの例を挙げます：

• ライトモードやダークモードのような異なるカラーテーマ

• デザイン内で文章がどのように流れるかを確認するための異なる言語

• 異なるデバイスサイズで要素の配置や余白を確認するためのモード

これらのモードを使うことで、デザインの異なる状況を切り替えることができます。

プラグインとREST API：
トークンへのインポートやエクスポートを含む、variablesの作成と管理をスケールさせるためのプラグインとREST APIがあります。プラグインAPIは誰でも利用できます。REST API（variablesの読み書きを含む）はエンタープライズプランのみで利用可能です。

少ないフレームでよりリアルなプロトタイプを作成しましょう

• 新しいプロトタイピングアクション
  「variablesの設定」を使用して、わずかなフレームと相互作用だけでよりダイナミックなプロトタイプを作成し、変数を設定および変更します。

• 数学的な式を使って動的な文字列や数値を生成
  足し算、引き算、掛け算、割り算などの演算子を使用します。

• 複数のアクションと条件付きロジック：
  1つのアクションで複数のvariablesに対してアクションをトリガーするか、条件付きロジックを使用して「もし～なら～」の相互作用を設定することができます。

使いやすさの改善点を追加

新しいオートレイアウト機能：
オートレイアウトオブジェクトを新しい行に折り返し、コンポーネントの最小幅と最大幅、高さを設定して統一します。さらに、テキストの切り捨て機能もアップデートされ、最大行数に基づいてテキストを切り詰めることができます。

フォントピッカーのアップデート：
新しい視覚的なプレビュー、改良された検索機能、新しいカテゴリーにより、適切な書体をより迅速に見つけることができます。最も人気のあるフォントやローカルにインストールされたフォントに簡単に戻ることもできます。

ファイルブラウザのリフレッシュ：
探しているものをより速く見つけることができます。新しい共有プロジェクトタブと共有ファイルタブがあり、他の人が共有したファイルを簡単に見つけることができます。検索、最近使用したファイル、通知もアカウント全体のコンテンツを含むようになりました。