iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0

昨天我們介紹了在 Dev mode 開發者所看到的左側區塊內容,今天將會接續討論右側屬性面板,本區塊最上方有兩個選項可切換:檢視 Inspect 和外掛 Plugins 。
https://ithelp.ithome.com.tw/upload/images/20240930/20166746doRzcjJ27R.png

Inspect

未選取的任何一個物件時,在 Inspect 主要有兩個區塊:Code setting 程式碼設定 和 Dev resources 開發資源,若設計師有設計 prototype 則會出現交互流程 Flows 區塊。
https://ithelp.ithome.com.tw/upload/images/20240930/20166746m4hQPIRtJT.png

當你選取任一物件後, Inspect 顯示的內容就會根據點擊到的物件類型而提供不同的內容。
https://ithelp.ithome.com.tw/upload/images/20240930/20166746pORnchLAti.png
以 Frame 來說,顯示的區塊有以下:

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

上一篇
[Day17] 16. Figma Dev mode 開發模式 (二)
下一篇
[Day19] 18. Figma Dev mode 開發模式(四)
系列文
前端工程師&UI 的30天約會:教會猴子用Figma!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言