はじめに
みなさんはFigmaのDevモードを使っていますか？
FigmaのDevモードは、2023年6月21日にベータ版として公開され、一部機能をアップデートして、2024年2月1日に正式リリースされました。
正式リリースされてから、2ヶ月ほどたち、いろいろDevモードを使ってみた感想を紹介しようと思います。
Dev Mode（開発モード）とは？
Dev Mode（開発モード）は、デザイナーとエンジニアのハンドオフを最小限に抑えるためのツールが使えるモードです。
Dev Modeでは、以下の機能を使うことができます。
- アノテーション（Annotation）
- 測定値（Measurement）
- 開発準備完了（Ready for dev）
- 変更差分（Compare changes）
Qiita株式会社のDev Mode（開発モード）事情
Qiitaでは、まだエンジニアにDev Mode（開発モード）権限を付与していません。
そのため、Figmaのエディタ権限のあるデザイナーで試行錯誤しています。
※ Qiitaのデザイナーは、UIの作成〜フロントエンドの開発まで担当しています。
特に、Dev Mode（開発モード）を使うことで、より開発しやすいデザインデータにならないかを試行錯誤しています。
現段階で、Dev Mode（開発モード）の機能をどのように使っているか紹介します。
⚪︎ アノテーション
アノテーション機能は、以下のように使うのが良さそうだと思いました。
- 仕様をまとめる
- WAI-ARIAをまとめる
- インタラクションをまとめる
- マークアップをまとめる
- スタイリングをまとめる
⚪︎ 測定値
社内でデザイン〜リリースまで行っている場合は使わないことが多いと思いました。
外部に開発をお願いしたりする場合には、便利だと思います。
⚪︎ 開発準備完了
開発準備完了は、Figmaの運用状況によると感じました。
Qiitaでは、issueごとにファイルを分けているので、thumbnailで、デザイン中・開発中・マージ待ちなどの状態を管理しているため、使うことは少なそうです。
1ファイル内で、複数の状態を管理している時は、よく使う機能になりそうです。
⚪︎ 変更差分
変更差分機能は、デザインレビューをする時によく使っています。
特に、細かなデザインの変更する時は、どこが変わっているかパッと変わるので便利です。
変更差分機能のパネルを表示している状態でコメントが残せると、とても便利だと感じます。
Dev Mode（開発モード）の推しポイント
Dev Mode（開発モード）の推しポイントは以下です。
- アノテーションにmarkdownが使えるところ
- Headings：
# hoge・## hoge - 太字：
*hoge* - 打ち消し線：
~hoge~ - リスト：
- hoge - オーダーリスト：
1. hoge - コードブロック：
```hgoe``` - インラインコード：
`hgoe`
- Headings：
- 比べたいFrameを２つ選択すると、変更差分が見られるところ
- デザインのBefore/Afterを残していると変更差分が見やすくなった
- Variablesで定義した値を余白（gap, padding）に指定すると、定義した値が表示されるところ
Dev Mode（開発モード）に感じている将来性
Dev Modeの登場により、エンジニアがFigmaを使用する機会はさらに増えていくと予想されます。
これにより、Figma内でプロダクト開発に関するコミュニケーションが徐々に完結していくことが期待されます。
またQiitaでは、デザインデータを「プロダクト開発の地図」として位置づけています。
しかし実際は、FigmaでUIを設計し、ドキュメントツールで仕様をまとめてから開発に移るのが一般的です。
Dev Modeの登場は、この流れを変える可能性を秘めています。
デザイナーが作成したUIを基に、プロダクトマネージャー、デザイナー、エンジニアがFigma内で議論を交わし、仕様を決定し、Figmaを参照しながら開発を進める未来が見え始めています。
最終的には、デザインデータがプロダクト開発の「地図」としての役割を果たす時代が来ると考えています。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。