みなさんこんにちは、 UIUXデザイナーのa.nです。よろしくお願いします✨

今回は、、 2023年6月22日に開催された「figma Config 2023」で発表された新機能「Dev Mode」を使って、デザイナー・エンジニア間のコラボレーションをより円滑にできるようになりましたのでご紹介します。
余白やコンポーネントのバリデーションなどの仕様が、エンジニアにとってわかりづらく思っていたデザインと異なる実装になっていた…という問題は、Figmaを使って開発をしていれば一度は経験したことがあるのではないでしょうか。
今回発表された「Dev Mode」を使うと、デザイナー・エンジニア間でのコラボレーションがより容易になります！ポイントは3つありますので、ご紹介します！

それではやっていきましょうー！！

まず「Dev Mode」の使い方ですが、ヘッダーの右上にあるトグルボタンをONにすると使うことができます。

1.ボックスモデルの表示

Chrome Dev Toolsの時に見ることができるボックスモデルのような表示ができます。これにより、余白がデザインと異なるという問題が起こりにくくなりますね！コード言語、単位の両方を指定することができます。

2. 実装に必要なコードの表示

デフォルトは CSS ですが、他の言語を選択することもできます。またFlutterの言語も、pluginを入れることで選択できます。

3.コンポーネントプレイグラウンド

コンポーネントのバリアントが見やすくなる機能です。コンポーネントを確認するには、画面内のコンポーネントを選択した状態で、画面右の「Open in playground」をクリックします。
デザイナーはコンポーネントのバリアントという機能を使って、コンポーネントのそれぞれの状態をパターン化し作っているのですが、エンジニアにとってそのパターンがわかりづらかったです。
例えば、ボタンのコンポーネントに対して、このプレイグラウンドを使えばデフォルトの状態、ホバーの状態、フォーカス状態など参照しやすくなりました。これでホバーの状態のデザインはどれ？となる問題が起こりづらいですね。