Dev Modeにより、開発者はフレームやコンポーネントが最後に編集された日時を確認し、バージョン履歴のさまざまな時点での変更を比較することができます。デザインから開発への移行は繰り返し行われるため、変更とバージョン履歴を比較できることでプロセスを明確にできます。変更内容を比較することで、常に最新のアップデートを追跡し、プロダクションコードを正確に保つことができます。

変更内容を確認

フレームやコンポーネントが前回表示したときから更新されている場合、そのバージョン履歴を比較できます。また、切り離されたコンポーネントや、デザインオーバーライドを持つインスタンスを、ベースコンポーネントと比較することもできます。

1. 最上位フレームまたはコンポーネントを選択します。

   ヒント: Shiftキーを押しながらキャンバス上の2つのコンポーネントをクリックして選択すると、その2つを比較できます。

2. 右サイドバーの[インスペクト]タブで、[変更内容を比較]をクリックします。

• A

  バージョン履歴

  保存されたバージョン、自動保存されたバージョンを含む、ファイルの履歴のタイムラインを表示します。以前のいずれかのバージョンをクリックすると、そのバージョンと現在のバージョンとが比較されます。バージョン履歴は、トップレベルのフレームを時系列で比較する場合にのみ表示されます。

• B

  編集されたレイヤーを表示

  レイヤーでは、アセットの個々のレイヤーが時間とともにどのように変化したかを表示できます。レイヤーの変更には、次のいずれかのラベルが付けられます。

  • 編集済み: 選択したバージョンと現在のバージョンとの間で編集されたレイヤー
  • 追加済み: 選択したバージョンと現在のバージョンとの間で追加されたレイヤー
  • 削除済み: 選択したバージョンと現在のバージョンとの間で削除されたレイヤー

  リスト内のレイヤーをクリックすると、並べて表示ビューまたはオーバーレイビューで、選択されたレイヤーが拡大されます。

• C

  並べて表示

  アセットの選択したバージョンと現在のバージョンとが並べて表示されます。モーダルのズーム設定は、右側のズームイン/ズームアウトボタンを使用して調整します。

• D

  オーバーレイ

  選択したバージョンの上に現在のフレームバージョンをオーバーレイ表示すると、小さな変更内容がわかりやすくなります。右側のスライダーを使用して現在のフレームの透明度を調整したり、 をクリックしてフレームの表示/非表示を切り替えたりできます。モーダルのズーム設定は、右側の ズームイン/ ズームアウトボタンを使用して調整します。

• E

  コードの比較

  編集したレイヤーを選択すると、前のバージョンと現在のバージョンの間で更新されたコードを表示できます。これは、コードベースが最新のデザインと一致していることを確認するのに便利です。

  ドロップダウンを使ってコードパネルの言語を選択し、をクリックして希望する単位を選択します。

  開発モードでのコードスニペットの使用について詳しくはこちら→

• F

  プロパティの比較

  編集されたレイヤーを選択すると、更新されたプロパティとともに、以前のバージョンで割り当てられていた値と現在のバージョンで割り当てられている値が表示されます。

フォーカスビューでの変更の比較

Dev Modeでデザインにフォーカスすると、フォーカスビューのバージョン履歴を利用して変更を比較できます。変更を比較する場合、インターフェースは[変更内容の比較]で説明されているものと同じです。

フォーカスビューで変更を比較するには:

1. Figmaデザインファイルを開きます。
2. キャンバス上で、フォーカスするデザインに対し、開発ステータスインジケーターをクリックして、[フォーカスビューで表示]を選択します。何も選択されていない場合、フォーカスビューの右側にバージョン履歴が表示されます。
3. 最新バージョンと比較するバージョンについては、[…]をクリックし、[最新バージョンと比較]を選択します。
   
4. 必要に応じて、他のユーザーと共有できるフォーカスビューへのリンクを取得するには、[リンクをコピー]をクリックします。

フォーカスビューの詳細はこちら→