変更履歴を見る
変更を見たいレイヤーを選択して「Compare changes」をクリックすると変更した部分を確認することができます。
変更した部分が以下のように反映されるため、既存の画面などに修正が入った時に、変更を漏れなく把握するのに活躍すること間違い無いでしょう。
実装可能なフレームだけをまとめて表示できる「Ready for development（開発準備完了）」について
このDev Mode登場以降、セクションに対して「Ready for development」というステータスをつけることができるようになりました。
これがあることによって、Dev Modeにした時に実装可能なフレームだけをまとめて表示できるようになります。
デザイナーがステータス管理をしっかりしていることが前提とはなりますが、見るべき範囲が絞れて楽になるので活用していきましょう。
プラグインの活用
先ほど、画像のエクスポートのところでもチラッと触れましたが、Dev ModeではDev Mode専用のプラグインを使うことができます。古くはプラグインは閲覧権限では実行することができなかったのですが、ついに実行することができるようになりました。（来年からはDev Modeも課金対象となりますが...…）
右ウィンドウのPluginsタブから実行することができます。
主にコード生成系のものや、GitHubやJiraと連携するプロジェクト管理系のもの、Storybookなどコードと結びつけるものなどがある印象です。まだ黎明期なのでそこまで数は多くないですが、コミュニティからお気に入りのものを見つけていきましょう！
Dev resources
Dev ModeではDev resourceと言って、レイヤーに対してリンクを紐づけることができるようになりました。
こちらただのリンクとしてもちょっと便利ですが、リンク先によってはプラグインが用意されており、例えばFigma内部でパッとGitHubのイシューやJiraのチケットが開いていて大変便利です。Dev resourceは一つのレイヤーに複数紐づけることができます。
VSCode拡張
Dev Modeと共に新規にリリースされたのがFigmaのVSCode拡張です。VSCode内からFigmaを開くことができます。
また、FigmaからもDev Modeでレイヤーを選択してVSCodeを開くこともできます。
ちなみに初回はこちらを押してFigmaにログインしましょう。
拡張を使うと、VSCode内でFigmaを開けるのはもちろん、CSSなどを書いている時にサジェストしてくれます。
今後もAIを絡めた便利機能のティザーサイトも出てきており、アップデートに期待が高まります。
まとめ
以上、デザインからコーディングをしていく上での基本的なFigmaの見方を紹介してきました。Dev Modeの登場によりコードに必要な情報の見やすさはかなり上がったのではないかと思います。ガンガン活用していきましょう！
次回は同じく新機能のVariables（変数）の扱い方について解説していきます。こちらはデザインのメンテナンス性やプロトタイプにも活躍しますが、エンジニアとしてもコードとデザインの同期に大変役立つ機能です。お楽しみに！
