Figma開發模式不好上手？超好用外掛這邊看！

Figma模式切換

還不知道Figma是什麼的朋友，可以先到這篇複習： FIGMA是什麼？ ；而目前開發模式還在測試階段中，也代表官方會持續不斷優化與調整！

模式分為設計（綠） 與開發（藍） ，而前端在切版時則點擊按鈕就可以切換成開發模式喔！在切換模式之下相當便利，而切換後版面所呈現的區塊也會有所不同，在這篇我們僅討論開發模式。

Figma開發模式

可以看見未使用外掛前數值分散不同區塊，這邊範例是針對點擊圖片後查看Inspect的畫面，所以會少了「Typography」的部分（文字的話就會出現喔！）；先是圖片來源、開發資源（可將任何連結放這裡）、程式碼、圖層狀態、樣式區、輸出。

而因為分類較多，不熟悉Figma的工程師們可能會霧煞煞，或是拼拼湊湊要分好幾次看，而這時候外掛的誕生真的是感激不盡啊（跪）

推薦外掛：autoHTML

注意事項

class的命名需要替換，而不管是使用外掛或沒有使用，目前程式碼都是需要一個一個點擊去查看的，故設計時component的重要性，可以讓設計師、工程師都能一目瞭然共用區塊有多少個，再來分配不同部分來切版。