昨天我們介紹了在 Dev mode 開發者所看到的左側區塊內容，今天將會接續討論右側屬性面板，本區塊最上方有兩個選項可切換：檢視 Inspect 和外掛 Plugins 。

Inspect

未選取的任何一個物件時，在 Inspect 主要有兩個區塊：Code setting 程式碼設定 和 Dev resources 開發資源，若設計師有設計 prototype 則會出現交互流程 Flows 區塊。

當你選取任一物件後， Inspect 顯示的內容就會根據點擊到的物件類型而提供不同的內容。

以 Frame 來說，顯示的區塊有以下：

• 物件名稱和類型：顯示物件的命名、類型和更新時間，點選右上角 options - open in VS code 可支援檔案在 vs code 中開啟。
  
  （ VS code 顯示畫面）
• Compare changes：比較圖層異動前後差異
  
  （ 異動對比畫面 ）
• Dev resources 開發資源：支援上傳各種開發連結 Storybook, Github, Jira等...
• Code/Properties 程式碼/屬性： 選擇 Code 會顯示 border-box、Layout、Style； Properties 選項則會有 Layout 數值、Background colors、Borders 細節。
• Interations 交互效果：顯示 prototype 所設定的動作和互動目標。
• Selection colors：顯示設計稿的所使用的顏色色碼或資源庫已定義之顏色命名。
• Assets 資源：使用的元件會全部顯示在這裡，可查看元件庫和元件的各個狀態的效果。若是 icon 元件可直接選擇檔案類型並匯出。
• Exports 輸出（詳見此篇）